{"id":20992239,"url":"https://github.com/react-declarative/cra-template-solidity","last_synced_at":"2026-04-13T05:41:54.826Z","repository":{"id":63661372,"uuid":"559227550","full_name":"react-declarative/cra-template-solidity","owner":"react-declarative","description":"A starter kit build especially for rapid smart contract development in Remix IDE. Once you wrote your Solidity smart contract in Remix you could easely deploy it into global testnet or local Ganache blockchain by using a UI. After that simple copy and paste smart contract address into params.ts","archived":false,"fork":false,"pushed_at":"2023-04-29T22:54:20.000Z","size":572,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-09T12:24:49.959Z","etag":null,"topics":["create-react-app","declarative-programming","ethereum","ethers","material-ui","metamask","mobx","mui","react","solidity","state","state-management","typescript","ux","web3"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/cra-template-solidity","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-declarative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-10-29T13:10:52.000Z","updated_at":"2024-05-29T22:14:50.495Z","dependencies_parsed_at":"2024-05-29T22:14:43.087Z","dependency_job_id":"c4376a84-882f-4128-bdb7-f5d50c5a8695","html_url":"https://github.com/react-declarative/cra-template-solidity","commit_stats":{"total_commits":44,"total_committers":1,"mean_commits":44.0,"dds":0.0,"last_synced_commit":"22642bbeeb5e84b014fb6f708c93f04b9195e82a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Fcra-template-solidity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Fcra-template-solidity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Fcra-template-solidity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-declarative%2Fcra-template-solidity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-declarative","download_url":"https://codeload.github.com/react-declarative/cra-template-solidity/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243392316,"owners_count":20283563,"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":["create-react-app","declarative-programming","ethereum","ethers","material-ui","metamask","mobx","mui","react","solidity","state","state-management","typescript","ux","web3"],"created_at":"2024-11-19T07:10:04.316Z","updated_at":"2025-12-29T05:42:23.542Z","avatar_url":"https://github.com/react-declarative.png","language":"TypeScript","readme":"\u003cimg src=\"./docs/logo.svg\" height=\"75px\" align=\"right\"\u003e\n\n# ⚛️ cra-template-solidity\n\n\u003e A Ethereum starter kit for rapid development of the proof of concept solidity app\n\n[![npm](https://img.shields.io/npm/v/cra-template-solidity.svg?style=flat-square)](https://npmjs.org/package/cra-template-solidity)\n\nA starter kit build especially for rapid smart contract development in [Remix IDE](https://remix-project.org/). Once you wrote your Solidity smart contract in Remix you could easely deploy it into global [testnet](https://ethereum.org/en/developers/docs/networks/) or local [Ganache](https://trufflesuite.com/ganache/) blockchain [by using a UI](https://www.linkedin.com/pulse/using-ganache-ethereum-emulator-metamask-farhan-khan/). After that simple copy and paste smart contract address into [params.ts](./template/src/config/params.ts)\n\n![remix-deploy](./docs/remix.png)\n\n## Contribute\n\n\u003e [!IMPORTANT]\n\u003e Made by using [react-declarative](https://github.com/react-declarative/react-declarative) to solve your problems. **⭐Star** and **💻Fork** It on github will be appreciated\n\n## Usage\n\n\u003e Create an app from template\n\n```bash\nyarn create react-app --template cra-template-solidity .\n```\n\nor\n\n```bash\nnpx create-react-app . --template=solidity\n```\n\n\u003e Deploy smart contract to [Ganache](https://trufflesuite.com/ganache/) and update [config file](./template/src/config/params.ts) ([also update ABI if you changed it](https://www.geeksforgeeks.org/application-binary-interfaceabi-in-ethereum-virtual-machine/)). The path is `~/src/config/params.ts`\n\n```tsx\nexport const CC_CONTRACT_ADDRESS = /*process.env.REACT_APP_CONTRACT ||*/ '0xec7e48D6Fb993d532B0aA2E0393461680D7ab83f';\nexport const CC_APP_NAME = 'HashApp';\nexport { default as CC_CONTRACT_ABI } from \"../contract/ABI.json\";\n```\n\n\u003cimg src=\"./docs/saturn.svg\" height=\"25px\" align=\"right\"\u003e\n\n## Contains boilerplate for\n\n1. **MetaMask Connection request**\n\n2. **Network ID check**\n\n3. **Contract deployment status check by address**\n\n4. **Sample todo-list smart contract**\n\n5. **Simple config by variable with smart contract address in source code**\n\n## What's inside\n\n1. [ethers.js](https://docs.ethers.io/v5/)\n2. [TypeScript](https://www.typescriptlang.org/)\n3. [MUI](https://mui.com/)\n4. [Mobx](https://mobx.js.org/)\n5. [react-declarative](https://www.npmjs.com/package/react-declarative)\n6. [tss-react](https://www.npmjs.com/package/tss-react)\n\n\u003cimg src=\"./docs/cubes.svg\" height=\"25px\" align=\"right\"\u003e\n\n## Code samples\n\n\u003e Solidity\n\n```solidity\n// SPDX-License-Identifier: GPL-3.0\n\npragma solidity ^0.8.7;\n\ncontract TodoList {\n\n    struct Todo {\n        uint id;\n        string content;\n        address owner;\n        bool isDeleted;\n    }\n\n    uint256 public pendingTodoId;\n\n    mapping (uint256 =\u003e Todo) public todoMap;\n\n    function todosOfOwner() public view returns (uint256[] memory) {\n        uint256 todosLength = pendingTodoId;\n        uint256[] memory ownedTodoDirtyIds = new uint256[](todosLength);\n        uint256 ownedTodoIdx = 0;\n        for (uint id = 0; id != todosLength; id++) {\n            Todo memory todo = todoMap[id];\n            if (todo.owner == msg.sender \u0026\u0026 !todo.isDeleted) {\n                ownedTodoDirtyIds[ownedTodoIdx] = todo.id;\n                ownedTodoIdx++;\n            }\n        }\n        uint256[] memory ownedTodoIds = new uint256[](ownedTodoIdx);\n        for (uint id = 0; id != ownedTodoIdx; id++) {\n            ownedTodoIds[id] = ownedTodoDirtyIds[id];\n        }\n        return ownedTodoIds;\n    }\n\n    function addTodo(string memory _content) public {\n        uint256 currentId = pendingTodoId++;\n        Todo memory todo;\n        todo.id = currentId;\n        todo.content = _content;\n        todo.owner = msg.sender;\n        todoMap[currentId] = todo;\n    }\n\n    function removeTodo(uint256 _id) public {\n        Todo storage todo = todoMap[_id];\n        require(todo.owner == msg.sender, 'You are not the owner of that todo');\n        todo.isDeleted = true;\n    }\n\n}\n\n```\n\n\u003e TypeScript\n\n```tsx\nimport { makeAutoObservable, runInAction } from \"mobx\";\nimport { inject, singleshot } from \"react-declarative\";\n\nimport {\n    ethers,\n    BaseContract\n} from \"ethers\";\n\nimport EthersService from \"./EthersService\";\n\nimport { CC_CONTRACT_ADDRESS } from \"../../config/params\";\nimport { CC_CONTRACT_ABI } from \"../../config/params\";\n\nimport TYPES from \"../types\";\n\ntype IContract = BaseContract \u0026 Record\u003cstring, (...args: any[]) =\u003e Promise\u003cany\u003e\u003e;\n\nexport class ContractService {\n\n    private readonly ethersService = inject\u003cEthersService\u003e(TYPES.ethersService);\n\n    private _instance: IContract = null as never;\n\n    get isContractConnected() {\n        return !!this._instance;\n    };\n\n    constructor() {\n        makeAutoObservable(this);\n    };\n\n    getPendingTodoId = async () =\u003e Number(await this._instance.pendingTodoId());\n\n    getTodoById = async (id: number) =\u003e {\n        const todoItem = await this._instance.todoMap(id);\n        return {\n            id: Number(todoItem.id),\n            content: String(todoItem.content),\n            owner: String(todoItem.owner),\n            isDeleted: Boolean(todoItem.isDeleted),\n        };\n    };\n\n    addTodo = async (content: string) =\u003e await this._instance.addTodo(content);\n\n    removeTodoById = async (id: number) =\u003e await this._instance.removeTodo(id);\n\n    todosOfOwner = async () =\u003e {\n        const todoIds: number[] = (await this._instance.todosOfOwner()).map((bigint: any) =\u003e Number(bigint));\n        return await Promise.all(todoIds.map((id) =\u003e this.getTodoById(id)));\n    };\n\n    todosOfEveryone = async () =\u003e {\n        const pendingId = await this.getPendingTodoId();\n        const totalIds = [...Array(pendingId).keys()];\n        return await Promise.all(totalIds.map((id) =\u003e this.getTodoById(id)));\n    };\n\n    prefetch = singleshot(async () =\u003e {\n        console.log(\"ContractService prefetch started\");\n        try {\n            const deployedCode = await this.ethersService.getCode(CC_CONTRACT_ADDRESS);\n            if (deployedCode === '0x') {\n                throw new Error('ContractService contract not deployed');\n            }\n            const instance = new ethers.Contract(\n                CC_CONTRACT_ADDRESS,\n                CC_CONTRACT_ABI,\n                this.ethersService.getSigner(),\n            ) as IContract;\n            runInAction(() =\u003e this._instance = instance);\n        } catch (e) {\n            console.warn('ContractService prefetch failed', e);\n        }\n    });\n\n}\n\n```\n\n\u003cimg src=\"./docs/triangle.svg\" height=\"25px\" align=\"right\"\u003e\n\n## See also\n\nThis starter kit is build on top of [react-declarative](https://www.npmjs.com/package/react-declarative) npm package. I think you are going to like the way of reactive programming in this app and you will want bring it to other projects which may not require web3 technologies. So check the [github repo](https://github.com/react-declarative/react-declarative) and seek for other guides\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-declarative%2Fcra-template-solidity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-declarative%2Fcra-template-solidity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-declarative%2Fcra-template-solidity/lists"}