Merge pull request #330 from Plex-Engineer/stage

Plex-Engineer · Feb 16, 2024 · 02b6980 · 02b6980
2 parents e3b9d41 + fb001bf
commit 02b6980
Show file tree

Hide file tree

Showing 60 changed files with 5,328 additions and 2,354 deletions.
diff --git a/.env.example b/.env.example
@@ -1,6 +1,8 @@
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NEXT_PUBLIC_CANTO_MAINNET_API_URL=
+NEXT_PUBLIC_CANTO_MAINNET_USER_API_URL=
 NEXT_PUBLIC_CANTO_TESTNET_API_URL=
+NEXT_PUBLIC_CANTO_TESTNET_USER_API_URL=
 NEXT_PUBLIC_AMBIENT_API_URL=
 NEXT_PUBLIC_CANTO_DUST_BOT_URL=
 

diff --git a/app/bridge/bridging.tsx b/app/bridge/bridging.tsx
@@ -2,7 +2,7 @@
 import Spacer from "@/components/layout/spacer";
 import Selector from "@/components/selector/selector";
 import Text from "@/components/text";
-import { displayAmount } from "@/utils/formatting";
+import { displayAmount, sortTokens } from "@/utils/formatting";
 import styles from "./bridge.module.scss";
 import Button from "@/components/button/button";
 import Input from "@/components/input/input";
@@ -20,6 +20,7 @@ import { useEffect, useState } from "react";
 import GravityConfirmationModal from "./components/gravityConfirmationModal";
 import { GRAVITY_BRIDGE } from "@/config/networks";
 import { TX_ERROR_TYPES } from "@/config/consts/errors";
