upd: wagmi and rainbowkit #190

chainhackers · Sep 2, 2023 · 24d385e · 24d385e
1 parent 8e1c2ff
commit 24d385e
Show file tree

Hide file tree

Showing 5 changed files with 1,699 additions and 2,131 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -26,7 +26,7 @@ jobs:
       - run: npm install
       - run: npm run generate
       - run: npm run test
-      - run: echo ${{ secrets.env_local }} > ./.env.local
+      - run: echo ${{ secrets.env_local }} > ./..env.local
       - run: npm run build
       - run: npm run export
       - name: Gamejutsu Frontend Build

diff --git a/package.json b/package.json
@@ -17,9 +17,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@rainbow-me/rainbowkit": "^0.8.1",
+    "@rainbow-me/rainbowkit": "^0.12.17",
     "@swc/helpers": "^0.5.1",
-    "@walletconnect/web3-provider": "^1.8.0",
     "@xmtp/xmtp-js": "^7.7.2",
     "autoprefixer": "^10.4.12",
     "classnames": "^2.3.2",
@@ -36,7 +35,7 @@
     "sass": "^1.54.9",
     "tailwindcss": "^3.1.8",
     "tictactoe-ai": "^1.0.4",
-    "wagmi": "^0.9.6"
+    "wagmi": "^0.12.13"
   },
   "devDependencies": {
     "@dethcrypto/eth-sdk": "^0.3.3",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,58 +1,53 @@
-import type {AppProps} from 'next/app';
-import Head from 'next/head';
-import {RainbowKitProvider, getDefaultWallets} from '@rainbow-me/rainbowkit';
-import {configureChains, createClient, WagmiConfig} from 'wagmi';
-import {polygon} from 'wagmi/chains';
-import {ApolloProvider, ApolloClient, InMemoryCache} from '@apollo/client';
-import {Layout} from 'components';
-import {WalletContextProvider} from 'contexts/WalltetContext';
-import {XmtpContextProvider} from 'contexts/XmtpContext';
-import 'i18n/index';
-import '@rainbow-me/rainbowkit/styles.css';
-import 'styles/globals.css';
-import XmtpProvider from '../contexts/XmtpProvider';
+import type { AppProps } from 'next/app'
+import Head from 'next/head'
+import { RainbowKitProvider, getDefaultWallets } from '@rainbow-me/rainbowkit'
+import { configureChains, createClient, WagmiConfig } from 'wagmi'
+import { polygon } from 'wagmi/chains'
+import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'
+import { Layout } from 'components'
+import { WalletContextProvider } from 'contexts/WalltetContext'
+import { XmtpContextProvider } from 'contexts/XmtpContext'
+import 'i18n/index'
+import '@rainbow-me/rainbowkit/styles.css'
+import 'styles/globals.css'
+import XmtpProvider from '../contexts/XmtpProvider'
 // TODO: don't forget to bring back alchemy instead of publicProvider. @habdevs #190
 // import {alchemyProvider} from 'wagmi/providers/alchemy';
-import {GameStateContextProvider} from 'contexts/GameStateContext';
-import {publicProvider} from 'wagmi/providers/public';
+import { GameStateContextProvider } from 'contexts/GameStateContext'
+import { publicProvider } from 'wagmi/providers/public'
 
-const {chains, provider, webSocketProvider} = configureChains(
-  [polygon],
-  [publicProvider()]
+const { chains, provider, webSocketProvider } = configureChains([polygon],
+  [publicProvider()],
   // [alchemyProvider({apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY!})]
-);
+)
 
-const {connectors} = getDefaultWallets({
+const { connectors } = getDefaultWallets({
   appName: 'GameJutsu App',
   chains,
-});
+  projectId: 'efa8ae30b8b72991a9630a636d6d0411',
+})
 
 const wagmiClient = createClient({
-  autoConnect: true,
-  connectors,
-  provider,
-  webSocketProvider,
-});
+  autoConnect: true, connectors, provider, webSocketProvider,
+})
 
-const cache = new InMemoryCache();
+const cache = new InMemoryCache()
 const client = new ApolloClient({
   uri: 'https://api.thegraph.com/subgraphs/name/chainhackers/gamejutsu-subgraph',
   cache,
-});
+})
 
-const version = 'v1.2.38';
+const version = 'v1.2.38'
 
-function MyApp({Component, pageProps}: AppProps) {
-  const props = {...pageProps, version};
-  return (
-    <WagmiConfig client={wagmiClient}>
+function MyApp ({ Component, pageProps }: AppProps) {
+  const props = { ...pageProps, version }
+  return (<WagmiConfig client={wagmiClient}>
       <GameStateContextProvider>
         <ApolloProvider client={client}>
           <WalletContextProvider>
             <XmtpContextProvider>
               <RainbowKitProvider chains={chains}>
                 <XmtpProvider>
-
                   <Layout version={version}>
                     <Head>
                       <meta
@@ -62,15 +57,13 @@ function MyApp({Component, pageProps}: AppProps) {
                     </Head>
                     <Component {...props} />
                   </Layout>
-
                 </XmtpProvider>
               </RainbowKitProvider>
             </XmtpContextProvider>
           </WalletContextProvider>
         </ApolloProvider>
       </GameStateContextProvider>
-    </WagmiConfig>
-  );
+    </WagmiConfig>)
 }
 
-export default MyApp;
+export default MyApp