add: react 18

GoodDollar · Nov 5, 2024 · 846f257 · 846f257
1 parent eff0020
commit 846f257
Show file tree

Hide file tree

Showing 7 changed files with 1,255 additions and 125 deletions.
diff --git a/packages/good-design/package.json b/packages/good-design/package.json
@@ -43,7 +43,7 @@
     "@storybook/react": "^6.5.12",
     "@storybook/theming": "^6.5.12",
     "@types/lodash": "^4.14.186",
-    "@types/react": "^18.2.28",
+    "@types/react": "^18.3.12",
     "@types/react-helmet": "^6.1.6",
     "@types/react-native": "0.70.4",
     "@usedapp/core": "^1.2.16",
@@ -87,9 +87,10 @@
     "moment": "^2.29.4",
     "moment-duration-format": "^2.3.2",
     "native-base": "^3.4.28",
+    "normalize-css-color": "^1.0.2",
     "prop-types": "^15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-inlinesvg": "2.3.0",
     "react-native": "0.70.4",
@@ -98,7 +99,7 @@
     "react-native-svg": "^12.1.1",
     "react-native-svg-uri": "^1.2.3",
     "react-native-svg-web": "^1.0.9",
-    "react-native-web": "0.17.7",
+    "react-native-web": "^0.19.13",
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "^13.2.2",
     "react-number-format": "^5.1.1",

diff --git a/packages/good-design/src/core/buttons/BaseButton.tsx b/packages/good-design/src/core/buttons/BaseButton.tsx
@@ -42,7 +42,8 @@ export const theme = {
       },
       innerText: {
         fontWeight: "hairline",
-        color: "white"
+        color: "white",
+        textAlign: "center"
       }
     };
   })

diff --git a/packages/login-sdk/package.json b/packages/login-sdk/package.json
@@ -32,7 +32,7 @@
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": ">=17"
   },
   "dependencies": {
     "@gooddollar/goodprotocol": "^2.*",

diff --git a/packages/sdk-v2/package.json b/packages/sdk-v2/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "yarn dev:clean && ctix c && tsc && yarn copy:assets && yalc publish --push",
     "build:release": "yarn dev:clean && ctix c && tsc -p tsconfig.release.esm.json && tsc -p tsconfig.release.cjs.json && yarn copy:assets",
-    "copy:assets": "cpx 'src/assets/**' 'dist/assets'",
+    "copy:assets": "cpx 'src/assets/**' 'dist/cjs/assets' && cpx 'src/assets/**' 'dist/esm/assets'",
     "dev:clean": "rm -fr dist types tsconfig.tsbuildinfo tsconfig.release.tsbuildinfo",
     "test": "jest",
     "storybook": "start-storybook -p 6006",
@@ -29,6 +29,8 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@react-native-async-storage/async-storage": "1.17.10",
+    "@reown/appkit": "^1.2.1",
+    "@reown/appkit-adapter-wagmi": "^1.2.1",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
@@ -38,6 +40,7 @@
     "@storybook/manager-webpack5": "^6.5.12",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.*",
+    "@tanstack/react-query": "^5.59.19",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^28.1.3",
     "@types/node": "18.0.0",
@@ -55,18 +58,20 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.3.1",
     "promisify-file-reader": "^4.1.0",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-docgen-typescript-plugin": "^1.0.5",
-    "react-dom": "17.0.2",
+    "react-dom": "18.3.1",
     "react-native": "0.70.4",
     "react-native-svg-uri": "^1.2.3",
-    "react-native-web": "0.17.7",
+    "react-native-web": "^0.19.13",
     "sass": "^1.43.5",
     "sass-loader": "^12.3.0",
     "style-loader": "^3.3.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "viem": "^2.21.40",
+    "wagmi": "^2.12.25"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.6.4",
@@ -94,8 +99,6 @@
     "@web3auth/core": "^4.0.0",
     "@web3auth/openlogin-adapter": "^4.1.0",
     "@web3auth/torus-wallet-connector-plugin": "^4.0.0",
-    "@web3modal/ethereum": "^2.6.2",
-    "@web3modal/react": "^2.6.2",
     "base-64": "^1.0.0",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
@@ -106,14 +109,18 @@
     "posthog-react-native": "2.8.1",
     "react-native-indicative": "^0.2.1",
     "react-native-restart": "^0.0.24",
-    "react-use-promise": "^0.5.0",
-    "viem": "^1.2.13",
-    "wagmi": "^1.3.8"
+    "react-use-promise": "^0.5.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": "1.17.10",
+    "@reown/appkit": "1.*",
+    "@reown/appkit-adapter-wagmi": "1.*",
+    "@tanstack/react-query": "5.*",
     "@usedapp/core": "*",
+    "react": ">=17",
     "react-native": "*",
-    "react-native-web": "*"
+    "react-native-web": "*",
+    "viem": "2.*",
+    "wagmi": "2.*"
   }
 }
