Merge branch 'main' into use-wallet-service-getCallsStatus

reown-com · Nov 5, 2024 · e3aacf9 · e3aacf9
2 parents a7ecffa + 6d43004
commit e3aacf9
Show file tree

Hide file tree

Showing 20 changed files with 1,244 additions and 767 deletions.
diff --git a/advanced/dapps/chain-abstraction-demo/app/layout.tsx b/advanced/dapps/chain-abstraction-demo/app/layout.tsx
@@ -24,8 +24,7 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const initialState = cookieToInitialState(config, headers().get("cookie"));
-
+  const cookies = headers().get('cookie')
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
@@ -35,7 +34,7 @@ export default function RootLayout({
           fontSans.variable
         )}
       >
-        <AppKitProvider initialState={initialState}>
+        <AppKitProvider cookies={cookies}>
           <ThemeProvider
             attribute="class"
             defaultTheme="dark"

diff --git a/advanced/dapps/chain-abstraction-demo/app/page.tsx b/advanced/dapps/chain-abstraction-demo/app/page.tsx
@@ -1,16 +1,17 @@
+'use client'
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import Transfer from "./transfer";
 
 export default function Home() {
   return (
     <main>
       <div>
-        <Card>
+        <Card >
           <CardHeader>
             <w3m-button />
           </CardHeader>
           <CardContent>
-            <Transfer></Transfer>
+            <Transfer/>
           </CardContent>
         </Card>
       </div>

diff --git a/advanced/dapps/chain-abstraction-demo/app/transfer.tsx b/advanced/dapps/chain-abstraction-demo/app/transfer.tsx
@@ -1,24 +1,88 @@
 "use client";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import useSendUsdc from "./hooks/useSendUsdc";
-import { useAccount } from "wagmi";
+import { useAccount, useReadContract } from "wagmi";
 import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { Loader2 } from "lucide-react";
+import { isAddress } from "viem";
+import { tokenAddresses } from "@/consts/tokens";
 
-const sendToAddress = "0x81D8C68Be5EcDC5f927eF020Da834AA57cc3Bd24";
-const sendAmount = 6000000;
+interface BalanceDisplayProps {
+  address: `0x${string}`;
+  chainId: number;
+}
+
+const BalanceDisplay: React.FC<BalanceDisplayProps> = ({ address, chainId }) => {
+  const {
+    data: usdcBalance,
+    isLoading: usdcBalanceLoading,
+  } = useReadContract({
+    abi: [
+      {
+        inputs: [{ internalType: "address", name: "owner", type: "address" }],
+        name: "balanceOf",
+        outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
+        stateMutability: "view",
+        type: "function",
+      },
+    ],
+    address: tokenAddresses[chainId],
+    functionName: 'balanceOf',
+    args: [address],
+  });
+
+  // Convert the balance from the smallest unit to USDC
+  const formattedBalance = usdcBalanceLoading
+    ? 'Loading...'
+    : usdcBalance
+      ? (parseFloat(usdcBalance.toString()) / 1e6).toFixed(2) // Convert to USDC and format to 2 decimal places
+      : '0.00';
+
+  return (
+      <p className="text-gray-800 text-lg font-semibold">USDC Balance: {formattedBalance} USDC</p>
+  );
+};
 
 export default function Transfer() {
   const { sendUsdcAsync } = useSendUsdc();
-  const { isConnected, chain } = useAccount();
+  const { isConnected, chain, address } = useAccount();
   const [isLoading, setIsLoading] = useState(false);
   const { toast } = useToast();
+  const [sendToAddress, setSendToAddress] = useState<string>("");
+  const [sendAmount, setSendAmount] = useState<number | string>("");
+
+  if (!chain || !address) {
+    return null;
+  }
 
   const onButtonClick = async () => {
     try {
+      if (!isAddress(sendToAddress)) {
+        toast({
+          variant: "destructive",
+          title: "Invalid Address",
+          description: "Please enter a valid Ethereum address.",
+        });
+        return;
+      }
+
+      const amount = Number(sendAmount);
+      if (amount <= 0) {
+        toast({
+          variant: "destructive",
+          title: "Invalid Amount",
+          description: "Please enter an amount greater than zero.",
+        });
+        return;
+      }
+
+      // Convert the amount to smallest denomination (e.g., 1 USDC = 1,000,000 in smallest unit)
+      const amountInSmallestDenomination = amount * 1e6;
+
       setIsLoading(true);
-      const res = await sendUsdcAsync(sendToAddress, sendAmount);
+      const res = await sendUsdcAsync(sendToAddress, amountInSmallestDenomination);
       console.log("Transaction completed", res);
       toast({
         title: "Transaction completed",
@@ -39,16 +103,61 @@ export default function Transfer() {
   return (
     <>
       {isConnected ? (
-        <Button onClick={onButtonClick} disabled={isLoading}>
-          {isLoading ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Sending...
-            </>
-          ) : (
-            <>Perform action with USDC on {chain?.name}</>
-          )}
-        </Button>
-      ) : null}
+        <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
+          <BalanceDisplay address={address} chainId={chain.id} />
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onButtonClick();
+            }}
+            className="space-y-4"
+          >
+            <div>
+              <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+                Recipient Address
+              </label>
+              <Input
+                type="text"
+                id="address"
+                value={sendToAddress}
+                onChange={(e) => setSendToAddress(e.target.value)}
+                className="mt-1 w-[340px]  block rounded-md  text-black  border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+                required
+                placeholder="Enter recipient address"
+              />
+            </div>
+            <div>
+              <label htmlFor="amount" className="block text-sm font-medium text-gray-700">
+                Amount (in USDC)
+              </label>
+              <Input
+                type="number"
+                id="amount"
+                value={sendAmount}
+                onChange={(e) => setSendAmount(e.target.value)}
+                className="mt-1 block w-[340px] text-black rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+                required
+                placeholder="Enter amount in USDC (e.g., 2 for 2 USDC)"
+              />
+            </div>
+            <Button 
+              type="submit" 
+              disabled={isLoading || !sendToAddress || !sendAmount} 
+              className={`w-full ${isLoading ? 'bg-gray-400' : 'bg-blue-600 hover:bg-blue-700'} transition duration-200`}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Sending...
+                </>
+              ) : (
+                <>Send USDC on {chain?.name}</>
+              )}
+            </Button>
+          </form>
+        </div>
+      ) : (
+        <p className="text-center text-gray-500">Please connect your account to proceed.</p>
+      )}
     </>
   );
-}
+}
diff --git a/advanced/dapps/chain-abstraction-demo/components/ui/input.tsx b/advanced/dapps/chain-abstraction-demo/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/advanced/dapps/chain-abstraction-demo/config/index.tsx b/advanced/dapps/chain-abstraction-demo/config/index.tsx
@@ -1,28 +1,31 @@
-import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
+import { cookieStorage, createStorage, http } from '@wagmi/core'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { arbitrum, optimism, base } from '@reown/appkit/networks'
 
