fix: patch trustline and wallet warning bugs

blend-capital · Sep 18, 2024 · a7e8cb5 · a7e8cb5
1 parent 174426f
commit a7e8cb5
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blend-ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -21,7 +21,6 @@
     "@stellar/freighter-api": "^3.0.0",
     "@stellar/stellar-sdk": "12.2.0",
     "@tanstack/react-query": "5.52.0",
-    "bignumber.js": "^9.0.2",
     "copy-to-clipboard": "^3.3.3",
     "next": "^14.2.11",
     "react": "^18.2.0",

diff --git a/src/components/borrow/BorrowAnvil.tsx b/src/components/borrow/BorrowAnvil.tsx
@@ -89,6 +89,23 @@ export const BorrowAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }
     setLoadingEstimate(false);
   });
 
+  async function handleAddAssetTrustline() {
+    if (connected && reserve?.tokenMetadata?.asset) {
+      const reserveAsset = reserve?.tokenMetadata?.asset;
+      await createTrustline(reserveAsset);
+    }
+  }
+
+  const AddTrustlineButton = (
+    <OpaqueButton
+      onClick={handleAddAssetTrustline}
+      palette={theme.palette.warning}
+      sx={{ padding: '6px 24px', margin: '12px auto' }}
+    >
+      Add {reserve?.tokenMetadata.asset?.code} Trustline
+    </OpaqueButton>
+  );
+
   const { isSubmitDisabled, isMaxDisabled, reason, disabledType, extraContent, isError } =
     useMemo(() => {
       const hasTokenTrustline = !requiresTrustline(horizonAccount, reserve?.tokenMetadata?.asset);
@@ -142,15 +159,6 @@ export const BorrowAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }
     newPositionEstimate && Number.isFinite(newPositionEstimate?.borrowLimit)
       ? newPositionEstimate?.borrowLimit
       : 0;
-  const AddTrustlineButton = (
-    <OpaqueButton
-      onClick={handleAddAssetTrustline}
-      palette={theme.palette.warning}
-      sx={{ padding: '6px 24px', margin: '12px auto' }}
-    >
-      Add {reserve?.tokenMetadata.asset?.code} Trustline
-    </OpaqueButton>
-  );
 
   const handleBorrowMax = () => {
     if (reserve && assetToBase && curPositionEstimate) {
@@ -169,13 +177,6 @@ export const BorrowAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }
     }
   };
 
