{"id":27972843,"url":"https://github.com/thirdweb-example/thirdweb-rainbowkit-portal","last_synced_at":"2025-10-17T16:23:11.735Z","repository":{"id":274093884,"uuid":"921891621","full_name":"thirdweb-example/thirdweb-rainbowkit-portal","owner":"thirdweb-example","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-23T02:45:39.000Z","size":384,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-07T23:30:26.461Z","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/thirdweb-example.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,"zenodo":null}},"created_at":"2025-01-24T20:16:27.000Z","updated_at":"2025-03-23T02:45:37.000Z","dependencies_parsed_at":"2025-05-07T23:26:50.571Z","dependency_job_id":"b6878ab5-8bf7-4b9d-bcb9-b48800e0decc","html_url":"https://github.com/thirdweb-example/thirdweb-rainbowkit-portal","commit_stats":null,"previous_names":["thirdweb-example/thirdweb-rainbowkit-portal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thirdweb-example/thirdweb-rainbowkit-portal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-rainbowkit-portal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-rainbowkit-portal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-rainbowkit-portal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-rainbowkit-portal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/thirdweb-rainbowkit-portal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-rainbowkit-portal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279374966,"owners_count":26157985,"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","status":"online","status_checked_at":"2025-10-17T02:00:07.504Z","response_time":56,"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":"2025-05-07T23:20:01.973Z","updated_at":"2025-10-17T16:23:11.690Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![repo-banner](https://github.com/user-attachments/assets/d8304886-bbf9-49b8-94c7-8c3c61192ba6)\n# thirdweb to RainbowKit Wallet Portal\n\n[\u003cimg alt=\"thirdweb SDK\" src=\"https://img.shields.io/npm/v/thirdweb?label=Thirdweb SDK\u0026style=for-the-badge\u0026logo=npm\" height=\"30\"\u003e](https://www.npmjs.com/package/thirdweb)\n[\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/834227967404146718.svg?color=7289da\u0026label=discord\u0026logo=discord\u0026style=for-the-badge\" height=\"30\"\u003e](https://discord.gg/thirdweb)\n\nWith thirdweb's `SiteLink` component, users can open links to other sites you own without needing to reconnect their wallet.\n\n## Getting Started\n\nNavigate to the thirdweb app with, install its dependencies, and run the app:\n```bash\ncd thirdweb-app \u0026\u0026 pnpm i\npnpm dev\n```\n\nIn a new terminal window, navigate to the RainbowKit app, install, and run the app:\n```bash\ncd rainbow-app \u0026\u0026 pnpm i\npnpm dev\n```\n\nGo to [http://localhost:3000](http://localhost:3000) in a browser. This is the thirdweb app, connect your wallet here.\n\nOnce your wallet is connected, click \"Visit Rainbow Site\". This will take you to the second app (make sure its running on port 3001) and after a moment, you'll be connected with the same wallet address.\n\nhttps://github.com/user-attachments/assets/0a45cfc6-5193-4fbb-a945-89e39d022338\n\n## How it Works\n\n### The thirdweb app\n\nThe thirdweb app is just like any other app you'd build with the thirdweb SDK! There's no special configurations necessary as the `SiteLink` component does all the work. Just add it anywhere in your app:\n```tsx\nimport { SiteLink } from \"thirdweb/react\";\n \n\u003cSiteLink\n  href=\"https://thirdweb.com\"\n  client={thirdwebClient}\n  ecosystem={{ id: \"ecosystem.thirdweb\" }}\n\u003e\n  Visit Site\n\u003c/SiteLink\u003e;\n```\n\n\u003e [!IMPORTANT]  \n\u003e Your thirdweb and RainbowKit sites must use the same client ID or ecosystem for the `SiteLink` or `SiteEmbed` components to work.\n\nIf you'd rather embed another site rather than link out to it, you can use the `SiteEmbed` component:\n\n```tsx\nimport { SiteEmbed } from \"thirdweb/react\";\n \n\u003cSiteEmbed\n  src=\"https://thirdweb.com\"\n  client={thirdwebClient}\n  ecosystem={{ id: \"ecosystem.thirdweb\" }}\n/\u003e;\n```\n\n\u003e [!TIP]\n\u003e Make sure the embedded site doesn't restrict usage as an iframe.\n\n### The RainbowKit App\n\nTo allow your RainbowKit app to receive and establish the connection with your thirdweb wallet, we use the thirdweb wagmi adapter from the `@thirdweb-dev/wagmi-adapter` package.\n\nFrom an already setup RainbowKit site, first add the `ThirdwebProvider` where you setup your wagmi and RainbowKit providers:\n\n```tsx\nimport { ThirdwebProvider } from \"thirdweb/react\"\n\n...\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003cWagmiProvider config={config}\u003e\n      \u003cThirdwebProvider\u003e\n        \u003cQueryClientProvider client={client}\u003e\n          \u003cRainbowKitProvider\u003e\n            \u003cComponent {...pageProps} /\u003e\n          \u003c/RainbowKitProvider\u003e\n        \u003c/QueryClientProvider\u003e\n      \u003c/ThirdwebProvider\u003e\n    \u003c/WagmiProvider\u003e\n  );\n}\n```\n\nThen, include the thirdweb in-app wallet connector in your wagmi config:\n\n```tsx\nimport { createThirdwebClient, defineChain as thirdwebChain } from 'thirdweb';\n...\n\nconst client = createThirdwebClient({\n  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,\n});\n\nexport const config = createConfig({\n  chains: [...],\n  connectors: [\n    // add the in-app wallet connector\n    inAppWalletConnector({\n      client,\n      smartAccount: {\n        sponsorGas: true,\n        chain: thirdwebChain(1)\n      }\n    }),\n  ],\n  transports: {\n    ...\n  },\n});\n```\n\n\u003e [!NOTE]  \n\u003e We're using smart accounts in this example to keep the same wallet/address between the origin and destinations sites. If you're not using smart accounts in your origin site, just remove the `smartAccount` object from your connector.\n\nThat's all there is to it! You've now created a wallet portal between a thirdweb and RainbowKit site!\n\n## Documentation\n\n-   [React SDK](https://portal.thirdweb.com/react/v5)\n-   [SiteLink](https://portal.thirdweb.com/react/v5/SiteLink)\n-   [RainbowKit](https://www.rainbowkit.com/docs/introduction)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fthirdweb-rainbowkit-portal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fthirdweb-rainbowkit-portal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fthirdweb-rainbowkit-portal/lists"}