Staging

app/bridge/bridging.tsx

@@ -23,6 +23,7 @@ import { GetWalletClientResult } from "wagmi/actions";
 import { maxBridgeAmountInUnderlying } from "@/hooks/bridge/helpers/amounts";
 import { BaseNetwork } from "@/config/interfaces";
 import { validateInputTokenAmount } from "@/utils/validation.utils";
+import { ETHEREUM_VIA_GRAVITY_BRIDGE } from "@/config/networks";
 
 interface BridgeProps {
   hook: BridgeHookReturn;
@@ -103,6 +104,12 @@ const Bridging = (props: BridgeProps) => {
     isCosmosNetwork(props.hook.selections.toNetwork)
       ? {
           cosmosAddress: {
+            addressName:
+              props.hook.selections.toNetwork.id ===
+              ETHEREUM_VIA_GRAVITY_BRIDGE.id
+                ? "Gravity Bridge"
+                : undefined,
+            chainId: props.hook.selections.toNetwork.chainId,
             addressPrefix: props.hook.selections.toNetwork.addressPrefix,
             currentAddress: props.hook.addresses.getReceiver() ?? "",
             setAddress: (address: string) =>
@@ -145,10 +152,6 @@ const Bridging = (props: BridgeProps) => {
           addresses={{
             from: props.hook.addresses.getSender(),
             to: props.hook.addresses.getReceiver(),
-            name:
-              props.hook.direction === "in"
-                ? networkName(props.hook.selections.fromNetwork)
-                : networkName(props.hook.selections.toNetwork),
           }}
           fromNetwork={networkName(props.hook.selections.fromNetwork)}
           toNetwork={networkName(props.hook.selections.toNetwork)}
@@ -170,7 +173,7 @@ const Bridging = (props: BridgeProps) => {
           }}
           extraDetails={
             props.hook.selections.toNetwork?.id ===
-            "ethereum-via-gravity-bridge" ? (
+            ETHEREUM_VIA_GRAVITY_BRIDGE.id ? (
               <Text size="x-sm">
                 To bridge your tokens to Ethereum through Gravity Bridge, first
                 ensure that you have an IBC wallet like Keplr.
@@ -346,22 +349,29 @@ const Bridging = (props: BridgeProps) => {
                             ? props.hook.selections.token.symbol
                             : props.hook.selections.token.name,
                       }
-                    : ({
+                    : {
                         name: "Select Token",
                         icon: "loader.svg",
                         id: "",
-                      } as Item)
+                      }
                 }
-                items={
-                  props.hook.allOptions.tokens.map((token) => ({
+                items={props.hook.allOptions.tokens
+                  .map((token) => ({
                     ...token,
                     name: token.name.length > 24 ? token.symbol : token.name,
                     secondary: displayAmount(
                       token.balance ?? "0",
                       token.decimals
                     ),
-                  })) ?? []
-                }
+                  }))
+                  .sort((a, b) => {
+                    if (Number(a.secondary) === Number(b.secondary)) {
+                      return b.name.toLowerCase() > a.name.toLowerCase()
+                        ? -1
+                        : 1;
+                    }
+                    return Number(a.secondary) > Number(b.secondary) ? -1 : 1;
+                  })}
                 onChange={(tokenId) => props.hook.setState("token", tokenId)}
               />
               <Container width="100%">

app/bridge/components/confirmationModal.tsx

@@ -6,13 +6,15 @@ import Image from "next/image";
 import React, { ReactNode } from "react";
 import styles from "../bridge.module.scss";
 import PopUp from "@/components/popup/popup";
+import { connectToKeplr } from "@/utils/keplr/connectKeplr";
+import { formatError } from "@/utils/formatting.utils";
+import InfoPop from "@/components/infopop/infopop";
 
 interface Props {
   imgUrl: string;
   addresses: {
     from: string | null;
     to: string | null;
-    name: string | null;
   };
   token?: {
     name: string;
@@ -27,13 +29,17 @@ interface Props {
     onConfirm: () => void;
   };
   cosmosAddress?: {
+    addressName?: string; // for eth via gravity bridge
+    chainId: string;
     addressPrefix: string;
     currentAddress: string;
     setAddress: (address: string) => void;
   };
   extraDetails?: ReactNode;
 }
 const ConfirmationModal = (props: Props) => {
+  console.log(props);
+  const [keplrError, setKeplrError] = React.useState<string>("");
   return (
     <div className={styles["confirmation-container"]}>
       <Text size="lg" font="proto_mono">
@@ -43,8 +49,11 @@ const ConfirmationModal = (props: Props) => {
       <Image src={props.imgUrl} alt={"props"} width={60} height={60} />
 
       <Text size="md" font="proto_mono">
-        Bridge {props.token?.name} {props.type}{" "}
-        {props.type == "in" ? "from" : "to"} {props.addresses?.name}
+        {`Bridge ${props.token?.name} ${props.type} ${
+          props.type === "in"
+            ? "from " + props.fromNetwork
+            : "to " + props.toNetwork
+        }`}
       </Text>
       {props.extraDetails && (
         <Container
@@ -108,7 +117,8 @@ const ConfirmationModal = (props: Props) => {
                 content={<Text size="sm">{props.addresses.to}</Text>}
               >
                 <Text size="sm">
-                  {props.toNetwork + " : "}
+                  {(props.cosmosAddress?.addressName ?? props.toNetwork) +
+                    " : "}
                   {props.addresses.to
                     ? props.addresses.to?.slice(0, 6) +
                       "..." +
@@ -118,7 +128,7 @@ const ConfirmationModal = (props: Props) => {
               </PopUp>
             ) : (
               <Text size="sm">
-                {props.toNetwork + " : "}
+                {(props.cosmosAddress?.addressName ?? props.toNetwork) + " : "}
                 {props.addresses.to
                   ? props.addresses.to?.slice(0, 6) +
                     "..." +
@@ -144,9 +154,57 @@ const ConfirmationModal = (props: Props) => {
             onChange={function (e: React.ChangeEvent<HTMLInputElement>): void {
               props.cosmosAddress?.setAddress(e.target.value);
             }}
+            height={"md"}
           />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              paddingTop: "5px",
+            }}
+          >
+            <Text size="xx-sm" color="var(--extra-failure-color, #ff0000)">
+              {keplrError}
+            </Text>
+            <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
+              <Text
+                size="xx-sm"
+                weight="bold"
+                style={{
+                  textDecoration: "underline",
+                  cursor: "pointer",
+                  paddingTop: "3px",
+                }}
+              >
+                <a
+                  onClick={async () => {
+                    const { data, error } = await connectToKeplr(
+                      props.cosmosAddress?.chainId ?? ""
+                    );
+                    if (error) {
+                      setKeplrError(formatError(error.message));
+                    } else {
+                      setKeplrError("");
+                      props.cosmosAddress?.setAddress(data.address);
+                    }
+                  }}
+                >
+                  Connect to Keplr
+                </a>
+              </Text>
+              <InfoPop>
+                <Text size="xx-sm">
+                  {`manually enter your ${
+                    props.cosmosAddress?.addressName ?? props.toNetwork
+                  } address or click "Connect to Keplr"`}
+                </Text>
+              </InfoPop>
+            </div>
+          </div>
         </Container>
       )}
+
       <Button
         width={"fill"}
         onClick={() => {

app/bridge/page.tsx

@@ -52,7 +52,7 @@ export default function BridgePage() {
     async function getKeplrInfoForBridge() {
       const network = bridgeIn.selections.fromNetwork;
       if (!network || !isCosmosNetwork(network)) return;
-      const keplrClient = await connectToKeplr(network);
+      const keplrClient = await connectToKeplr(network.chainId);
       bridgeIn.setState("cosmosAddress", keplrClient.data?.address);
     }
     getKeplrInfoForBridge();

app/lending/components/modal/modal.tsx

@@ -27,11 +27,16 @@ interface Props {
   cToken: CTokenWithUserData | null;
   position: UserLMPosition;
   transaction: {
-    performTx: (amount: string, txType: CTokenLendingTxTypes) => void;
     validateAmount: (
       amount: string,
-      txType: CTokenLendingTxTypes
+      txType: CTokenLendingTxTypes,
+      max: boolean
     ) => ValidationReturn;
+    performTx: (
+      amount: string,
+      txType: CTokenLendingTxTypes,
+      max: boolean
+    ) => void;
   };
 }
 
@@ -128,16 +133,31 @@ export const LendingModal = (props: Props) => {
     transaction: {
       validateAmount: (
         amount: string,
-        txType: CTokenLendingTxTypes
+        txType: CTokenLendingTxTypes,
+        max: boolean
       ) => ValidationReturn;
-      performTx: (amount: string, txType: CTokenLendingTxTypes) => void;
+      performTx: (
+        amount: string,
+        txType: CTokenLendingTxTypes,
+        max: boolean
+      ) => void;
     }
   ) {
+    const [maxClicked, setMaxClicked] = useState(false);
     const [amount, setAmount] = useState("");
     const bnAmount = (
       convertToBigNumber(amount, cToken.underlying.decimals).data ?? "0"
     ).toString();
-    const amountCheck = transaction.validateAmount(bnAmount, actionType);
+
+    // tx params
+    const txParams: [string, CTokenLendingTxTypes, boolean] = [
+      bnAmount,
+      actionType,
+      maxClicked,
+    ];
+
+    // check amount
+    const amountCheck = transaction.validateAmount(...txParams);
 
     // limits
     const needLimit =
@@ -176,7 +196,8 @@ export const LendingModal = (props: Props) => {
         <Amount
           decimals={cToken.underlying.decimals}
           value={amount}
-          onChange={(val) => {
+          onChange={(val, wasMax) => {
+            wasMax ? setMaxClicked(true) : setMaxClicked(false);
             setAmount(val.target.value);
           }}
           IconUrl={cToken.underlying.logoURI}
@@ -206,7 +227,7 @@ export const LendingModal = (props: Props) => {
           <Button
             width={"fill"}
             disabled={!amountCheck.isValid}
-            onClick={() => transaction.performTx(bnAmount, actionType)}
+            onClick={() => transaction.performTx(...txParams)}
           >
             CONFIRM
           </Button>

app/lending/utils.tsx

@@ -33,10 +33,15 @@ interface LendingComboReturn {
     };
   };
   transaction: {
-    performTx: (amount: string, txType: CTokenLendingTxTypes) => void;
+    performTx: (
+      amount: string,
+      txType: CTokenLendingTxTypes,
+      max: boolean
+    ) => void;
     validateParams: (
       amount: string,
-      txType: CTokenLendingTxTypes
+      txType: CTokenLendingTxTypes,
+      max: boolean
     ) => ValidationReturn;
   };
   selection: {
@@ -121,14 +126,19 @@ export function useLendingCombo(props: LendingComboProps): LendingComboReturn {
   }, [chainId, cNote?.underlying.address]);
 
   // transaction functions
-  function lendingTx(amount: string, txType: CTokenLendingTxTypes) {
+  function lendingTx(
+    amount: string,
+    txType: CTokenLendingTxTypes,
+    max: boolean
+  ) {
     if (!selection.selectedCToken || !signer) return;
     const { data, error } = transaction.createNewLendingFlow({
       chainId: signer.chain.id,
       ethAccount: signer.account.address,
       cToken: selection.selectedCToken,
       amount,
       txType,
+      max,
     });
     if (error) {
       console.log(error);
@@ -142,7 +152,8 @@ export function useLendingCombo(props: LendingComboProps): LendingComboReturn {
   }
   const validateParams = (
     amount: string,
-    txType: CTokenLendingTxTypes
+    txType: CTokenLendingTxTypes,
+    max: boolean
   ): ValidationReturn => {
     if (!selection.selectedCToken || !signer) return { isValid: false };
     return transaction.validateParams({
@@ -151,6 +162,7 @@ export function useLendingCombo(props: LendingComboProps): LendingComboReturn {
       cToken: selection.selectedCToken,
       amount,
       txType,
+      max,
     });
   };
 

app/lp/components/ambientLPModal.tsx

@@ -12,7 +12,7 @@ import styles from "./cantoDex.module.scss";
 import Amount from "@/components/amount/amount";
 import Tabs from "@/components/tabs/tabs";
 import { ModalItem } from "@/app/lending/components/modal/modal";
-import { greaterThan, percentOfAmount } from "@/utils/tokens/tokenMath.utils";
+import { percentOfAmount } from "@/utils/tokens/tokenMath.utils";
 import Slider from "@/components/slider/slider";
 import clsx from "clsx";
 import PopUp from "@/components/popup/popup";

components/amount/amount.tsx

@@ -10,7 +10,7 @@ interface Props {
   IconUrl: string;
   title: string;
   symbol: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>, max: boolean) => void;
   decimals: number;
   value: string;
   max: string;
@@ -102,13 +102,16 @@ const Amount = (props: Props) => {
         <span
           className={styles.max}
           onClick={() => {
-            props.onChange({
-              target: {
-                value: formatBalance(props.max, props.decimals, {
-                  precision: props.decimals,
-                }),
-              },
-            } as any);
+            props.onChange(
+              {
+                target: {
+                  value: formatBalance(props.max, props.decimals, {
+                    precision: props.decimals,
+                  }),
+                },
+              } as any,
+              true
+            );
           }}
         >
           <Text size="xx-sm" weight="bold">
@@ -124,7 +127,7 @@ const Amount = (props: Props) => {
         onChange={(e) => {
           e.target.value = decommify(e.target.value);
           if (e.target.value === "" || e.target.value.match(/^\d*\.?\d*$/)) {
-            props.onChange(e);
+            props.onChange(e, false);
           }
         }}
         className={styles.input}