Bugfixing walletconnect

Adding wallet connect projectId in env.example
openfort-xyz · Nov 7, 2024 · 3472c79 · 3472c79
1 parent 4602d6c
commit 3472c79
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 11 deletions.
diff --git a/examples/apps/auth-sample/.env.local.example b/examples/apps/auth-sample/.env.local.example
@@ -11,4 +11,6 @@ NEXT_PUBLIC_CHAIN_ID=
 NEXT_PUBLIC_CONTRACT_ID=
 
 NEXT_PUBLIC_COINBASE_PROJECTID=
-NEXT_PUBLIC_MOONPAY_API_KEY=
+NEXT_PUBLIC_MOONPAY_API_KEY=
+
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
diff --git a/examples/apps/auth-sample/src/components/Funding/AddFunds.tsx b/examples/apps/auth-sample/src/components/Funding/AddFunds.tsx
@@ -50,6 +50,8 @@ const AddFunds: React.FC<{
         if (!response.ok) return 'pending';
 
         const json = await response.json();
+        if(!json.transactions) return 'pending';
+
         switch (json.transactions[0]?.status) {
           case 'ONRAMP_TRANSACTION_STATUS_SUCCESS':
             return 'completed';

diff --git a/examples/apps/auth-sample/src/components/Funding/AddFundsWithWagmi.tsx b/examples/apps/auth-sample/src/components/Funding/AddFundsWithWagmi.tsx
@@ -1,22 +1,46 @@
-import { mainnet, polygonAmoy } from 'viem/chains';
-import { Connector, useConnect, useSendTransaction, useSwitchChain, useWaitForTransactionReceipt, WagmiProvider } from "wagmi";
+import { polygonAmoy } from 'viem/chains';
+import { Connector, createConfig, useConnect, useSendTransaction, useSwitchChain, useWaitForTransactionReceipt, WagmiProvider } from "wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
-import { Address, parseEther } from 'viem';
+import { connectorsForWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { Address, http, parseEther } from 'viem';
 import { useEffect, useState } from 'react';
+import {
+  rainbowWallet,
+  walletConnectWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+} from '@rainbow-me/rainbowkit/wallets';
 
 export const AddFundsWithWagmi: React.FC<{
   callback: () => void;
   fundAddress: Address;
   fundAmount: string;
 }> = ({callback, fundAddress, fundAmount}) => {
-  const config = getDefaultConfig({
-    appName: 'My RainbowKit App',
-    projectId: 'YOUR_PROJECT_ID',
+  const connectors = connectorsForWallets(
+    [
+      {
+        groupName: 'Wallets',
+        wallets: [
+          metaMaskWallet,
+          walletConnectWallet,
+          rainbowWallet,
+          coinbaseWallet,
+        ],
+      },
+    ],
+    {
+      projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string,
+      appName: 'YOUR_APP_NAME',
+    }
+  );
+  const config = createConfig({
     chains: [polygonAmoy],
-    ssr: true, // If your dApp uses server side rendering (SSR),
+    transports: {
+      [polygonAmoy.id]: http(),
+    },
+    connectors,
+    ssr: true,
   });
-
   const queryClient = new QueryClient();
 
   return (

diff --git a/examples/apps/auth-sample/src/components/WalletConnect/SetPairingCode.tsx b/examples/apps/auth-sample/src/components/WalletConnect/SetPairingCode.tsx
@@ -29,7 +29,7 @@ const SetPairingCode: React.FC<{
         (async () => {
             const wKit = await WalletKit.init({
               core: new Core({
-                projectId: process.env.NEXT_PUBLIC_REOWN_PROJECT_ID,  
+                projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
               }),
               metadata: {
                 name: 'openfort',