{"id":18794444,"url":"https://github.com/chainstacklabs/evm-knife","last_synced_at":"2025-04-13T14:32:44.435Z","repository":{"id":145837451,"uuid":"617746841","full_name":"chainstacklabs/evm-knife","owner":"chainstacklabs","description":"This project is a collection of Web3 tools to make it easier for developers to encode, decode, and convert EVM friendly values.","archived":false,"fork":false,"pushed_at":"2024-04-10T11:06:49.000Z","size":2117,"stargazers_count":4,"open_issues_count":10,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T06:12:11.555Z","etag":null,"topics":["evm","nextjs","smart-contract","tools","web3"],"latest_commit_sha":null,"homepage":"https://evm-knife-chainstacklabs.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chainstacklabs.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":"2023-03-23T02:43:15.000Z","updated_at":"2024-06-15T13:31:23.000Z","dependencies_parsed_at":"2024-03-20T17:54:07.938Z","dependency_job_id":null,"html_url":"https://github.com/chainstacklabs/evm-knife","commit_stats":null,"previous_names":["chainstacklabs/evm-knife"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chainstacklabs%2Fevm-knife","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chainstacklabs%2Fevm-knife/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chainstacklabs%2Fevm-knife/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chainstacklabs%2Fevm-knife/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chainstacklabs","download_url":"https://codeload.github.com/chainstacklabs/evm-knife/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248728224,"owners_count":21152180,"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":["evm","nextjs","smart-contract","tools","web3"],"created_at":"2024-11-07T21:29:27.332Z","updated_at":"2025-04-13T14:32:44.042Z","avatar_url":"https://github.com/chainstacklabs.png","language":"JavaScript","readme":"## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Application\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\nApp is built uisng Next [Pages Router](https://nextjs.org/docs) and [Ant Design UI](https://ant.design/components/overview) library for React.\n\n## What is module?\n\nIn terms of this app module is standalone component with isolated logic inside. It can use reusable components, but all logic must be performed inside module component's bounds.\n\nModule consists of:\n\n- Heading (required)\n- Description (optional but highly recommended)\n- Module logic (required)\n\nEach module is represented in left navigation bar and must belong to some group. If no group is suitable, you can create a new one.\n\nEach module must have unique URL in app (see below).\n\nModules are stored at `src/components/Modules/`\n\n## How to add a new module?\n\n### Create a new module component\n\nCreate a new module with unique name with camel case. Eg: `MyNewModule.js`. Exported function must have the same name. Additional css is ok. Eg:\n\n```jsx\nexport default function MyNewModule {\n\n  ...some logic...\n\n  return ...\n}\n```\n\nIt is ok to use additional components for UI. You can keep them here `src/components/`.\n\n### Create a new page for module\n\nRouting in next.js is performed automatically. All you need is to add js file to `src/pages`.\n\nKeep file name consistent, but here it must be divided with dashes, because urls dont support camel case. New js file will be called: `src/pages/my-new-module.js`.\n\nBig difference from the prevoius step is the following. Since we create a new **page** for new module and it is still must be readable, we call new component inside page file with `Page` postfix in camel case:\n\n```jsx\nexport default function MyNewModulePage() {\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        ...\n      \u003c/Head\u003e\n\n      \u003cLayoutWrapper\u003e\n        \u003cMyNewModule /\u003e   \u003c- this is your module\n      \u003c/LayoutWrapper\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n\u003e Notice that every module must be wrapped in `LayoutWrapper`, this component is responsible for position on the page and includes left navigation bar inside.\n\n### Add new module in navigation bar\n\nNavigation bar config is located at `src/components/LayoutWrapper/LayoutWrapper.jsx` in `items` array.\n\n---\n\n**If you adding new module to existing group:**\n\nFind a target group in array. You can find group names in functions as the first argument, eg for `Converters`:\n\n```js\n/**\n * @param {string} Group name displayed on navigation bar\n * @param {string} Unique group/subgroup item ID\n * @param {ReactNode} Icon used near group label\n * @param {Array} Group of subitems\n */\n\ngetItem('Converters', '5', \u003c\u003e\u003c/\u003e, [\n  getItem('Decimal → hexadecimal', 'decimal-hexadecimal'),\n  ...\n  getItem('ENS → address', 'ens-to-address'),\n  getItem('My new module', 'my-new-module') \u003c- this is your module\n]),\n```\n\n\u003e Notice that your new module's Unique id must be the same as new page file's name, because this ID is used to generate routes between different pages inside the app.\n\n---\n\n**If you adding new module to a new group:**\n\nCome up with a name to a new group and add it to config:\n\n```js\n/**\n * @param {string} Group name displayed on navigation bar\n * @param {string} Unique group/subgroup item ID\n * @param {ReactNode} Icon used near group label\n * @param {Array} Group of subitems\n */\n\n...\ngetItem('Converters', '5', ...),\n\ngetItem('New group for my module', '6', \u003c\u003e\u003c/\u003e, [\n  getItem('My new module', 'my-new-module') \u003c- this is your module\n]),\n```\n\nHere `New group for my module` has unique ID `6` by it's order's number.\n\n\u003e Notice that your new module's Unique id must be the same as new page file's name, because this ID is used to generate routes between different pages inside the app.\n\nLast thing is turn on auto expanding for groups on navigation bar. You need to add group's ID to menu `defaultOpenKeys` property:\n\n```jsx\n\u003cMenu\n  onClick={onClick}\n  selectedKeys={[activeNavItem.replace('/', '')]}\n  defaultOpenKeys={['2', '3', '4', '5', '6']} \u003c- new ID added\n  mode=\"inline\"\n  items={items}\n  className={styles.navbar}\n/\u003e\n```\n\n---\n\n### Summary\n\nNew module's file: `MyNewModule.js`  \nNew module's component: `MyNewModule`\n\nNew module's page file: `my-new-module.js`  \nNew module's page component: `MyNewModulePage`  \nNew module's page URL: `app.com/my-new-module` (generated automatically)\n\n## Left navigation bar\n\nCreated with Ant design's Menu component. [See docs](https://ant.design/components/menu) for API and description.\n\n## Images\n\nThere are two types of images in the app: icons and illustrations.\n\n### UI icons\n\nEg: home icon in left navigation bar.  \nSuch icons located in `src/components/Icons`.  \nEach icon is wrapped in react component. In this way it's possible to use icons inside Ant Design's components.\n\n### Illustrations\n\nEg: images on home page  \nSuch icons located in `public/images`.  \nThese can be SVGs or raster images such as PNG or JPG. They are used in app via next's `Image` module, [see the docs](https://nextjs.org/docs/pages/api-reference/components/image). Eg:\n\n```js\nimport solidity from \"../../../../public/images/solidity.svg\";\n...\n\u003cImage src={solidity} /\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchainstacklabs%2Fevm-knife","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchainstacklabs%2Fevm-knife","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchainstacklabs%2Fevm-knife/lists"}