-import { cookieStorage, createStorage } from "wagmi";
-import { arbitrum, base, optimism } from "wagmi/chains";
+export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
 
-// Get projectId from https://cloud.walletconnect.com
-export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+if (!projectId) {
+  throw new Error('Project ID is not defined')
+}
+
+export const networks = [base, optimism, arbitrum]
+
+export const wagmiAdapter = new WagmiAdapter({
+  storage: createStorage({
+    storage: cookieStorage
+  }),
+  ssr: true,
+  projectId,
+  networks
+})
 
-if (!projectId) throw new Error("Project ID is not defined");
 
 export const metadata = {
-  name: "AppKit",
-  description: "AppKit Example",
+  name: "Chain Abstraction Demo",
+  description: "A demo of Chain Abstraction",
   url: "https://web3modal.com", // origin must match your domain & subdomain
   icons: ["https://avatars.githubusercontent.com/u/37784886"],
 };
 
-// Create wagmiConfig
-const chains = [base, optimism, arbitrum] as const;
-export const config = defaultWagmiConfig({
-  chains,
-  projectId,
-  metadata,
-  ssr: true,
-  storage: createStorage({
-    storage: cookieStorage,
-  }),
-});
+
+export const config = wagmiAdapter.wagmiConfig
diff --git a/advanced/dapps/chain-abstraction-demo/consts/tokens.ts b/advanced/dapps/chain-abstraction-demo/consts/tokens.ts
@@ -1,5 +1,7 @@
 import { Hex } from "viem";
 
 export const tokenAddresses: Record<number, Hex> = { 
-    42161: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831' // Arbitrum
+    42161: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831', // Arbitrum
+    10: '0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85', // Optimism
+    8453: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', // Base
 }
diff --git a/advanced/dapps/chain-abstraction-demo/context/index.tsx b/advanced/dapps/chain-abstraction-demo/context/index.tsx
@@ -1,37 +1,35 @@
-"use client";
+'use client'
 
-import React, { ReactNode } from "react";
-import { config, projectId, metadata } from "@/config";
+import { wagmiAdapter, projectId, metadata } from '@/config'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createAppKit } from '@reown/appkit/react'
+import { arbitrum, base, optimism } from '@reown/appkit/networks'
+import React, { type ReactNode } from 'react'
+import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'
 
-import { createWeb3Modal } from "@web3modal/wagmi/react";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-import { State, WagmiProvider } from "wagmi";
-
-// Setup queryClient
 const queryClient = new QueryClient();
 
 if (!projectId) throw new Error("Project ID is not defined");
 
-// Create modal
-createWeb3Modal({
-  metadata,
-  wagmiConfig: config,
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
   projectId,
-  enableAnalytics: true, // Optional - defaults to your Cloud configuration
-});
+  networks: [base, optimism, arbitrum],
+  defaultNetwork: base,
+  metadata: metadata,
+  features: {
+    analytics: true 
+  }
+})
+
+function AppKitProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
+  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)
 
-export default function AppKitProvider({
-  children,
-  initialState,
-}: {
-  children: ReactNode;
-  initialState?: State;
-}) {
   return (
-    <WagmiProvider config={config} initialState={initialState}>
+    <WagmiProvider config={wagmiAdapter.wagmiConfig } initialState={initialState}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
-  );
+  )
 }
+
+export default AppKitProvider