{"id":22998392,"url":"https://github.com/tablelandnetwork/react-ts-tableland-template","last_synced_at":"2025-10-19T05:21:55.402Z","repository":{"id":196057892,"uuid":"647464067","full_name":"tablelandnetwork/react-ts-tableland-template","owner":"tablelandnetwork","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-08T21:05:34.000Z","size":563,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-08T22:24:54.040Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tablelandnetwork.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-30T20:55:40.000Z","updated_at":"2024-05-08T22:24:56.871Z","dependencies_parsed_at":"2024-03-11T19:25:13.355Z","dependency_job_id":"0f5c04d8-103d-41a3-831a-2f0dcd194f5e","html_url":"https://github.com/tablelandnetwork/react-ts-tableland-template","commit_stats":null,"previous_names":["tablelandnetwork/react-ts-tableland-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tablelandnetwork%2Freact-ts-tableland-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tablelandnetwork%2Freact-ts-tableland-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tablelandnetwork%2Freact-ts-tableland-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tablelandnetwork%2Freact-ts-tableland-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tablelandnetwork","download_url":"https://codeload.github.com/tablelandnetwork/react-ts-tableland-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229786993,"owners_count":18124014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T06:13:18.619Z","updated_at":"2025-10-19T05:21:50.339Z","avatar_url":"https://github.com/tablelandnetwork.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Tableland (TypeScript) Starter\n\n\u003e A TypeScript template for @tableland + React + wagmi + Rainbowkit projects\n\n## Table of Contents\n\n- [Background](#background)\n- [Usage](#usage)\n  - [Prerequisites](#prerequisites)\n  - [Installation \\\u0026 build](#installation--build)\n- [Development](#development)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Background\n\nThis repo contains starter code for a React + [wagmi](https://wagmi.sh/) + [Rainbowkit](https://www.rainbowkit.com/) project with useful Tableland clients included, bootstrapped using [`Vite`](https://vitejs.dev/). It contains a basic example for connecting to a wallet to then allow creating, writing to, and reading a table using the Tableland SDK ([`@tableland/js-tableland)`](https://github.com/tablelandnetwork/js-tableland)) as well as Local Tableland ([`@tableland/local`](https://github.com/tablelandnetwork/local-tableland)) support during development. Both linting (with [`eslint`](https://eslint.org/)) and code formatting (with [`prettier`](https://prettier.io/)) are also included, along with [Tailwind CSS](https://tailwindcss.com/).\n\n## Usage\n\n### Prerequisites\n\nBefore you get started, you'll need to create a WalletConnect account and create a project and retrieve the project ID: [here](https://walletconnect.com/)\n\nRainbowKit \u0026 wagmi require a WalletConnect project ID in order to work properly. These should be set up and configured in a `.env` file within this project's root and saved to the following variables:\n\n```txt\nVITE_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id\n```\n\nThere's also a `VITE_ENABLE_TESTNETS` boolean value you can set in order to enable or disable wallet connections to testnet chains. All of the chains that Tableland supports are configured, including the Hardhat chain if you choose to run Local Tableland during development.\n\n### Installation \u0026 build\n\nFirst, clone this repo:\n\n```sh\ngit clone https://github.com/tablelandnetwork/react-ts-tableland-template\n```\n\nTo get started, you can run `npm run up` to start the app. This runs `npm install` plus the `build` / `start` scripts and then serves the application at [http://localhost:4173](http://localhost:4173). The starter template includes the following, located in `src/components/Tableland.jsx`:\n\n- Navbar wallet connection using RainbowKit.\n- A form with inputs for creating a table (hardcoded with a `id INTEGER PRIMARY KEY, val TEXT` schema) and writing a single value to it.\n- Reading and rendering your table's data on button click.\n\nThe wagmi setup occurs in `src/providers` and `src/wagmi.js`. Lastly, there is a `useSigner` hook in `src/hooks/useSigner.js`. It's a required adapter for [`ethers`](https://docs.ethers.org/v5/) to work with wagmi (and RainbowKit), which use [`viem`](https://viem.sh/) under the hood.\n\n## Development\n\nIf you'd like to run the project locally, use the following scripts in separate terminal windows:\n\n```sh\nnpm run lt\nnpm run dev\n```\n\nThis will do two things: spin up a Local Tableland node and run the app in development mode to reflect live code changes, served at [http://localhost:5173](http://localhost:5173). Local Tableland is an _extremely_ useful tool to develop as it's a lightweight Tableland validator (also spinning up a Hardhat node under the hood) that runs locally on your machine with full Tableland protocol compliance.\n\nThere are also a few other scripts you can use:\n\n- `npm run lint`: Lint the codebase with `eslint` (along with the `lint:fix` option).\n- `npm run prettier`: Prettify the code format with `prettier` (along with the `prettier:fix` option).\n- `npm run format`: Both lint and format the codebase with `eslint` and `prettier`, also fixing any issues it can.\n- `npm run clean`: Remove the `dist` folder.\n- `npm run test`: A placeholder for running tests (currently empty).\n\n## Contributing\n\nPRs accepted.\n\nSmall note: If editing the README, please conform to the\n[standard-readme](https://github.com/RichardLitt/standard-readme) specification.\n\n## License\n\nMIT AND Apache-2.0, © 2021-2023 Tableland Network Contributors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftablelandnetwork%2Freact-ts-tableland-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftablelandnetwork%2Freact-ts-tableland-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftablelandnetwork%2Freact-ts-tableland-template/lists"}