lp_ui: token account refreshes, snackbars, and button disables

Change-Id: I08c67f684ff7b3bcb9abd1453911c978ac0622a3

lp_ui/package-lock.json

@@ -26,6 +26,7 @@
         "@types/react": "^17.0.20",
         "@types/react-dom": "^17.0.9",
         "ethers": "^5.4.6",
+        "notistack": "^1.0.10",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
@@ -15413,6 +15414,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/notistack": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.10.tgz",
+      "integrity": "sha512-z0y4jJaVtOoH3kc3GtNUlhNTY+5LE04QDeLVujX3VPhhzg67zw055mZjrBF+nzpv3V9aiPNph1EgRU4+t8kQTQ==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/notistack"
+      },
+      "peerDependencies": {
+        "@material-ui/core": "^4.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/npm-run-all": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -35712,6 +35731,15 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "notistack": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.10.tgz",
+      "integrity": "sha512-z0y4jJaVtOoH3kc3GtNUlhNTY+5LE04QDeLVujX3VPhhzg67zw055mZjrBF+nzpv3V9aiPNph1EgRU4+t8kQTQ==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "npm-run-all": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",

lp_ui/package.json

@@ -20,6 +20,7 @@
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "ethers": "^5.4.6",
+    "notistack": "^1.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

lp_ui/src/contexts/Logger.tsx

@@ -5,15 +5,16 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { useSnackbar } from "notistack";
 
 interface LoggerContext {
-  log: (value: string) => void;
+  log: (value: string, type?: "error" | "info" | "success" | undefined) => void;
   clear: () => void;
   logs: string[];
 }
 
 const LoggerProviderContext = React.createContext<LoggerContext>({
-  log: (value: string) => {},
+  log: (value: string, type?: "error" | "info" | "success" | undefined) => {},
   clear: () => {},
   logs: [],
 });
@@ -21,11 +22,25 @@ const LoggerProviderContext = React.createContext<LoggerContext>({
 export const LoggerProvider = ({ children }: { children: ReactChildren }) => {
   const [logs, setLogs] = useState<string[]>([]);
   const clear = useCallback(() => setLogs([]), [setLogs]);
+  const { enqueueSnackbar } = useSnackbar();
+
   const log = useCallback(
-    (value: string) => {
+    (value: string, type?: "error" | "info" | "success" | undefined) => {
-      setLogs((logs) => [...logs, value]);
+      setLogs((logs: any) => [...logs, value]);
+      if (type === "error") {
+        console.error(value);
+        enqueueSnackbar(value, { variant: "error" });
+      } else if (type === "success") {
+        console.log(value);
+        enqueueSnackbar(value, { variant: "success" });
+      } else if (type === "info") {
+        console.log(value);
+        enqueueSnackbar(value, { variant: "info" });
+      } else {
+        console.log(value);
+      }
     },
-    [setLogs]
+    [setLogs, enqueueSnackbar]
   );
 
   const contextValue = useMemo(

lp_ui/src/index.js

@@ -6,14 +6,17 @@ import ErrorBoundary from "./components/ErrorBoundary";
 import { LoggerProvider } from "./contexts/Logger";
 import { SolanaWalletProvider } from "./contexts/SolanaWalletContext";
 import { theme } from "./muiTheme";
+import { SnackbarProvider } from "notistack";
 ReactDOM.render(
   <ErrorBoundary>
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <SolanaWalletProvider>
+        <SnackbarProvider maxSnack={3}>
           <LoggerProvider>
             <App />
           </LoggerProvider>
+        </SnackbarProvider>
       </SolanaWalletProvider>
     </ThemeProvider>
   </ErrorBoundary>,

lp_ui/src/views/Main.tsx

@@ -54,13 +54,36 @@ const useStyles = makeStyles(() => ({
   divider: {
     margin: "2rem",
   },
+  spacer: {
+    height: "1rem",
+  },
 }));
 
+const compareWithDecimalOffset = (
+  valueA: string,
+  decimalsA: number,
+  valueB: string,
+  decimalsB: number
+) => {
+  //find which is larger, and offset by that amount
+  const decimalsBasis = decimalsA > decimalsB ? decimalsA : decimalsB;
+  const normalizedA = parseUnits(valueA, decimalsBasis).toBigInt();
+  const normalizedB = parseUnits(valueB, decimalsBasis).toBigInt();
+
+  if (normalizedA < normalizedB) {
+    return -1;
+  } else if (normalizedA === normalizedB) {
+    return 0;
+  } else {
+    return 1;
+  }
+};
+
 const getDecimals = async (
   connection: Connection,
   mint: string,
   setter: (decimals: number | undefined) => void,
-  log: (value: string) => void
+  log: (value: string, type?: "error" | "info" | "success" | undefined) => void
 ) => {
   setter(undefined);
   if (mint) {
@@ -81,7 +104,7 @@ const getBalance = async (
   connection: Connection,
   address: string | undefined,
   setter: (balance: string | undefined) => void,
-  log: (value: string) => void
+  log: (value: string, type?: "error" | "info" | "success" | undefined) => void
 ) => {
   setter(undefined);
   if (address) {
@@ -93,7 +116,7 @@ const getBalance = async (
       log(`${address} has a balance of ${balance}`);
       setter(balance);
     } catch (e) {
-      log(`Unable to determine balance of ${address}`);
+      log(`Unable to determine balance of ${address}`, "error");
     }
   }
 };
@@ -109,7 +132,9 @@ function Main() {
     undefined
   );
   const [toMintHolder, setToMintHolder] = useState("");
-  const [toMintDecimals, setToMintDecimals] = useState<any>(undefined);
+  const [toMintDecimals, setToMintDecimals] = useState<number | undefined>(
+    undefined
+  );
   const [shareMintAddress, setShareMintAddress] = useState<string | undefined>(
     undefined
   );
@@ -131,12 +156,21 @@ function Main() {
   const [fromTokenAccount, setFromTokenAccount] = useState<string | undefined>(
     undefined
   );
+  const [fromTokenAccountBalance, setFromTokenAccountBalance] = useState<
+    string | undefined
+  >();
   const [toTokenAccount, setToTokenAccount] = useState<string | undefined>(
     undefined
   );
+  const [toTokenAccountBalance, setToTokenAccountBalance] = useState<
+    string | undefined
+  >();
   const [shareTokenAccount, setShareTokenAccount] = useState<
     string | undefined
   >(undefined);
+  const [shareTokenAccountBalance, setShareTokenAccountBalance] = useState<
+    string | undefined
+  >();
 
   //These hooks detect if the connected wallet has the requisite token accounts
   const {
@@ -229,6 +263,27 @@ function Main() {
     }
   }, [connection, toCustodyAddress, log]);
 
+  useEffect(() => {
+    if (fromTokenAccountExists) {
+      getBalance(connection, fromTokenAccount, setFromTokenAccountBalance, log);
+    }
+  }, [connection, fromTokenAccount, fromTokenAccountExists, log]);
+  useEffect(() => {
+    if (toTokenAccountExists) {
+      getBalance(connection, toTokenAccount, setToTokenAccountBalance, log);
+    }
+  }, [connection, toTokenAccount, toTokenAccountExists, log]);
+  useEffect(() => {
+    if (shareTokenAccountExists) {
+      getBalance(
+        connection,
+        shareTokenAccount,
+        setShareTokenAccountBalance,
+        log
+      );
+    }
+  }, [connection, shareTokenAccount, shareTokenAccountExists, log]);
+
   //Retrieve pool address on selectedTokens change
   useEffect(() => {
     if (toMint && fromMint) {
@@ -242,7 +297,7 @@ function Main() {
           log("Calculated the pool address at: " + key);
           setPoolAddress(key);
         },
-        (error) => log("ERROR, could not calculate pool address.")
+        (error) => log("Could not calculate pool address.", "error")
       );
     }
   }, [log, toMint, fromMint, setPoolAddress]);
@@ -267,7 +322,7 @@ function Main() {
             parsePool(result[0].data).then(
               (parsed) => setParsedPoolData(parsed),
               (error) => {
-                log("Failed to parse the pool data.");
+                log("Failed to parse the pool data.", "error");
                 console.error(error);
               }
             );
@@ -279,12 +334,13 @@ function Main() {
             setPoolAccountInfo(null);
           } else {
             log(
-              "unexpected error in fetching pool address. Please reload and try again"
+              "unexpected error in fetching pool address. Please reload and try again",
+              "error"
             );
           }
         });
       } catch (e) {
-        log("Could not fetch pool address");
+        log("Could not fetch pool address", "error");
       }
     }
   }, [connection, log, poolAddress, poolAccountInfo]);
@@ -365,6 +421,37 @@ function Main() {
   and then potentially update something on the state.
 
   */
+  const refreshPoolBalances = useCallback(() => {
+    getBalance(connection, fromCustodyAddress, setFromCustodyBalance, log);
+    getBalance(connection, toCustodyAddress, setToCustodyBalance, log);
+  }, [connection, fromCustodyAddress, toCustodyAddress, log]);
+
+  const refreshWalletBalances = useCallback(() => {
+    if (fromTokenAccountExists) {
+      getBalance(connection, fromTokenAccount, setFromTokenAccountBalance, log);
+    }
+    if (toTokenAccountExists) {
+      getBalance(connection, toTokenAccount, setToTokenAccountBalance, log);
+    }
+    if (shareTokenAccountExists) {
+      getBalance(
+        connection,
+        shareTokenAccount,
+        setShareTokenAccountBalance,
+        log
+      );
+    }
+  }, [
+    connection,
+    fromTokenAccount,
+    toTokenAccount,
+    shareTokenAccount,
+    fromTokenAccountExists,
+    toTokenAccountExists,
+    shareTokenAccountExists,
+    log,
+  ]);
+
   const createPool = useCallback(async () => {
     console.log(
       "createPool with these args",
@@ -388,17 +475,17 @@ function Main() {
         (transaction: any) => {
           setPoolExists(undefined); //Set these to null to force a fetch on them
           setPoolAccountInfo(undefined);
-          log("Successfully created the pool.");
+          log("Successfully created the pool.", "success");
           setCreatePoolIsProcessing(false);
         },
         (error) => {
-          log("Could not create the pool");
+          log("Could not create the pool", "error");
           console.error(error);
           setCreatePoolIsProcessing(false);
         }
       );
     } catch (e) {
-      log("Failed to create the pool.");
+      log("Failed to create the pool.", "error");
       console.error(e);
       setCreatePoolIsProcessing(false);
     }
@@ -419,7 +506,7 @@ function Main() {
       setLiquidityIsProcessing(true);
       signSendAndConfirm(wallet, connection, instruction).then(
         (transaction: any) => {
-          log("Successfully added liquidity to the pool.");
+          log("Successfully added liquidity to the pool.", "success");
           getBalance(
             connection,
             fromCustodyAddress,
@@ -427,16 +514,17 @@ function Main() {
             log
           );
           getBalance(connection, toCustodyAddress, setToCustodyBalance, log);
+          refreshWalletBalances();
           setLiquidityIsProcessing(false);
         },
         (error) => {
-          log("Could not complete the addLiquidity transaction");
+          log("Could not complete the addLiquidity transaction", "error");
           console.error(error);
           setLiquidityIsProcessing(false);
         }
       );
     } catch (e) {
-      log("Could not complete the addLiquidity transaction");
+      log("Could not complete the addLiquidity transaction", "error");
       console.error(e);
       setLiquidityIsProcessing(false);
     }
@@ -452,6 +540,7 @@ function Main() {
     toMintDecimals,
     fromCustodyAddress,
     toCustodyAddress,
+    refreshWalletBalances,
   ]);
 
   const removeLiquidity = useCallback(async () => {
@@ -469,7 +558,7 @@ function Main() {
       setRemoveLiquidityIsProcessing(true);
       signSendAndConfirm(wallet, connection, instruction).then(
         (transaction: any) => {
-          log("Successfully removed liquidity to the pool.");
+          log("Successfully removed liquidity to the pool.", "success");
           getBalance(
             connection,
             fromCustodyAddress,
@@ -477,16 +566,17 @@ function Main() {
             log
           );
           getBalance(connection, toCustodyAddress, setToCustodyBalance, log);
+          refreshWalletBalances();
           setRemoveLiquidityIsProcessing(false);
         },
         (error) => {
-          log("Could not complete the removeLiquidity transaction");
+          log("Could not complete the removeLiquidity transaction", "error");
           console.error(error);
           setRemoveLiquidityIsProcessing(false);
         }
       );
     } catch (e) {
-      log("Could not complete the removeLiquidity transaction");
+      log("Could not complete the removeLiquidity transaction", "error");
       console.error(e);
       setRemoveLiquidityIsProcessing(false);
     }
@@ -502,6 +592,7 @@ function Main() {
     shareMintDecimals,
     fromCustodyAddress,
     toCustodyAddress,
+    refreshWalletBalances,
   ]);
 
   const migrateTokens = useCallback(async () => {
@@ -519,7 +610,7 @@ function Main() {
       setMigrationIsProcessing(true);
       signSendAndConfirm(wallet, connection, instruction).then(
         (transaction: any) => {
-          log("Successfully migrated the tokens.");
+          log("Successfully migrated the tokens.", "success");
           getBalance(
             connection,
             fromCustodyAddress,
@@ -527,16 +618,17 @@ function Main() {
             log
           );
           getBalance(connection, toCustodyAddress, setToCustodyBalance, log);
+          refreshWalletBalances();
           setMigrationIsProcessing(false);
         },
         (error) => {
-          log("Could not complete the migrateTokens transaction.");
+          log("Could not complete the migrateTokens transaction.", "error");
           console.error(error);
           setMigrationIsProcessing(false);
         }
       );
     } catch (e) {
-      log("Could not complete the migrateTokens transaction.");
+      log("Could not complete the migrateTokens transaction.", "error");
       console.error(e);
       setMigrationIsProcessing(false);
     }
@@ -552,6 +644,7 @@ function Main() {
     fromMintDecimals,
     fromCustodyAddress,
     toCustodyAddress,
+    refreshWalletBalances,
   ]);
 
   const redeemShares = useCallback(async () => {
@@ -569,7 +662,7 @@ function Main() {
       setRedeemIsProcessing(true);
       signSendAndConfirm(wallet, connection, instruction).then(
         (transaction: any) => {
-          log("Successfully redeemed the shares.");
+          log("Successfully redeemed the shares.", "success");
           getBalance(
             connection,
             fromCustodyAddress,
@@ -577,16 +670,17 @@ function Main() {
             log
           );
           getBalance(connection, toCustodyAddress, setToCustodyBalance, log);
+          refreshWalletBalances();
           setRedeemIsProcessing(false);
         },
         (error) => {
-          log("Could not complete the claimShares transaction.");
+          log("Could not complete the claimShares transaction.", "error");
           console.error(error);
           setRedeemIsProcessing(false);
         }
       );
     } catch (e) {
-      log("Could not complete the claimShares transaction.");
+      log("Could not complete the claimShares transaction.", "error");
       console.error(e);
       setRedeemIsProcessing(false);
     }
@@ -602,6 +696,7 @@ function Main() {
     shareMintDecimals,
     fromCustodyAddress,
     toCustodyAddress,
+    refreshWalletBalances,
   ]);
   /*
   End actions!
@@ -645,6 +740,18 @@ function Main() {
     </div>
   );
 
+  const addLiquidityIsReady =
+    poolExists &&
+    shareTokenAccountExists &&
+    toTokenAccountBalance &&
+    liquidityAmount &&
+    toMintDecimals &&
+    compareWithDecimalOffset(
+      liquidityAmount,
+      toMintDecimals,
+      toTokenAccountBalance,
+      toMintDecimals
+    ) !== 1;
   const addLiquidityUI = (
     <>
       <Typography variant="h4">Add Liquidity</Typography>
@@ -661,7 +768,7 @@ function Main() {
       <Button
         variant="contained"
         onClick={addLiquidity}
-        disabled={liquidityIsProcessing}
+        disabled={liquidityIsProcessing || !addLiquidityIsReady}
       >
         Add Liquidity
       </Button>
@@ -669,6 +776,19 @@ function Main() {
     </>
   );
 
+  const removeLiquidityIsReady =
+    poolExists &&
+    shareTokenAccountBalance &&
+    toCustodyBalance &&
+    removeLiquidityAmount &&
+    toMintDecimals &&
+    shareMintDecimals &&
+    compareWithDecimalOffset(
+      removeLiquidityAmount,
+      shareMintDecimals,
+      toCustodyBalance,
+      toMintDecimals
+    ) !== 1;
   const removeLiquidityUI = (
     <>
       <Typography variant="h4">Remove Liquidity</Typography>
@@ -685,7 +805,7 @@ function Main() {
       <Button
         variant="contained"
         onClick={removeLiquidity}
-        disabled={removeLiquidityIsProcessing}
+        disabled={removeLiquidityIsProcessing || !removeLiquidityIsReady}
       >
         Remove Liquidity
       </Button>
@@ -693,6 +813,19 @@ function Main() {
     </>
   );
 
+  const migrateIsReady =
+    poolExists &&
+    fromTokenAccountBalance &&
+    toCustodyBalance &&
+    migrationAmount &&
+    toMintDecimals &&
+    fromMintDecimals &&
+    compareWithDecimalOffset(
+      migrationAmount,
+      fromMintDecimals,
+      toCustodyBalance,
+      toMintDecimals
+    ) !== 1;
   const migrateTokensUI = (
     <>
       <Typography variant="h4">Migrate Tokens</Typography>
@@ -709,7 +842,7 @@ function Main() {
       <Button
         variant="contained"
         onClick={migrateTokens}
-        disabled={migrationIsProcessing}
+        disabled={migrationIsProcessing || !migrateIsReady}
       >
         Migrate Tokens
       </Button>
@@ -717,6 +850,19 @@ function Main() {
     </>
   );
 
+  const redeemIsReady =
+    poolExists &&
+    fromCustodyBalance &&
+    shareTokenAccountBalance &&
+    redeemAmount &&
+    shareMintDecimals &&
+    fromMintDecimals &&
+    compareWithDecimalOffset(
+      redeemAmount,
+      shareMintDecimals,
+      fromCustodyBalance,
+      fromMintDecimals
+    ) !== 1;
   const redeemSharesUI = (
     <>
       <Typography variant="h4">Redeem Shares</Typography>
@@ -733,7 +879,7 @@ function Main() {
       <Button
         variant="contained"
         onClick={redeemShares}
-        disabled={redeemIsProcessing}
+        disabled={redeemIsProcessing || !redeemIsReady}
       >
         Redeem Shares
       </Button>
@@ -753,6 +899,10 @@ function Main() {
         associatedAccountExists={fromTokenAccountExists}
         setAssociatedAccountExists={setFromTokenAccountExists}
       />
+      {fromTokenAccountExists ? (
+        <Typography>Balance: {fromTokenAccountBalance}</Typography>
+      ) : null}
+      <div className={classes.spacer} />
       <Typography variant="body1">
         {"'To' SPL Token Account: " + toTokenAccount}
       </Typography>
@@ -762,6 +912,10 @@ function Main() {
         associatedAccountExists={toTokenAccountExists}
         setAssociatedAccountExists={setToTokenAccountExists}
       />
+      {toTokenAccountExists ? (
+        <Typography>Balance: {toTokenAccountBalance}</Typography>
+      ) : null}
+      <div className={classes.spacer} />
       <Typography variant="body1">
         {"Share SPL Token Account: " + shareTokenAccount}
       </Typography>
@@ -771,6 +925,13 @@ function Main() {
         associatedAccountExists={shareTokenAccountExists}
         setAssociatedAccountExists={setShareTokenAccountExists}
       />
+      {shareTokenAccountExists ? (
+        <Typography>Balance: {shareTokenAccountBalance}</Typography>
+      ) : null}
+      <div className={classes.spacer} />
+      <Button variant="outlined" onClick={refreshWalletBalances}>
+        Refresh Account Balances
+      </Button>
     </>
   );
 
@@ -810,12 +971,16 @@ function Main() {
       <Divider className={classes.divider} />
       {poolInfo}
       {createPoolButton}
+      <Divider className={classes.divider} />
+      {relevantTokenAccounts}
+      <Divider className={classes.divider} />
       <Typography>'From' Balance In Pool</Typography>
       <Typography>{fromCustodyBalance}</Typography>
       <Typography>'To' Balance In Pool</Typography>
       <Typography>{toCustodyBalance}</Typography>
-      <Divider className={classes.divider} />
+      <Button variant="outlined" onClick={refreshPoolBalances}>
-      {relevantTokenAccounts}
+        Reload Balances
+      </Button>
       <Divider className={classes.divider} />
       {addLiquidityUI}
       <Divider className={classes.divider} />