-  async function handleAddAssetTrustline() {
-    if (connected && reserve?.tokenMetadata?.asset) {
-      const reserveAsset = reserve?.tokenMetadata?.asset;
-      await createTrustline(reserveAsset);
-    }
-  }
-
   return (
     <Row>
       <Section

diff --git a/src/components/common/WalletWarning.tsx b/src/components/common/WalletWarning.tsx
@@ -15,7 +15,9 @@ export const WalletWarning = () => {
   const [openCon, setOpenCon] = React.useState(false);
   const [openError, setOpenError] = React.useState(false);
 
-  const { refetch: refetchAccount, isError: isError } = useHorizonAccount();
+  const { data: account, refetch: refetchAccount } = useHorizonAccount();
+
+  const notFound = account === undefined;
 
   const handleConnectWallet = (successful: boolean) => {
     if (successful) {
@@ -31,19 +33,19 @@ export const WalletWarning = () => {
   };
 
   useEffect(() => {
-    if (connected && isError === true) {
+    if (connected && notFound === true) {
       refetchAccount();
       const refreshInterval = setInterval(async () => {
         await refetchAccount();
       }, 3 * 1000);
       return () => clearInterval(refreshInterval);
     }
-  }, [refetchAccount, connected, isError, walletAddress]);
+  }, [refetchAccount, connected, notFound, walletAddress]);
 
   return (
     <>
       {connected ? (
-        isError === true ? (
+        notFound === true ? (
           <Row
             sx={{
               background: theme.palette.warning.opaque,

diff --git a/src/components/withdraw/WithdrawAnvil.tsx b/src/components/withdraw/WithdrawAnvil.tsx
@@ -89,6 +89,23 @@ export const WithdrawAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId
     setLoadingEstimate(false);
   });
 
+  async function handleAddAssetTrustline() {
+    if (connected && reserve?.tokenMetadata?.asset) {
+      const reserveAsset = reserve?.tokenMetadata?.asset;
+      await createTrustline(reserveAsset);
+    }
+  }
+
+  const AddTrustlineButton = (
+    <OpaqueButton
+      onClick={handleAddAssetTrustline}
+      palette={theme.palette.warning}
+      sx={{ padding: '6px 24px', margin: '12px auto' }}
+    >
+      Add {reserve?.tokenMetadata.asset?.code} Trustline
+    </OpaqueButton>
+  );
+
   const { isSubmitDisabled, isMaxDisabled, reason, disabledType, extraContent, isError } =
     useMemo(() => {
       const hasTokenTrustline = !requiresTrustline(horizonAccount, reserve?.tokenMetadata?.asset);
@@ -134,16 +151,6 @@ export const WithdrawAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId
       ? newPositionsEstimate?.borrowLimit
       : 0;
 
-  const AddTrustlineButton = (
-    <OpaqueButton
-      onClick={handleAddAssetTrustline}
-      palette={theme.palette.warning}
-      sx={{ padding: '6px 24px', margin: '12px auto' }}
-    >
-      Add {reserve?.tokenMetadata.asset?.code} Trustline
-    </OpaqueButton>
-  );
-
   const handleWithdrawAmountChange = (withdrawInput: string) => {
     if (reserve && poolUser) {
       let curSupplied = poolUser.getCollateralFloat(reserve);
@@ -178,13 +185,6 @@ export const WithdrawAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId
     }
   };
 
-  async function handleAddAssetTrustline() {
-    if (connected && reserve?.tokenMetadata?.asset) {
-      const reserveAsset = reserve?.tokenMetadata?.asset;
-      await createTrustline(reserveAsset);
-    }
-  }
-
   return (
     <Row>
       <Section

diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
@@ -49,7 +49,7 @@ export default function DefaultLayout({ children }: { children: ReactNode }) {
             <Row>
               <WalletWarning />
             </Row>
-            {faucet_pool && isTestnet && (
+            {faucet_pool !== undefined && isTestnet && (
               <Row>
                 <FaucetBanner poolId={faucet_pool} />
               </Row>

diff --git a/src/utils/formatter.ts b/src/utils/formatter.ts
@@ -1,5 +1,4 @@
 /// Information display formatting utils
-import BigNumber from 'bignumber.js';
 
 const POSTFIXES = ['', 'k', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y'];
 
@@ -29,28 +28,39 @@ export function toBalance(
   }
 
   let visibleDecimals = 0;
-  if (amount === 0) {
+  if (numValue === 0) {
     visibleDecimals = 0;
   } else {
-    if (amount > 1) {
+    if (numValue >= 10) {
       visibleDecimals = 2;
     } else {
-      visibleDecimals = decimals ?? 7;
+      visibleDecimals = Math.min(decimals ?? 7, 7);
     }
   }
 
+  if (numValue === 0) {
+    return '0';
+  }
+
+  const absValue = Math.abs(numValue);
+  if (absValue < 10) {
+    return numValue.toFixed(visibleDecimals);
+  } else if (absValue < 10000) {
+    return numValue.toFixed(2);
+  }
+
   const minValue = 10 ** -(visibleDecimals as number);
   const isSmallerThanMin = numValue !== 0 && Math.abs(numValue) < Math.abs(minValue);
   let adjAmount = isSmallerThanMin ? minValue : numValue;
 
-  const bnValue = new BigNumber(numValue);
+  const bnValue = numValue;
 
   const integerPlaces = bnValue.toFixed(0).length;
   const postfixIndex = Math.min(
     Math.floor(integerPlaces ? (integerPlaces - 1) / 3 : 0),
     POSTFIXES.length - 1
   );
-  adjAmount = bnValue.shiftedBy(-3 * postfixIndex).toNumber();
+  adjAmount = numValue / Math.pow(10, 3 * postfixIndex);
 
   const formattedStr = new Intl.NumberFormat('en-US', {
     maximumFractionDigits: visibleDecimals,