+import useScreenSize from "@/hooks/helpers/useScreenSize";
 
 const Bridging = ({ props }: { props: BridgeComboReturn }) => {
   const {
@@ -43,6 +44,7 @@ const Bridging = ({ props }: { props: BridgeComboReturn }) => {
 
   // special modal for gravity bridge out (check for wallet provider custom chains)
   const [gravityModalOpen, setGravityModalOpen] = useState(false);
+  const { isMobile } = useScreenSize();
 
   return (
     <>
@@ -235,7 +237,11 @@ const Bridging = ({ props }: { props: BridgeComboReturn }) => {
 
           <Container width="100%" gap={14}>
             <Text size="sm">Select Token and Enter Amount</Text>
-            <Container width="100%" direction="row" gap={20}>
+            <Container
+              width="100%"
+              direction={!isMobile ? "row" : "column"}
+              gap={isMobile ? 50 : 20}
+            >
               <Selector
                 title="SELECT TOKEN"
                 activeItem={
@@ -251,23 +257,16 @@ const Bridging = ({ props }: { props: BridgeComboReturn }) => {
                         id: "",
                       }
                 }
-                items={bridge.allOptions.tokens
-                  .map((token) => ({
+                items={sortTokens(
+                  bridge.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) => bridge.setState("token", tokenId)}
               />
               <Container width="100%">
@@ -319,8 +318,12 @@ const Bridging = ({ props }: { props: BridgeComboReturn }) => {
             token={token}
             notEnoughNativeBalance={
               Confirmation.preConfirmCheck.error &&
-              Confirmation.preConfirmCheck.reason ===
-                TX_ERROR_TYPES.NOT_ENOUGH_NATIVE_BALANCE_LZ
+              (Confirmation.preConfirmCheck.reason ===
+                TX_ERROR_TYPES.NOT_ENOUGH_NATIVE_BALANCE_LZ ||
+                Confirmation.preConfirmCheck.reason ===
+                  TX_ERROR_TYPES.NOT_ENOUGH_NATIVE_BALANCE_GRAVITY_BRIDGE ||
+                Confirmation.preConfirmCheck.reason ===
+                  TX_ERROR_TYPES.NOT_ENOUGH_NATIVE_BALANCE_IBC)
             }
           />
         ) : (
@@ -566,7 +569,15 @@ const FeesSection = ({
                 active={fees.selected === props.bridgeFeeOptions.fast.fee}
               />
             </Container>
-            <Text font="proto_mono" size="x-sm">
+            <Text
+              font="proto_mono"
+              size="x-sm"
+              color={
+                notEnoughNativeBalance
+                  ? " var(--extra-failure-color, #ff0000)"
+                  : ""
+              }
+            >
               Gas Fee:{" "}
               {displayAmount(
                 Object.values(props.gasFees).reduce(
@@ -580,7 +591,13 @@ const FeesSection = ({
           </>
         )}
       {props.method === BridgingMethod.IBC && props.direction === "out" && (
-        <Text font="proto_mono" size="x-sm">
+        <Text
+          font="proto_mono"
+          size="x-sm"
+          color={
+            notEnoughNativeBalance ? " var(--extra-failure-color, #ff0000)" : ""
+          }
+        >
           Gas Fee:{" "}
           {displayAmount(
             Object.values(props.gasFees).reduce(

diff --git a/app/bridge/components/feeButton.tsx b/app/bridge/components/feeButton.tsx
@@ -49,7 +49,10 @@ const FeeButton = ({
         {subtext2}
       </Text>
       <div className={style.divider} />
-      <Text font="proto_mono">{`${tokenAmount} ${tokenSymbol}`}</Text>
+      <Text
+        font="proto_mono"
+        style={{ textAlign: "center" }}
+      >{`${tokenAmount} ${tokenSymbol}`}</Text>
       <Text size="x-sm" theme="secondary-dark">
         {"$" + tokenValueUSD}
       </Text>

diff --git a/app/bridge/components/gravityConfirmationModal.tsx b/app/bridge/components/gravityConfirmationModal.tsx
@@ -5,6 +5,7 @@ import Spacer from "@/components/layout/spacer";
 import Modal from "@/components/modal/modal";
 import Text from "@/components/text";
 import { GRAVITY_BRIGDE_EVM } from "@/config/networks";
+import useScreenSize from "@/hooks/helpers/useScreenSize";
 import { useState } from "react";
 
 interface Props {
@@ -20,6 +21,8 @@ const GravityConfirmationModal = ({
   onReselectMethod,
 }: Props) => {
   const [addChainError, setAddChainError] = useState<string | null>(null);
+  const { isMobile } = useScreenSize();
+
   async function handleConfirm() {
     try {
       // check that the user's wallet is actually supported
@@ -73,10 +76,13 @@ const GravityConfirmationModal = ({
       </Text>
       <Spacer height="30px" />
       <Container gap={20} direction="row" center={{ horizontal: true }}>
-        <Button onClick={handleConfirm}>
+        <Button onClick={handleConfirm} height={isMobile ? "large" : undefined}>
           {"I'm using a supported wallet"}
         </Button>{" "}
-        <Button onClick={onReselectMethod}>
+        <Button
+          onClick={onReselectMethod}
+          height={isMobile ? "large" : undefined}
+        >
           {"Use Gravity Bridge Portal"}
         </Button>
       </Container>

diff --git a/app/bridge/page.tsx b/app/bridge/page.tsx
@@ -7,17 +7,14 @@ import useBridgeCombo from "./util";
 import BridgeInProgress from "./components/bridgeInProgress";
 import styles from "./bridge.module.scss";
 import useBridgingInProgess from "@/hooks/bridge/useBridgingInProgress";
-import DesktopOnly from "@/components/desktop-only/desktop-only";
+import useScreenSize from "@/hooks/helpers/useScreenSize";
 
 export default function BridgePage() {
   const bridgeCombo = useBridgeCombo();
   const { Direction } = bridgeCombo;
   const bridgeProgress = useBridgingInProgess();
+  const { isMobile } = useScreenSize();
 
-  //   if mobile only
-  if (!window.matchMedia("(min-width: 768px)").matches) {
-    return <DesktopOnly />;
-  }
   return (
     <>
       <AnimatedBackground
@@ -33,7 +30,7 @@ export default function BridgePage() {
         }}
       >
         <Container
-          width="700px"
+          width={isMobile ? "100vw" : "700px"}
           backgroundColor="var(--card-sub-surface-color, #DFDFDF)"
         >
           <Tabs
@@ -66,6 +63,7 @@ export default function BridgePage() {
                     setTxBridgeStatus={bridgeProgress.setTxBridgeStatus}
                   />
                 ),
+                hideOnMobile: true,
               },
             ]}
           />

diff --git a/app/bridge/util.ts b/app/bridge/util.ts
@@ -242,6 +242,28 @@ export default function useBridgeCombo(): BridgeComboReturn {
         reason: "Please select a bridge fee",
       };
     }
+
+    if (
+      bridgeFees.ready &&
+      (bridgeFees.method === BridgingMethod.GRAVITY_BRIDGE ||
+        bridgeFees.method === BridgingMethod.IBC) &&
+      bridgeFees.direction === "out" &&
+      cantoBalance?.value !== undefined
+    ) {
+      const gasFee = bridgeFees.gasFees.reduce(
+        (acc, obj) => acc + BigInt(obj.amount),
+        0n
+      );
+      if (cantoBalance.value < gasFee) {
+        return {
+          error: true,
+          reason:
+            bridgeFees.method === BridgingMethod.GRAVITY_BRIDGE
+              ? TX_ERROR_TYPES.NOT_ENOUGH_NATIVE_BALANCE_GRAVITY_BRIDGE
+              : TX_ERROR_TYPES.NOT_ENOUGH_NATIVE_BALANCE_IBC,
+        };
+      }
+    }
     return { error: false };
   };
 

diff --git a/app/globals.scss b/app/globals.scss
@@ -84,6 +84,21 @@ a {
   --box-shadow: 6px 6px 0px 0px rgba(17, 17, 17, 0.15);
   --temp-bg-brightness: 1;
   --card-primary-color-opp: #06fc99;
+  --proposal-status-color: #d8d8d8;
+  --proposal-status-stroke-color: #d4d4d4;
+  --graph-fill-color: #d0d0d0;
+  --graph-stroke-color: #b3b3b3;
+  --vote-box-yes-color: #A1DCC3;
+  --vote-box-yes-stroke-color: #12D481;
+  --vote-box-no-color: #E4B0B0;
+  --vote-box-no-stroke-color: #EF4444;
+  --vote-box-veto-color: #CDAADD;
+  --vote-box-veto-stroke-color: #B76FD7;
+  --vote-box-abstain-color: #E6E2C5;
+  --vote-box-abstain-stroke-color: #CFBB1D;
+  --no-active-proposal-color: rgba(223,223,223, 0.4);
+  --toast-secondary-text-color: rgba(36, 36, 36, 0.50);
+
 }
 
 .dark {
@@ -128,6 +143,21 @@ a {
   --light-mode: 0;
   --box-shadow: 0;
   ---temp-opacity: 1;
+  --graph-fill-color: rgb(75,75,75,50%);
+  --graph-stroke-color: #4b4b4b;
+  --proposal-status-color: #383838;
+  --proposal-status-stroke-color: #3d3d3d;
+  --vote-box-yes-color: #303831;
+  --vote-box-yes-stroke-color: #589C5B;
+  --vote-box-no-color: #643131;
+  --vote-box-no-stroke-color: #EF4444;
+  --vote-box-veto-color: #4D2A5E;
+  --vote-box-veto-stroke-color: #A22ED8;
+  --vote-box-abstain-color: #666346;
+  --vote-box-abstain-stroke-color: #F5E98A;
+  --no-active-proposal-color: #101010;
+  --toast-secondary-text-color: rgba(253, 253, 253, 0.50);
+
 }
 
 * {