add reown and connect button

blockscout · Nov 7, 2024 · 22e39cc · 22e39cc
1 parent a9c3184
commit 22e39cc
Show file tree

Hide file tree

Showing 10 changed files with 1,703 additions and 340 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,9 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import Script from 'next/script';
+import { headers } from 'next/headers';
+
+import WagmiContextProvider from '@/contexts/WagmiContextProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -44,14 +47,20 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const cookies = headers().get('cookie');
+
   return (
     <html lang="en">
       <head>
         <GoogleAnalytics />
         <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
         <link rel="apple-touch-icon" href="/favicon-256x256.png" />
       </head>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <WagmiContextProvider cookies={cookies}>
+          {children}
+        </WagmiContextProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,29 +1,23 @@
 'use client';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Link from 'next/link';
 import Image from 'next/image';
 
 import { Widget } from '@/components/Widget';
-import { WalletProvider } from '@/components/WalletProvider';
 import { Banner } from '@/components/Banner';
-
-const queryClient = new QueryClient();
+import { ConnectButton } from '@/components/ConnectButton';
 
 export default function Page() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+    <main className="flex min-h-screen flex-col items-center justify-center p-10">
       <div className="flex flex-col z-10 items-center justify-between font-mono text-sm">
-        <div className="mb-8 flex justify-center">
+        <div className="w-full mb-8 flex justify-between sm:w-[416px]">
           <Image src="/logo.svg" alt="Swapscout Logo" width={172} height={30} />
+          <ConnectButton />
         </div>
         <Banner text={process.env.NEXT_PUBLIC_BANNER_TEXT} />
-        <div className="shadow-custom rounded-[16px] overflow-hidden sm:w-[420px]">
-          <QueryClientProvider client={queryClient}>
-            <WalletProvider>
-              <Widget/>
-            </WalletProvider>
-          </QueryClientProvider>
+        <div className="shadow-custom rounded-[16px] overflow-hidden sm:w-[416px]">
+          <Widget/>
         </div>
         <div className="mt-8 flex justify-center space-x-8">
           <Link

diff --git a/components/ConnectButton.tsx b/components/ConnectButton.tsx
@@ -0,0 +1,29 @@
+import { useAppKit, useAppKitAccount } from '@reown/appkit/react';
+import { useCallback } from 'react';
+import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
+
+import { Button } from './common/Button';
+
+export function ConnectButton() {
+  const { open } = useAppKit();
+  const { address } = useAppKitAccount();
+
+  const handleClick = useCallback(() => {
+    open();
+  }, [open]);
+
+  return (
+    <Button dataExist={ Boolean(address) } onClick={ handleClick }>
+      { address ? (
+        <div className="flex items-center gap-2">
+          <Jazzicon diameter={ 20 } seed={ jsNumberForAddress(address) } />
+          <span>
+            { address.slice(0, 4) }...{ address.slice(-4) }
+          </span>
+        </div>
+      ) : (
+        'Connect'
+      ) }
+    </Button>
+  );
+}
diff --git a/components/WalletProvider.tsx b/components/WalletProvider.tsx
diff --git a/components/Widget.tsx b/components/Widget.tsx
@@ -2,8 +2,8 @@
 
 import type { WidgetConfig } from '@lifi/widget';
 import { LiFiWidget, WidgetSkeleton } from '@lifi/widget';
+import { useAppKit, useAppKitNetwork } from '@reown/appkit/react';
 
-import { useWalletContext } from '@/components/WalletProvider';
 import { ClientOnly } from './ClientOnly';
 
 const explorerUrls = {
@@ -27,7 +27,10 @@ const explorerUrls = {
 };
 
 export function Widget() {
-  const { chainId } = useWalletContext();
+  const { open } = useAppKit();
+  const { chainId } = useAppKitNetwork();
+
+  console.log('chainId', chainId);
 
   const config = {
     fee: 0.00075, // 0.075%
@@ -54,7 +57,10 @@ export function Widget() {
     explorerUrls,
     chains: {
       allow: Object.keys(explorerUrls).map(Number),
-    }
+    },
+    walletConfig: {
+      onConnect: open,
+    },
   } as Partial<WidgetConfig>;
 
   return (

diff --git a/components/common/Button.tsx b/components/common/Button.tsx
@@ -0,0 +1,23 @@
+type Props = {
+  dataExist: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+export function Button({ dataExist, onClick, children }: Props) {
+  return (
+    <button
+      className={`
+        h-[40px] px-4 rounded-md transition-colors
+        bg-[#2B6CB0] hover:bg-[#22568c] text-white
+        data-[selected=true]:bg-[#1011120A]
+        data-[selected=true]:hover:bg-[#1011120A]
+        data-[selected=true]:text-[#101112CC]
+      `}
+      data-selected={ dataExist }
+      onClick={ onClick }
+    >
+      { children }
+    </button>
+  );
+}
diff --git a/config/wagmi.tsx b/config/wagmi.tsx
@@ -0,0 +1,23 @@
+import { cookieStorage, createStorage } from '@wagmi/core';
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import { mainnet, arbitrum } from '@reown/appkit/networks';
+
+export const projectId = process.env.NEXT_PUBLIC_REOWN_PROJECT_ID;
+
+if (!projectId) {
+  throw new Error('Project ID is not defined');
+}
+
+export const networks = [mainnet, arbitrum];
+
+//Set up the Wagmi Adapter (Config)
+export const wagmiAdapter = new WagmiAdapter({
+  storage: createStorage({
+    storage: cookieStorage
+  }),
+  ssr: true,
+  projectId,
+  networks,
+});
+
+export const config = wagmiAdapter.wagmiConfig;
diff --git a/contexts/WagmiContextProvider.tsx b/contexts/WagmiContextProvider.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createAppKit } from '@reown/appkit/react';
+import { mainnet, arbitrum } from '@reown/appkit/networks';
+import React, { type ReactNode } from 'react';
+import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi';
+
+import { wagmiAdapter, projectId } from '@/config/wagmi';
+
+// Set up queryClient
+const queryClient = new QueryClient();
+
+if (!projectId) {
+  throw new Error('Project ID is not defined');
+}
+
+// Set up metadata
+const metadata = {
+  name: 'Swapscout',
+  description: 'Swap between chains fast and easy. Powered by Blockscout',
+  url: 'https://swap.blockscout.com/',
+  icons: ['https://swap.blockscout.com/favicon-256x256.png'],
+}
+
+// Create the modal
+createAppKit({
+  adapters: [wagmiAdapter],
+  projectId,
+  networks: [mainnet, arbitrum],
+  defaultNetwork: mainnet,
+  metadata: metadata,
+  features: {
+    analytics: true, // Optional - defaults to your Cloud configuration
+  },
+});
+
+function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
+  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies);
+
+  return (
+    <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export default ContextProvider;