feat: added ConnectAccount for Smart Wallet integration (coinbase#490)

Author: Zizzamia

.changeset/smooth-waves-give.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/build-onchain-apps': minor
+---
+
+- **feat**: made Smart Wallet the only choice for BOAT.

README.md

@@ -18,7 +18,7 @@ Whether you're a hackathon participant or an ambitious entrepreneur looking to b
 
 - Progressive Web App support using [Next.js](https://nextjs.org/) 🏗️
 - Ethereum L2 support through [Base](https://base.org/) 🔵
-- Wallet connect integration with [RainbowKit](https://www.rainbowkit.com) 🌈
+- Easy account creation with [Smart Wallet](https://www.smartwallet.dev/why)
 - Live examples and documentation for Minting and Payments experiences with [wagmi](https://wagmi.sh/) and [Viem](https://viem.sh/) 🚀
 - Latest styling best practices with [Tailwind CSS](https://tailwindcss.com/) 💅
 - Easy maintenance with linting, formatting, and tests ✅

src/create/getUserInput.ts

@@ -2,7 +2,6 @@ import * as prompts from '@clack/prompts';
 import { experiences } from './experiences';
 
 export type EnvVar = {
-  walletConnectProjectID: string;
   blockExplorerApiKey: string;
   rpcUrl: string;
 };
@@ -26,12 +25,6 @@ export async function getUserInput() {
           },
         });
       },
-      pickSmartWallet: () => {
-        return prompts.confirm({
-          message: 'Do you want to use Smart Wallet?',
-          initialValue: true,
-        });
-      },
       selectedModules: () => {
         return prompts.multiselect({
           message:
@@ -54,17 +47,6 @@ export async function getUserInput() {
 
   const envVars = await prompts.group(
     {
-      walletConnectProjectID: () => {
-        if (project.pickSmartWallet) return;
-        return prompts.text({
-          message: 'WalletConnect Project ID',
-          placeholder: 'Visit https://cloud.walletconnect.com',
-          validate: (value) => {
-            if (value.length === 0) return;
-            if (value.length < 32) return 'Key must be 32 characters';
-          },
-        });
-      },
       rpcUrl: () => {
         return prompts.text({
           message: 'Base RPC URL',

src/create/setupEnvFiles.ts

@@ -7,7 +7,6 @@ export function setupEnvFiles(projectDir: string, envVar: EnvVar) {
 
   const envLocalPath = path.join(projectDir, './web/.env.local');
   const content = `NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=${envVar.walletConnectProjectID ?? '"GET_ID_FROM_WALLET_CONNET" # See https://cloud.walletconnect.com'}
 NEXT_PRIVATE_RPC_URL=${envVar.rpcUrl ?? '"GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat'}
 NEXT_PRIVATE_PAYMASTER_URL=${envVar.rpcUrl ?? '"GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat'}
 NEXT_PUBLIC_PRIVY_ID="GET_FROM_PRIVY"

src/create/setupProject.ts

@@ -154,28 +154,6 @@ export async function setupProject(projectDir: string, project) {
       generateNavbarExperiencesList(projectDir, selectedExperiences);
     }
 
-    if (project.pickSmartWallet) {
-      removeDownloadedApps(
-        projectDir + '/web/src/store/createWagmiConfigWithRK.ts'
-      );
-      removeDownloadedApps(projectDir + '/web/src/OnchainProvidersWithRK.tsx');
-    } else {
-      // Replace createWagmiConfig.ts with createWagmiConfigWithRK.ts content
-      removeDownloadedApps(projectDir + '/web/src/store/createWagmiConfig.ts');
-      const newFilename = projectDir + '/web/src/store/createWagmiConfig.ts';
-      renameDownloadedFile(
-        projectDir + '/web/src/store/createWagmiConfigWithRK.ts',
-        newFilename
-      );
-      // Replace OnchainProviders.ts with OnchainProvidersWithRK.ts content
-      removeDownloadedApps(projectDir + '/web/src/OnchainProviders.tsx');
-      const newProviderFilename = projectDir + '/web/src/OnchainProviders.tsx';
-      renameDownloadedFile(
-        projectDir + '/web/src/OnchainProvidersWithRK.tsx',
-        newProviderFilename
-      );
-    }
-
     await execAsync('git add .', { cwd: projectDir, stdio: 'ignore' });
     await execAsync('git commit -m "initalized with build-onchain-apps"', {
       cwd: projectDir,

template/web/.env.local.example

@@ -1,5 +1,4 @@
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="GET_ID_FROM_WALLET_CONNET" # See https://cloud.walletconnect.com
 NEXT_PRIVATE_RPC_URL="GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat
 NEXT_PRIVATE_PAYMASTER_URL="GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat
 NEXT_PUBLIC_PRIVY_ID="GET_FROM_PRIVY"

template/web/README.md

@@ -4,7 +4,6 @@
 
 #### Step 1: Setup Environment Variables
 
-- Obtain the Wallet Connect Project ID from [walletconnect.com](https://cloud.walletconnect.com/sign-in) and assign to the `.env.local` file
 - Obtain a Base RPC URL from [Coinbase Developer Platform](https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat) and assign to the `.env.local` file
 
 ```bash

template/web/package.json

@@ -18,14 +18,13 @@
     "test:coverage:open": "yarn test:coverage && open coverage/lcov-report/index.html"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.14.2",
-    "@coinbase/wallet-sdk": "4.0.0-beta.12",
+    "@coinbase/onchainkit": "0.16.10",
+    "@coinbase/wallet-sdk": "4.0.0",
     "@farcaster/hub-nodejs": "^0.11.9",
     "@privy-io/react-auth": "^1.56.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@rainbow-me/rainbowkit": "2",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.20.1",
     "abitype": "^0.10.3",
@@ -110,6 +109,6 @@
   },
   "packageManager": "[email protected]",
   "resolutions": {
-    "@coinbase/wallet-sdk": "npm:@coinbase/[email protected]-beta.12"
+    "@coinbase/wallet-sdk": "npm:@coinbase/[email protected]"
   }
 }

template/web/src/OnchainProviders.tsx

@@ -15,9 +15,6 @@ const rpcUrl = '/api/rpc';
 
 const wagmiConfig = createWagmiConfig(rpcUrl);
 
-/**
- * TODO Docs ~~~
- */
 function OnchainProviders({ children }: Props) {
   return (
     <WagmiProvider config={wagmiConfig}>

template/web/src/OnchainProvidersWithRK.tsx

@@ -1,3 +1,4 @@
+import { ConnectAccount } from '@coinbase/onchainkit/wallet';
 import { baseSepolia } from 'viem/chains';
 import { useAccount, useChainId, useConnect, useDisconnect } from 'wagmi';
 import { AccountDropdown } from './AccountDropdown';
@@ -11,13 +12,10 @@ import { AccountInfoPanel } from './AccountInfoPanel';
  */
 function AccountConnect() {
   const account = useAccount();
-  const { connectors, connect, status } = useConnect();
+  const { status } = useConnect();
   const { disconnect } = useDisconnect();
-  const connector = connectors[0];
   const chainId = useChainId();
 
-  console.log('Account Status:', account.status);
-
   return (
     <div
       className="flex flex-grow"
@@ -32,15 +30,7 @@ function AccountConnect() {
     >
       {(() => {
         if (account.status === 'disconnected') {
-          return (
-            <button
-              onClick={() => connect({ connector })}
-              type="button"
-              className="inline-flex h-10 flex-grow items-center justify-center gap-2 rounded-3xl bg-white px-4 py-2"
-            >
-              <div className="text-sm font-medium leading-normal text-black">Connect wallet</div>
-            </button>
-          );
+          return <ConnectAccount />;
         }
 
         if (account.status === 'connected' && chainId !== baseSepolia.id) {