feat: finish up ConnectKit integration

Still needs Multicall optimization to be viable. Currently, the frontend uses so many calls that it often hits rate limits, and can burn through Infura credits alarmingly fast.
liquity · Jun 12, 2023 · ddadfc0 · ddadfc0
1 parent 966f86c
commit ddadfc0
Show file tree

Hide file tree

Showing 16 changed files with 525 additions and 237 deletions.
diff --git a/packages/dev-frontend/.eslintrc.cjs b/packages/dev-frontend/.eslintrc.cjs
@@ -1,14 +1,20 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
   ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
-  },
-}
+    // "react-refresh/only-export-components": "warn",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        additionalHooks: "useTransaction"
+      }
+    ]
+  }
+};
diff --git a/packages/dev-frontend/package.json b/packages/dev-frontend/package.json
@@ -6,14 +6,15 @@
   "type": "module",
   "dependencies": {
     "@ethersproject/abi": "5.7.0",
+    "@ethersproject/experimental": "5.7.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-regular-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "@liquity/chicken-bonds": "file:.yalc/@liquity/chicken-bonds",
     "@metamask/eth-sig-util": "5.0.1",
     "@tippyjs/react": "4.2.5",
-    "connectkit": "1.2.4",
+    "connectkit": "^1.3.0",
     "ethers": "5.7.2",
     "lambert-w-function": "3.0.0",
     "react": "17.0.1",
@@ -24,7 +25,7 @@
     "react-router-dom": "5.2.0",
     "recharts": "2.1.10",
     "theme-ui": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
-    "wagmi": "0.12.13"
+    "wagmi": "^0.12.0"
   },
   "devDependencies": {
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",

diff --git a/packages/dev-frontend/src/App.tsx b/packages/dev-frontend/src/App.tsx
@@ -15,11 +15,7 @@ import theme from "./theme";
 import { DisposableWalletProvider } from "./testUtils/DisposableWalletProvider";
 import { LiquityFrontend } from "./LiquityFrontend";
 import { AppLoader } from "./components/AppLoader";
-
-if (window.ethereum) {
-  // Silence MetaMask warning in console
-  Object.assign(window.ethereum, { autoRefreshOnNetworkChange: false });
-}
+import { useAsyncValue } from "./hooks/AsyncValue";
 
 if (import.meta.env.REACT_APP_DEMO_MODE === "true") {
   const ethereum = new DisposableWalletProvider(
@@ -37,21 +33,6 @@ getConfig().then(config => {
   Object.assign(window, { config });
 });
 
-const wagmiClient = createClient(
-  getDefaultClient({
-    appName: "Liquity",
-    chains: [mainnet, goerli]
-  })
-);
-
-// const EthersWeb3ReactProvider: React.FC = ({ children }) => {
-//   return (
-//     <Web3ReactProvider getLibrary={provider => new BatchedWebSocketAugmentedWeb3Provider(provider)}>
-//       {children}
-//     </Web3ReactProvider>
-//   );
-// };
-
 const UnsupportedMainnetFallback: React.FC = () => (
   <Flex
     sx={{
@@ -66,9 +47,7 @@ const UnsupportedMainnetFallback: React.FC = () => (
       <Icon name="exclamation-triangle" /> This app is for testing purposes only.
     </Heading>
 
-    <Paragraph sx={{ mb: 3 }}>
-      Please change your network to Ropsten, Rinkeby, Kovan, Görli or Kiln.
-    </Paragraph>
+    <Paragraph sx={{ mb: 3 }}>Please change your network to Görli.</Paragraph>
 
     <Paragraph>
       If you'd like to use the Liquity Protocol on mainnet, please pick a frontend{" "}
@@ -80,43 +59,57 @@ const UnsupportedMainnetFallback: React.FC = () => (
   </Flex>
 );
 
+const UnsupportedNetworkFallback: React.FC = () => (
+  <Flex
+    sx={{
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100vh",
+      textAlign: "center"
+    }}
+  >
+    <Heading sx={{ mb: 3 }}>
+      <Icon name="exclamation-triangle" /> Liquity is not deployed to this network.
+    </Heading>
+    Please switch to Ropsten, Rinkeby, Kovan, Görli or Kiln.
+  </Flex>
+);
+
 const App = () => {
-  const unsupportedNetworkFallback = (chainId: number) => (
-    <Flex
-      sx={{
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "100vh",
-        textAlign: "center"
-      }}
-    >
-      <Heading sx={{ mb: 3 }}>
-        <Icon name="exclamation-triangle" /> Liquity is not yet deployed to{" "}
-        {chainId === 1 ? "mainnet" : "this network"}.
-      </Heading>
-      Please switch to Ropsten, Rinkeby, Kovan, Görli or Kiln.
-    </Flex>
-  );
+  const config = useAsyncValue(getConfig);
+  const loader = <AppLoader />;
 
   return (
-    <WagmiConfig client={wagmiClient}>
-      <ConnectKitProvider>
-        <ThemeProvider theme={theme}>
-          <WalletConnector loader={<AppLoader />}>
-            <LiquityProvider
-              loader={<AppLoader />}
-              unsupportedNetworkFallback={unsupportedNetworkFallback}
-              unsupportedMainnetFallback={<UnsupportedMainnetFallback />}
-            >
-              <TransactionProvider>
-                <LiquityFrontend loader={<AppLoader />} />
-              </TransactionProvider>
-            </LiquityProvider>
-          </WalletConnector>
-        </ThemeProvider>
-      </ConnectKitProvider>
-    </WagmiConfig>
+    <ThemeProvider theme={theme}>
+      {config.loaded && (
+        <WagmiConfig
+          client={createClient(
+            getDefaultClient({
+              appName: "Liquity",
+              chains: config.value.testnetOnly ? [goerli] : [mainnet, goerli],
+              walletConnectProjectId: config.value.walletConnectProjectId,
+              infuraId: config.value.infuraApiKey,
+              alchemyId: config.value.alchemyApiKey
+            })
+          )}
+        >
+          <ConnectKitProvider options={{ hideBalance: true }}>
+            <WalletConnector loader={loader}>
+              <LiquityProvider
+                loader={loader}
+                unsupportedNetworkFallback={<UnsupportedNetworkFallback />}
+                unsupportedMainnetFallback={<UnsupportedMainnetFallback />}
+              >
+                <TransactionProvider>
+                  <LiquityFrontend loader={loader} />
+                </TransactionProvider>
+              </LiquityProvider>
+            </WalletConnector>
+          </ConnectKitProvider>
+        </WagmiConfig>
+      )}
+    </ThemeProvider>
   );
 };
 

diff --git a/packages/dev-frontend/src/components/Bonds/context/BondViewContext.tsx b/packages/dev-frontend/src/components/Bonds/context/BondViewContext.tsx
@@ -32,6 +32,7 @@ export type BondViewContextType = {
   bLusdAmmBLusdBalance?: Decimal;
   bLusdAmmLusdBalance?: Decimal;
   statuses: BondTransactionStatuses;
+  isInfiniteBondApproved: boolean;
   isSynchronizing: boolean;
   getLusdFromFaucet: () => Promise<void>;
   simulatedProtocolInfo?: ProtocolInfo;