Merge pull request #121 from ionicprotocol/ui-refinement

UI refinement
ionicprotocol · Jan 27, 2024 · 52ce8a2 · 52ce8a2
2 parents c3599ad + 343fbe4
commit 52ce8a2
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 77 deletions.
diff --git a/packages/ui/app/_components/popup/Amount.tsx b/packages/ui/app/_components/popup/Amount.tsx
@@ -27,9 +27,9 @@ const Amount = ({
   //neeed to get the wallet balance
   function handlInpData(e: React.ChangeEvent<HTMLInputElement>) {
     const currentValue =
-      e.target.value.trim() === '' ? 0 : parseFloat(e.target.value);
+      e.target.value.trim() === '' ? undefined : parseFloat(e.target.value);
 
-    handleInput(currentValue > max ? max : currentValue);
+    handleInput(currentValue && currentValue > max ? max : currentValue);
   }
   function handleMax(val: number) {
     handleInput(val);
@@ -55,8 +55,8 @@ const Amount = ({
         <input
           value={amount}
           type="number"
-          placeholder="0.00"
-          className={`focus:outline-none  font-bold bg-transparent`}
+          placeholder="0"
+          className={`focus:outline-none amount-field font-bold bg-transparent`}
           onChange={handlInpData}
         />
         <img

diff --git a/packages/ui/app/_components/popup/page.tsx b/packages/ui/app/_components/popup/page.tsx
@@ -85,13 +85,18 @@ const Popup = ({
   const [active, setActive] = useState<string>('');
   const slide = useRef<HTMLDivElement>(null!);
   const router = useRouter();
-  const [amount, setAmount] = useReducer((_: number, value: number): number => {
-    const marketDataDecimals = parseInt(
-      selectedMarketData.underlyingDecimals.toString()
-    );
-
-    return parseFloat(value.toFixed(marketDataDecimals));
-  }, 0);
+  const [amount, setAmount] = useReducer(
+    (_: number | undefined, value: number | undefined): number | undefined => {
+      const marketDataDecimals = parseInt(
+        selectedMarketData.underlyingDecimals.toString()
+      );
+
+      return typeof value === 'number'
+        ? parseFloat(value.toFixed(marketDataDecimals))
+        : undefined;
+    },
+    undefined
+  );
   const amountAsBInt = useMemo<string>(
     () =>
       amount
@@ -133,7 +138,8 @@ const Popup = ({
     updatedBorrowAPR,
     supplyBalanceFrom,
     supplyBalanceTo,
-    updatedTotalBorrows
+    borrowBalanceFrom,
+    borrowBalanceTo
   } = useMemo(() => {
     const blocksPerMinute = getBlockTimePerMinuteByChainId(chainId);
 
@@ -161,6 +167,20 @@ const Popup = ({
               )
             )
           : undefined,
+        borrowBalanceFrom: utils.commify(
+          utils.formatUnits(
+            selectedMarketData.borrowBalance,
+            selectedMarketData.underlyingDecimals
+          )
+        ),
+        borrowBalanceTo: updatedAsset
+          ? utils.commify(
+              utils.formatUnits(
+                updatedAsset.borrowBalance,
+                updatedAsset.underlyingDecimals
+              )
+            )
+          : undefined,
         updatedBorrowAPR: updatedAsset
           ? currentSdk.ratePerBlockToAPY(
               updatedAsset.borrowRatePerBlock,
@@ -173,6 +193,10 @@ const Popup = ({
               blocksPerMinute
             )
           : undefined,
+        totalBorrows: updatedAssets?.reduce(
+          (acc, cur) => acc + cur.borrowBalanceFiat,
+          0
+        ),
         updatedTotalBorrows: updatedAssets
           ? updatedAssets.reduce((acc, cur) => acc + cur.borrowBalanceFiat, 0)
           : undefined
@@ -533,7 +557,7 @@ const Popup = ({
               <div className={`min-w-full py-5 px-[6%] h-min `}>
                 <Amount
                   selectedMarketData={selectedMarketData}
-                  handleInput={(val?: number) => setAmount(val ?? 0)}
+                  handleInput={(val?: number) => setAmount(val)}
                   amount={amount}
                   max={parseFloat(balanceData?.formatted ?? '0')}
                   symbol={balanceData?.symbol ?? ''}
@@ -564,16 +588,16 @@ const Popup = ({
                   className={`flex w-full items-center justify-between text-xs mb-1 text-white/50 uppercase `}
                 >
                   <span className={``}>Market Supply Balance</span>
-                  <span className={`font-bold pl-2`}>
-                    {selectedMarketData.liquidityNative.toFixed(
-                      parseInt(selectedMarketData.underlyingDecimals.toString())
-                    )}{' '}
-                    -{'> '}
-                    {(
-                      selectedMarketData.liquidityNative + (amount ?? 0)
-                    ).toFixed(
-                      parseInt(selectedMarketData.underlyingDecimals.toString())
-                    )}
+                  <span className={`flex font-bold pl-2`}>
+                    {supplyBalanceFrom}
+                    <span className="mx-1">{`->`}</span>
+                    <ResultHandler
+                      isLoading={isLoadingUpdatedAssets}
+                      width="16"
+                      height="16"
+                    >
+                      {supplyBalanceTo}
+                    </ResultHandler>
                     {/* this will be dynamic */}
                   </span>
                 </div>
@@ -628,7 +652,7 @@ const Popup = ({
                 {/* ---------------------------------------------------------------------------- */}
                 <Amount
                   selectedMarketData={selectedMarketData}
-                  handleInput={(val?: number) => setAmount(val ?? 0)}
+                  handleInput={(val?: number) => setAmount(val)}
                   amount={amount}
                   max={parseFloat(
                     selectedMarketData.supplyBalanceNative.toString()
@@ -644,16 +668,16 @@ const Popup = ({
                   className={`flex w-full items-center justify-between text-xs mb-1 text-white/50 uppercase `}
                 >
                   <span className={``}>Market Supply Balance</span>
-                  <span className={`font-bold pl-2`}>
-                    {selectedMarketData.liquidityNative.toFixed(
-                      parseInt(selectedMarketData.underlyingDecimals.toString())
-                    )}{' '}
-                    -{'> '}
-                    {(
-                      selectedMarketData.liquidityNative - (amount ?? 0)
-                    ).toFixed(
-                      parseInt(selectedMarketData.underlyingDecimals.toString())
-                    )}
+                  <span className={`flex font-bold pl-2`}>
+                    {supplyBalanceFrom}
+                    <span className="mx-1">{`->`}</span>
+                    <ResultHandler
+                      isLoading={isLoadingUpdatedAssets}
+                      width="16"
+                      height="16"
+                    >
+                      {supplyBalanceTo}
+                    </ResultHandler>
                     {/* this will be dynamic */}
                   </span>
                 </div>
@@ -701,7 +725,7 @@ const Popup = ({
                 {/* ---------------------------------------------------------------------------- */}
                 <Amount
                   selectedMarketData={selectedMarketData}
-                  handleInput={(val?: number) => setAmount(val ?? 0)}
+                  handleInput={(val?: number) => setAmount(val)}
                   amount={amount}
                   max={maxBorrowAmount?.number ?? 0}
                   symbol={balanceData?.symbol ?? ''}
@@ -733,6 +757,22 @@ const Popup = ({
                     {/* this will be dynamic */}
                   </span>
                 </div>
+                <div
+                  className={`flex w-full items-center justify-between mb-2 text-xs text-white/50 `}
+                >
+                  <span className={``}>CURRENTLY BORROWING</span>
+                  <span className={`flex font-bold pl-2`}>
+                    {`${borrowBalanceFrom}`}
+                    <span className="mx-1">{`->`}</span>
+                    <ResultHandler
+                      isLoading={isLoadingUpdatedAssets}
+                      width="16"
+                      height="16"
+                    >
+                      {borrowBalanceTo}
+                    </ResultHandler>
+                  </span>
+                </div>
                 <div
                   className={`flex w-full items-center justify-between text-xs mb-1 text-white/50 uppercase`}
                 >
@@ -782,7 +822,7 @@ const Popup = ({
                 {/* ---------------------------------------------------------------------------- */}
                 <Amount
                   selectedMarketData={selectedMarketData}
-                  handleInput={(val?: number) => setAmount(val ?? 0)}
+                  handleInput={(val?: number) => setAmount(val)}
                   amount={amount}
                   max={parseFloat(balanceData?.formatted ?? '0')}
                   symbol={balanceData?.symbol ?? ''}
@@ -795,11 +835,16 @@ const Popup = ({
                   className={`flex w-full items-center justify-between mb-2 text-xs text-white/50 `}
                 >
                   <span className={``}>CURRENTLY BORROWING</span>
-                  <span className={`font-bold pl-2`}>
-                    {selectedMarketData.borrowBalanceNative.toFixed(
-                      parseInt(selectedMarketData.underlyingDecimals.toString())
-                    ) ?? '0.00'}
-                    {/* this will be dynamic */}
+                  <span className={`flex font-bold pl-2`}>
+                    {`${borrowBalanceFrom}`}
+                    <span className="mx-1">{`->`}</span>
+                    <ResultHandler
+                      isLoading={isLoadingUpdatedAssets}
+                      width="16"
+                      height="16"
+                    >
+                      {borrowBalanceTo}
+                    </ResultHandler>
                   </span>
                 </div>
                 <div

diff --git a/packages/ui/app/globals.css b/packages/ui/app/globals.css
@@ -27,6 +27,36 @@
     -webkit-appearance: none;
     appearance: none;
   }
+
+  .amount-field {
+    color: #fff;
+  }
+  .amount-field::-webkit-input-placeholder {
+    /* WebKit, Blink, Edge */
+    color: rgb(255 255 255 / 0.5);
+  }
+  .amount-field:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: rgb(255 255 255 / 0.5);
+    opacity: 1;
+  }
+  .amount-field::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: rgb(255 255 255 / 0.5);
+    opacity: 1;
+  }
+  .amount-field:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgb(255 255 255 / 0.5);
+  }
+  .amount-field::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: rgb(255 255 255 / 0.5);
+  }
+  .amount-field::placeholder {
+    /* Most modern browsers support this now. */
+    color: rgb(255 255 255 / 0.5);
+  }
 }
 
 @media (prefers-color-scheme: dark) {