{"id":19885844,"url":"https://github.com/konjoinfinity/magic-polygon","last_synced_at":"2026-06-12T05:32:27.128Z","repository":{"id":113905656,"uuid":"505978685","full_name":"konjoinfinity/magic-polygon","owner":"konjoinfinity","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-21T19:34:44.000Z","size":228,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T03:47:29.475Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/konjoinfinity.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":"2022-06-21T19:31:23.000Z","updated_at":"2022-11-24T14:50:12.000Z","dependencies_parsed_at":"2023-07-23T01:00:19.452Z","dependency_job_id":null,"html_url":"https://github.com/konjoinfinity/magic-polygon","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/konjoinfinity/magic-polygon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konjoinfinity%2Fmagic-polygon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konjoinfinity%2Fmagic-polygon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konjoinfinity%2Fmagic-polygon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konjoinfinity%2Fmagic-polygon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/konjoinfinity","download_url":"https://codeload.github.com/konjoinfinity/magic-polygon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konjoinfinity%2Fmagic-polygon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34231214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-12T17:35:39.256Z","updated_at":"2026-06-12T05:32:27.111Z","avatar_url":"https://github.com/konjoinfinity.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Resources\n- [GitHub Repo](https://github.com/magiclabs/magic-polygon)\n- [Demo](https://magic-polygon.vercel.app/login)\n\n# Quick Start\n\n```\n$ git clone https://github.com/magiclabs/magic-polygon.git\n$ cd magic-polygon\n$ mv .env.local .env // enter your Magic Publishable Key (from https://dashboard.magic.link)\n$ yarn install\n$ yarn start\n```\n\n# Introduction\n\nWith the rising gas costs on Ethereum, many developers are looking towards scaling solutions to help with both improved transaction speed, as well as cheaper gas costs for users. Polygon (formerly Matic) is one such solution. \n\nPolygon is a protocol which enables connecting Ethereum-compatible blockchains, and is also a Proof of Stake side-chain scaling solution for Ethereum. The side-chain runs alongside Ethereum's blockchain, and processes transactions before finalizing them on Ethereum.\n\nWith Magic, developers can connect to Polygon by simply specifying the network URL when initiating a Magic instance. This guide will show how you can create a web3-enabled app, allow users to switch between Ethereum and Polygon networks, call smart contracts, and send transactions. \n\n_Note: `ETH` is the native token to Ethereum, `MATIC` is the native token to Polygon._\n\n# Tutorial\n\n_Note: this app was bootstrapped with the `npx make-magic` React template._\n\n## Connecting to Ethereum / Polgyon\n\nIn `magic.js`, we will need two `Magic` and two `Web3` instances, one for each network, since we're allowing users to switch between the two. If you're only interested in connecting to Polygon, then only one instance of `Magic` and `Web3` should be created. We also are adding `magicEthereum.network = \"ethereum\"` to be able to identify the Magic network we're creating.\n\nYou’ll use the same API key for both `Magic` instances so that the user’s public address does not change. \n\n```js\nimport { Magic } from 'magic-sdk';\nimport Web3 from 'web3';\n\n/** \n * NOTE: when connecting to a testnet, TEST API keys must be used from the Magic dashboard (live API keys for eth mainnet)\n */\n\nconst customNodeOptions = {\n  rpcUrl: 'https://rpc-mumbai.matic.today',\n  chainId: 80001\n}\n\n// Setting network to Matic\nexport const magicMatic = new Magic(process.env.REACT_APP_MAGIC_PUBLISHABLE_KEY, { network: customNodeOptions });\nmagicMatic.network = \"matic\"\n\nexport const maticWeb3 = new Web3(magicMatic.rpcProvider);\n\n// Setting network to Ethereum (Ropsten Testnet)\nexport const magicEthereum = new Magic(process.env.REACT_APP_MAGIC_PUBLISHABLE_KEY, { network: 'ropsten' });\nmagicEthereum.network = \"ethereum\"\n\nexport const ethWeb3 = new Web3(magicEthereum.rpcProvider);\n```\n\n## Switching Between Networks\n\nUsers are able to switch between the Ethereum and Polygon networks with the `select` element dropdown list. Since one `Magic` instance points towards Ethereum, and the other Polygon, we simply update the instance that we’re using for our app based on whichever network the user selects.\n\n```js\nimport { magicEthereum, magicMatic, ethWeb3, maticWeb3 } from \"../magic\";\n\n  const handleChangeNetwork = (e) =\u003e {\n    e.target.value === 'ethereum' ? setMagic(magicEthereum) : setMagic(magicMatic);\n    fetchBalance(userMetadata.publicAddress);\n    fetchContractMessage();\n  }\n\n  return (\n    \u003cdiv className=\"info\"\u003e\n      \u003cselect name=\"network\" onChange={(e) =\u003e handleChangeNetwork(e)}\u003e\n        \u003coption value=\"ethereum\"\u003eEthereum (Ropsten Testnet)\u003c/option\u003e\n        \u003coption value=\"matic\"\u003eMatic (Mumbai Testnet)\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n  )\n```\n\n## Viewing User Balance\n\nA user's public address will be the same on both Ethereum and Polygon (as long as you are using the same API key for each instance) so a simple `web3.eth.getBalance` call is all that is needed for either network. Because the native token of Ethereum is `ETH`, and for Polygon is `MATIC`, we're displaying the appropriate token symbol based on the network we're connected to.\n\n```js\nconst fetchBalance = (address) =\u003e {\n  web3.eth.getBalance(address).then(bal =\u003e setBalance(web3.utils.fromWei(bal)))\n}\n\nreturn (\n\u003ch1\u003eBalance\u003c/h1\u003e\n\u003cdiv className=\"info\"\u003e\n  {balance.toString().substring(0, 6)} {magic.network === 'matic' ? 'MATIC' : 'ETH'}\n\u003c/div\u003e\n)\n```\n\n## Send Transaction\n\nSending a transaction is also very simple and the same for either network you're connected to. All that's needed is to provide an amount to send, and  `from` and `to` addresses. If no `gas` or `gasPrice` are explicitly passed in, the gas limit and price will be calculated automatically. Otherwise, the values passed in will be used.\n\n```js\nconst web3 = magic.network === \"ethereum\" ? ethWeb3 : maticWeb3;\n\nconst sendTransaction = async () =\u003e {\n  if (!toAddress || !amount) return;\n  const receipt = await web3.eth.sendTransaction({\n    from: publicAddress,\n    to: toAddress,\n    value: web3.utils.toWei(amount)\n  });\n}\n\nreturn (\n \u003cdiv className=\"container\"\u003e\n  \u003ch1\u003eSend Transaction\u003c/h1\u003e\n  \u003cinput \n    type=\"text\" \n    value={toAddress} \n    onChange={(e) =\u003e setToAddress(e.target.value)} \n    placeholder=\"To Address\" \n  /\u003e\n  \u003cinput \n    type=\"text\" \n    value={amount} \n    onChange={(e) =\u003e setAmount(e.target.value)} \n    placeholder=\"Amount\" \n  /\u003e\n  \u003cbutton onClick={sendTransaction}\u003eSend Transaction\u003c/button\u003e\n\u003c/div\u003e\n)\n```\n\n## Calling Smart Contracts\n\nSeparate smart contracts will need to be deployed on each Ethereum and Polygon for your users to interact with them. So you'll also need to dynamically know the correct address that the contract is deployed to in order to call it. \n\n```js\nconst network = magic.network === \"ethereum\" ? 'ethereum' : 'matic';\nconst ropstenContractAddress = '0x8cb46E4bFc14Ce010dFbE5Ecb61BA64d798D3A67';\nconst maticContractAddress = '0x9ebE0B009146643bb3560375A4562D8d89E135e9';\nconst contract = new web3.eth.Contract(abi, network === \"ethereum\" ? ropstenContractAddress : maticContractAddress);\n\n// Grabbing `message` variable value stored in the smart contract\nconst fetchContractMessage = () =\u003e contract.methods.message().call().then(setMessage)\n\n// Update contract `message` value on the blockchain\nconst updateContractMessage = async () =\u003e {\n  if (!newMessage) return;\n  const receipt = await contract.methods.update(newMessage).send({ from: user.publicAddress });\n}\n\nreturn (\n  \u003ch1\u003eContract Message\u003c/h1\u003e\n  \u003cdiv className=\"info\"\u003e{message}\u003c/div\u003e\n\n  \u003ch1\u003eUpdate Message\u003c/h1\u003e\n  \u003cinput \n    type=\"text\" \n    value={newMessage} \n    onChange={(e) =\u003e setNewMessage(e.target.value)} \n    placeholder=\"New Message\" /\u003e\n\n  \u003cbutton onClick={updateContractMessage}\u003eUpdate\u003c/button\u003e\n)\n```\n\n## Done\n\nThat's all there is to it! You've now got an app that allows users to create a wallet with just their email, and connect to multiple networks within your app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonjoinfinity%2Fmagic-polygon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonjoinfinity%2Fmagic-polygon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonjoinfinity%2Fmagic-polygon/lists"}