add web3modal

.env.example

@@ -1,6 +1,9 @@
 # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 # Public Variables
 # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+# WalletConnect Project ID - Generate one in https://cloud.walletconnect.com/
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
+
 # Public Provider(s) - Useful for testing
 NEXT_PUBLIC_USE_PUBLIC_PROVIDER=true
 

README.md

@@ -6,7 +6,7 @@
 ![TS](https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555)
 [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](http://perso.crans.org/besson/LICENSE.html)
 
-Web3 App Template built using Next.js, RainbowKit, Tailwind, Sign-In With Ethereum, and more.
+Web3 App Template built using Next.js, Tailwind, Sign-In With Ethereum, and more.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fturbo-eth%2Ftemplate-web3-app&project-name=TurboETH&repository-name=turbo-eth&demo-title=TurboETH&env=NEXTAUTH_SECRET,DATABASE_URL&envDescription=How%20to%20get%20these%20env%20variables%3A&envLink=https%3A%2F%2Fgithub.com%2Fturbo-eth%2Ftemplate-web3-app%2Fblob%integrations%2F.env.example)
 
@@ -19,7 +19,6 @@ Web3 App Template built using Next.js, RainbowKit, Tailwind, Sign-In With Ethere
   - [UI Components](https://docs.turboeth.xyz/getting-started/design-system)
   - [Backend Database](https://docs.turboeth.xyz/getting-started/database)
 - Core Integrations
-  - [🌈 RainbowKit](https://docs.turboeth.xyz/integration/rainbowkit)
   - [🔏 Sign-In With Ethereum](https://docs.turboeth.xyz/integration/sign-in-with-ethereum)
 - Smart Contract Integrations
   - [ERC20](https://docs.turboeth.xyz/integration/smart-contract-erc20)
@@ -50,7 +49,6 @@ pnpm build
 ### Web3 Core
 
 - [WAGMI CLI](https://wagmi.sh/cli/getting-started) - Automatic React Hook Generation
-- [RainbowKit](https://www.rainbowkit.com/) - Wallet connection manager
 - [Sign-In With Ethereum](https://login.xyz/) - Account authentication
 
 ### Web2 Frameworks

app/(general)/integration/disco/page.tsx

@@ -10,7 +10,7 @@ import { buttonVariants } from "@/components/ui/button"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/erc1155/page.tsx

@@ -6,7 +6,7 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/erc20/page.tsx

@@ -7,7 +7,7 @@ import { LuBook } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/erc721/page.tsx

@@ -6,7 +6,7 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/etherscan/page.tsx

@@ -8,7 +8,7 @@ import { useNetwork } from "wagmi"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/gelato/page.tsx

@@ -7,7 +7,7 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/gitcoin-passport/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { ListStamps } from "@/integrations/gitcoin-passport/components/list-stamps"

app/(general)/integration/gitcoin-passport/score-gated/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { ScoreGate } from "@/integrations/gitcoin-passport/components/score-gate"

app/(general)/integration/gitcoin-passport/stamp-gated/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { StampGate } from "@/integrations/gitcoin-passport/components/stamp-gate"

app/(general)/integration/lens-protocol/layout.tsx

@@ -8,7 +8,7 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/lit-protocol/page.tsx

@@ -8,7 +8,7 @@ import { LuBook } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/pooltogether-v4/page.tsx

@@ -5,7 +5,7 @@ import { LuBook } from "react-icons/lu"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/push-protocol/page.tsx

@@ -18,7 +18,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/integration/sign-in-with-ethereum/page.tsx

@@ -4,7 +4,7 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import {
   PageHeader,
   PageHeaderCTA,

app/(general)/layout.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react"
 
 import { NetworkStatus } from "@/components/blockchain/network-status"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { Footer } from "@/components/layout/footer"
 import { SiteHeader } from "@/components/layout/site-header"
 

app/dashboard/layout.tsx

@@ -5,7 +5,7 @@ import { menuAdmin } from "@/config/menu-admin"
 import { menuDashboard } from "@/config/menu-dashboard"
 import { siteConfig } from "@/config/site"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { SidebarNav } from "@/components/layout/sidebar-nav"
 import { SiteHeader } from "@/components/layout/site-header"
 

components/shared/example-demos.tsx

@@ -12,7 +12,7 @@ import { cn } from "@/lib/utils"
 import { fadeUpVariant } from "@/lib/utils/motion"
 import { buttonVariants } from "@/components/ui/button"
 import { WalletAddress } from "@/components/blockchain/wallet-address"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { PageSectionGrid } from "@/components/layout/page-section"
 import { IsDarkTheme } from "@/components/shared/is-dark-theme"
 import { IsLightTheme } from "@/components/shared/is-light-theme"
@@ -113,6 +113,20 @@ const demos = [
       </div>
     ),
   },
+  {
+    title: "Web3Modal",
+    description: "All in one SDK for connecting your app to your wallet.",
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <Image
+          alt="Web3Modal logo"
+          height={100}
+          src="/integrations/walletconnect.svg"
+          width={100}
+        />
+      </div>
+    ),
+  },
   {
     title: turboIntegrations.etherscan.name,
     description: turboIntegrations.etherscan.description,

config/networks.ts

@@ -93,8 +93,10 @@ export const ETH_CHAINS_DEV =
 export const CHAINS: Chain[] =
   process.env.NODE_ENV === "production" ? ETH_CHAINS_PROD : ETH_CHAINS_DEV
 
+
 const PROVIDERS: ChainProviderFn<Chain>[] = []
 
+
 if (env.NEXT_PUBLIC_ALCHEMY_API_KEY) {
   if (!env.NEXT_PUBLIC_ALCHEMY_API_KEY)
     throw new Error("NEXT_PUBLIC_ALCHEMY_API_KEY is not defined")

env.mjs

@@ -33,6 +33,7 @@ export const env = createEnv({
     NEXT_PUBLIC_SITE_URL: z.string().url().optional(),
   },
   runtimeEnv: {
+    NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     DATABASE_URL: process.env.DATABASE_URL,
     APP_ADMINS: process.env.APP_ADMINS,

integrations/connext/components/form-connext-xtransfer.tsx

@@ -23,7 +23,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
-import WalletConnectCustom from "@/components/blockchain/wallet-connect-custom"
+import WalletConnectCustom from "@/integrations/wallet/components/wallet-connect-custom"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 

integrations/erc20/components/erc20-read.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { HTMLAttributes } from "react"
-import { ConnectButton } from "@rainbow-me/rainbowkit"
 import { formatUnits } from "viem"
 import { Address, useAccount } from "wagmi"
 
@@ -217,7 +216,7 @@ export function ERC20Read({
       </IsWalletConnected>
       <IsWalletDisconnected>
         <div className="flex items-center justify-center gap-10">
-          <ConnectButton />
+          <w3m-button />
         </div>
       </IsWalletDisconnected>
     </>

integrations/erc20/components/erc20-write-mint.tsx

@@ -1,4 +1,4 @@
-import { ConnectButton } from "@rainbow-me/rainbowkit"
+import { WalletConnect } from "@/integrations/wallets/components/wallet-connect"
 import { useForm } from "react-hook-form"
 import { useDebounce } from "usehooks-ts"
 import { BaseError, parseEther } from "viem"
@@ -99,7 +99,7 @@ export function ERC20WriteMint({ address }: ERC20WriteMintProps) {
       </IsWalletConnected>
       <IsWalletDisconnected>
         <div className="flex items-center justify-center gap-10">
-          <ConnectButton />
+          <WalletConnect />
         </div>
       </IsWalletDisconnected>
     </>

integrations/erc20/components/erc20-write-transfer.tsx

@@ -7,7 +7,7 @@ import { Card, CardContent, CardFooter } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { ContractWriteButton } from "@/components/blockchain/contract-write-button"
 import { TransactionStatus } from "@/components/blockchain/transaction-status"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 

integrations/lit-protocol/components/form-lit-decrypt-message.tsx

@@ -8,7 +8,7 @@ import { useToast } from "@/lib/hooks/use-toast"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter } from "@/components/ui/card"
 import { Textarea } from "@/components/ui/textarea"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 

integrations/lit-protocol/components/form-lit-encrypt-message.tsx

@@ -21,7 +21,7 @@ import {
 } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { WalletConnect } from "@/integrations/wallet/components/wallet-connect"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { LinkComponent } from "@/components/shared/link-component"

integrations/wallets/web3modal/components/wallet-connect-custom.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from "react"
+import { useWeb3Modal } from "@web3modal/wagmi/react"
+import { useAccount } from "wagmi"
+
+interface WalletConnectCustomProps extends HTMLAttributes<HTMLDivElement> {
+  classNameConnect?: string
+  classNameConnected?: string
+  classNameNetwork?: string
+  labelConnect?: string
+  labelNetwork?: string
+}
+
+export const WalletConnectCustom = ({
+  classNameConnect,
+  classNameConnected,
+  classNameNetwork,
+  labelConnect = "Connect Wallet",
+  labelNetwork = "Open Network Modal",
+  ...props
+}: WalletConnectCustomProps) => {
+  // 4. Use modal hook
+  const { open } = useWeb3Modal()
+  const { address, isConnected } = useAccount()
+
+  return (
+    <div {...props}>
+      {isConnected && address ? (
+        <button className={classNameConnected} onClick={() => open()}>
+          {`${address.slice(0, 8)}...${address.slice(34, 42)}`}
+        </button>
+      ) : (
+        <button
+          className={classNameConnect}
+          onClick={() => open({ view: "Account" })}
+        >
+          {labelConnect}
+        </button>
+      )}
+
+      <button
+        className={classNameNetwork}
+        onClick={() => open({ view: "Networks" })}
+      >
+        {labelNetwork}
+      </button>
+    </div>
+  )
+}
+
+export default WalletConnectCustom

integrations/wallets/web3modal/components/wallet-connect.tsx

@@ -0,0 +1,12 @@
+import { HtmlHTMLAttributes } from "react"
+
+export const WalletConnect = ({
+  className,
+  ...props
+}: HtmlHTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={className} {...props}>
+      <w3m-button />
+    </span>
+  )
+}