diff --git a/packages/sdk-v2/src/contexts/web3modal/Web3modalProvider.tsx b/packages/sdk-v2/src/contexts/web3modal/Web3modalProvider.tsx
@@ -1,41 +1,19 @@
 import * as React from "react";
-import { EthereumClient, w3mConnectors, w3mProvider } from "@web3modal/ethereum";
-import { Web3Modal } from "@web3modal/react";
-import { configureChains, createConfig, WagmiConfig, WalletClient, useWalletClient } from "wagmi";
-import { mainnet, celo, celoAlfajores } from "wagmi/chains";
+import { createAppKit } from "@reown/appkit/react";
+import { mainnet, celo, fuse, AppKitNetwork } from "@reown/appkit/networks";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { useWalletClient, WagmiProvider } from "wagmi";
+export { useAppKit as useWeb3Modal, useDisconnect } from "@reown/appkit/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { providers } from "ethers";
 import { Web3Provider, Props } from "../Web3Context";
-export { useWeb3Modal } from "@web3modal/react";
-export { useDisconnect } from "wagmi";
+import { WalletClient } from "viem";
 
-import { Chain } from "@wagmi/core";
-
-export const fuse: Chain = {
-  id: 122,
-  name: "Fuse",
-  network: "fuse",
-  nativeCurrency: {
-    decimals: 18,
-    name: "Fuse",
-    symbol: "FUSE"
-  },
-  rpcUrls: {
-    public: { http: ["https://rpc.fuse.io"] },
-    default: { http: ["https://rpc.fuse.io"] }
-  },
-  blockExplorers: {
-    default: { name: "Fuse Explore", url: "https://explorer.fuse.io" }
-  },
-  contracts: {
-    multicall3: {
-      address: "0xcA11bde05977b3631167028862bE2a173976CA11",
-      blockCreated: 16146628
-    }
-  }
-};
+const queryClient = new QueryClient();
 
 const walletClientToWeb3Provider = (walletClient: WalletClient) => {
   const { chain, transport } = walletClient;
+  if (!chain) return;
   const network = {
     chainId: chain.id,
     name: chain.name,
@@ -59,34 +37,41 @@ const Web3ProviderWrapper = ({ children, config, env = "production" }: Props) =>
     </Web3Provider>
   );
 };
+
 export const Web3ModalProvider = ({
   projectId,
-  wagmiChains,
+  reownMetadata,
+  appkitChains,
   children,
   config,
   env = "production"
-}: Props & { wagmiChains?: Array<Chain>; projectId?: string }) => {
-  const chains = wagmiChains || [mainnet, celo, fuse, celoAlfajores];
+}: Props & { appkitChains?: [AppKitNetwork, ...AppKitNetwork[]]; projectId?: string; reownMetadata?: any }) => {
+  const chains: [AppKitNetwork, ...AppKitNetwork[]] = appkitChains || [mainnet, celo, fuse];
   projectId = projectId || process.env.REACT_APP_WC_PROJECTID || "62745569abcb6c8962cadf4d8568aad9";
 
-  const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
-  const wagmiConfig = createConfig({
-    autoConnect: true,
-    connectors: w3mConnectors({ projectId, chains }),
-    publicClient
+  const wagmiAdapter = new WagmiAdapter({
+    networks: chains,
+    projectId
+  });
+  createAppKit({
+    adapters: [wagmiAdapter],
+    networks: chains,
+    metadata: reownMetadata,
+    projectId,
+    features: {
+      analytics: true
+    }
   });
-
-  const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
   return (
     <>
-      <WagmiConfig config={wagmiConfig}>
-        <Web3ProviderWrapper config={config} env={env}>
-          {children}
-        </Web3ProviderWrapper>
-      </WagmiConfig>
-
-      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
+      <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+          <Web3ProviderWrapper config={config} env={env}>
+            {children}
+          </Web3ProviderWrapper>
+        </QueryClientProvider>
+      </WagmiProvider>
     </>
   );
 };
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -41,7 +41,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
     "graphql": "^15.5.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
     "typescript": "^4.6.3",
     "vite": "^5.3.4",
     "vite-tsconfig-paths": "^4.3.2"
@@ -66,5 +66,8 @@
     "web3-eth": "1.8.2",
     "web3-eth-contract": "1.8.2",
     "web3-utils": "1.8.2"
+  },
+  "peerDependencies": {
+    "react": ">=17"
   }
 }