From e63ed2f8e71758e9fcf33519e2c7a09b47b6037b Mon Sep 17 00:00:00 2001
From: Jay <lygm1062@gmail.com>
Date: Mon, 25 Mar 2024 14:49:16 +0800
Subject: [PATCH] Improve information display (#679)

* refactor: allways display information

* refactor: update information text color

* refactor: remove No-relayer prompt

* refactor: remove information title

* refactor: improve transfer modal ui

* refactor: transfer limit alert

* refactor: improve scrollbar

* refactor: improve scrollbar of WithdrawableLiquiditiesSelect
---
 src/app/globals.css                           |  8 +++-----
 src/components/chain-select.tsx               |  2 +-
 src/components/modals/transfer-modal-v2.tsx   |  6 +++---
 src/components/record-detail.tsx              |  2 +-
 src/components/transfer-amount-input.tsx      | 11 +++++++++--
 src/components/transfer-amount-section.tsx    |  3 +++
 src/components/transfer-chain-select.tsx      |  2 +-
 .../transfer-information-section.tsx          | 19 +++++++------------
 src/components/transfer-information.tsx       | 18 +++---------------
 src/components/transfer-v2.tsx                | 19 +++++++++----------
 src/components/user.tsx                       |  2 +-
 .../withdrawable-liquidities-select.tsx       |  6 +++++-
 12 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 3ddeb3348..f28d9c613 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,18 +26,16 @@ body {
     rgb(var(--background-start-rgb));
 } */
 
-@layer base {
-  ::-webkit-scrollbar {
+@layer components {
+  .app-scrollbar::-webkit-scrollbar {
     width: 6px;
   }
-  ::-webkit-scrollbar-thumb {
+  .app-scrollbar::-webkit-scrollbar-thumb {
     border-radius: 10px;
     box-shadow: inset 0 0 5x rgba(0, 0, 0, 0.2);
     background: hsla(0, 0%, 100%, 0.4);
   }
-}
 
-@layer components {
   /* Layout */
   .app-header {
     @apply h-[64px];
diff --git a/src/components/chain-select.tsx b/src/components/chain-select.tsx
index 6737670c5..a89a209a6 100644
--- a/src/components/chain-select.tsx
+++ b/src/components/chain-select.tsx
@@ -26,7 +26,7 @@ export default function ChainSelect({
   return (
     <Select
       labelClassName={`gap-small rounded-medium flex items-center justify-between transition active:translate-y-1 ${className}`}
-      childClassName={`bg-inner flex flex-col rounded-medium max-h-60 overflow-y-auto border border-component ${
+      childClassName={`bg-inner flex flex-col rounded-medium max-h-60 overflow-y-auto border border-component app-scrollbar ${
         compact ? "py-small" : "p-medium"
       }`}
       label={
diff --git a/src/components/modals/transfer-modal-v2.tsx b/src/components/modals/transfer-modal-v2.tsx
index 769af6eda..34b51f3c1 100644
--- a/src/components/modals/transfer-modal-v2.tsx
+++ b/src/components/modals/transfer-modal-v2.tsx
@@ -119,11 +119,11 @@ function SourceTarget({
   address?: Address | null;
 }) {
   return chain && token ? (
-    <div className="flex items-center justify-between rounded-2xl bg-inner p-3 lg:rounded-3xl lg:p-5">
+    <div className="flex items-center justify-between rounded-xl bg-inner p-3 lg:rounded-2xl lg:p-large">
       {/* Left */}
       <div className="flex items-center gap-medium">
         <Image width={36} height={36} alt="Chain" src={getChainLogoSrc(chain.logo)} className="shrink-0 rounded-full" />
-        <div className="flex flex-col items-start">
+        <div className="flex flex-col items-start gap-1">
           <span className="text-base font-extrabold text-white">{chain.name}</span>
           <span className="hidden text-sm font-bold text-white/50 lg:inline">{address}</span>
           {address ? (
@@ -146,7 +146,7 @@ function SourceTarget({
 
 function Information({ fee, bridge }: { fee?: { value: bigint; token: Token } | null; bridge?: BaseBridge | null }) {
   return (
-    <div className="flex flex-col gap-small rounded-2xl bg-inner p-3 lg:rounded-3xl lg:p-5">
+    <div className="flex flex-col gap-small rounded-xl bg-inner p-3 lg:rounded-2xl lg:p-large">
       <Item
         label="Transaction Fee"
         value={fee ? `${formatBalance(fee.value, fee.token.decimals, { precision: 6 })} ${fee.token.symbol}` : null}
diff --git a/src/components/record-detail.tsx b/src/components/record-detail.tsx
index a1e03e7ad..edfc2acbb 100644
--- a/src/components/record-detail.tsx
+++ b/src/components/record-detail.tsx
@@ -52,7 +52,7 @@ export default function RecordDetail(props: Props) {
         <h3 className="text-lg font-medium text-white">Transaction Detail</h3>
         <CountdownRefresh onClick={refetch} />
       </div>
-      <div className="mt-5 overflow-x-auto">
+      <div className="app-scrollbar mt-5 overflow-x-auto">
         <div className="relative flex min-w-max flex-col gap-medium rounded-large bg-component px-7 py-medium">
           {/* loading */}
           <ComponentLoading loading={loading} className="rounded-large bg-black/30" />
diff --git a/src/components/transfer-amount-input.tsx b/src/components/transfer-amount-input.tsx
index 86b69b337..adb9aeb2d 100644
--- a/src/components/transfer-amount-input.tsx
+++ b/src/components/transfer-amount-input.tsx
@@ -14,6 +14,7 @@ interface Value {
 
 interface Props {
   min?: bigint;
+  max?: bigint;
   token: Token;
   value: Value;
   balance: bigint;
@@ -25,6 +26,7 @@ interface Props {
 
 export default function TransferAmountInput({
   min,
+  max,
   chain,
   token,
   value,
@@ -53,7 +55,12 @@ export default function TransferAmountInput({
             alert = "* Insufficient";
           } else if (typeof min === "bigint" && parsed.value < min) {
             valid = false;
-            alert = `* Minimum: ${formatBalance(min, token.decimals)}`;
+            alert = `* Minimum transfer amount: ${formatBalance(min, token.decimals)}`;
+          } else if (typeof max === "bigint" && max < parsed.value) {
+            valid = false;
+            alert = `* Maximum transfer amount: ${formatBalance(max, token.decimals, {
+              precision: 6,
+            })}`;
           }
           onChange({ valid, alert, ...parsed });
         }
@@ -61,7 +68,7 @@ export default function TransferAmountInput({
         onChange({ valid, alert, ...parsed });
       }
     },
-    [min, balance, token, onChange],
+    [min, max, balance, token.decimals, onChange],
   );
 
   useEffect(() => {
diff --git a/src/components/transfer-amount-section.tsx b/src/components/transfer-amount-section.tsx
index 4e64e1ef9..ca7e5aa51 100644
--- a/src/components/transfer-amount-section.tsx
+++ b/src/components/transfer-amount-section.tsx
@@ -11,6 +11,7 @@ interface Amount {
 
 interface Props {
   min?: bigint;
+  max?: string;
   token: Token;
   amount: Amount;
   balance: bigint;
@@ -22,6 +23,7 @@ interface Props {
 
 export default function TransferAmountSection({
   min,
+  max,
   token,
   chain,
   amount,
@@ -34,6 +36,7 @@ export default function TransferAmountSection({
     <TransferSection titleText="Amount" alert={amount.alert}>
       <TransferAmountInput
         min={min}
+        max={max ? BigInt(max) : undefined}
         loading={loading}
         token={token}
         chain={chain}
diff --git a/src/components/transfer-chain-select.tsx b/src/components/transfer-chain-select.tsx
index 6f803cbe5..43faaf632 100644
--- a/src/components/transfer-chain-select.tsx
+++ b/src/components/transfer-chain-select.tsx
@@ -61,7 +61,7 @@ export default function TransferChainSelect({
               />
             </div>
             <div className="mx-auto h-[1px] w-5 bg-white/50" />
-            <div className="flex max-h-[17.2rem] flex-col overflow-y-auto">
+            <div className="app-scrollbar flex max-h-[17.2rem] flex-col overflow-y-auto">
               {chainOptions
                 .filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
                 .map((option) => (
diff --git a/src/components/transfer-information-section.tsx b/src/components/transfer-information-section.tsx
index d68127fb7..717c50614 100644
--- a/src/components/transfer-information-section.tsx
+++ b/src/components/transfer-information-section.tsx
@@ -31,17 +31,13 @@ export default function TransferInformationSection({
   return (
     <TransferSection>
       <TransferInformation
-        transferLimit={
-          hasRelayer
-            ? {
-                loading: loadingRelayData,
-                value: relayData?.sortedLnBridgeRelayInfos?.transferLimit
-                  ? BigInt(relayData.sortedLnBridgeRelayInfos.transferLimit)
-                  : undefined,
-                token: sourceToken,
-              }
-            : undefined
-        }
+        transferLimit={{
+          loading: loadingRelayData,
+          value: relayData?.sortedLnBridgeRelayInfos?.transferLimit
+            ? BigInt(relayData.sortedLnBridgeRelayInfos.transferLimit)
+            : undefined,
+          token: sourceToken,
+        }}
         estimatedTime={hasRelayer ? { loading: loadingRelayData, value: bridge?.formatEstimateTime() } : undefined}
         transactionFee={{
           warning: fee ? undefined : "Liquidity is not enough",
@@ -52,7 +48,6 @@ export default function TransferInformationSection({
         dailyLimit={
           dailyLimit ? { loading: loadingDailyLimit, value: dailyLimit.limit, token: dailyLimit.token } : undefined
         }
-        hasRelayer={hasRelayer}
       />
     </TransferSection>
   );
diff --git a/src/components/transfer-information.tsx b/src/components/transfer-information.tsx
index d983e9d0f..9ec138834 100644
--- a/src/components/transfer-information.tsx
+++ b/src/components/transfer-information.tsx
@@ -9,17 +9,10 @@ interface Props {
   transferLimit?: { loading: boolean; value?: bigint; token?: Token };
   dailyLimit?: { loading: boolean; value?: bigint; token?: Token };
   estimatedTime?: { loading: boolean; value?: string };
-  hasRelayer: boolean;
 }
 
-export default function TransferInformation({
-  transactionFee,
-  transferLimit,
-  dailyLimit,
-  estimatedTime,
-  hasRelayer,
-}: Props) {
-  return hasRelayer ? (
+export default function TransferInformation({ transactionFee, transferLimit, dailyLimit, estimatedTime }: Props) {
+  return (
     <div className="flex flex-col gap-small px-medium lg:px-3">
       {estimatedTime ? (
         <Row name="Estimated Arrival Time" loading={estimatedTime.loading} value={estimatedTime.value} />
@@ -46,11 +39,6 @@ export default function TransferInformation({
         <Row name="Daily Limit" loading={dailyLimit.loading} value={dailyLimit.value} token={dailyLimit.token} />
       ) : null}
     </div>
-  ) : (
-    <div className="flex items-center justify-center gap-medium py-2">
-      <Image width={18} height={18} alt="Warning" src="/images/warning.svg" />
-      <span className="text-sm font-extrabold text-white/95">No Relayer</span>
-    </div>
   );
 }
 
@@ -104,5 +92,5 @@ function Row({
 }
 
 function Text({ value }: { value: string }) {
-  return <span className="text-base font-extrabold text-white/95">{value}</span>;
+  return <span className="text-base font-extrabold text-white">{value}</span>;
 }
diff --git a/src/components/transfer-v2.tsx b/src/components/transfer-v2.tsx
index 6a41964b3..17be22b40 100644
--- a/src/components/transfer-v2.tsx
+++ b/src/components/transfer-v2.tsx
@@ -261,9 +261,18 @@ function Component() {
           token={sourceToken}
           chain={sourceChain}
           min={bridge?.getCrossInfo()?.min}
+          max={relayData?.sortedLnBridgeRelayInfos?.transferLimit}
           onChange={setAmount}
           onRefresh={refreshBalance}
         />
+        <TransferInformationSection
+          bridge={bridge}
+          sourceToken={sourceToken}
+          relayData={relayData}
+          loadingRelayData={loadingRelayData}
+          fee={fee}
+          loadingFee={loadingFee}
+        />
         <Button
           className="inline-flex h-12 items-center justify-center rounded-[1.25rem]"
           kind="primary"
@@ -273,16 +282,6 @@ function Component() {
         >
           <span className="text-base font-extrabold text-white">{actionText}</span>
         </Button>
-        {deferredAmount.input ? (
-          <TransferInformationSection
-            bridge={bridge}
-            sourceToken={sourceToken}
-            relayData={relayData}
-            loadingRelayData={loadingRelayData}
-            fee={fee}
-            loadingFee={loadingFee}
-          />
-        ) : null}
       </div>
 
       <TransferModalV2
diff --git a/src/components/user.tsx b/src/components/user.tsx
index 8d7f1393b..c9820a620 100644
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@@ -78,7 +78,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
 
       <div className="mx-5 h-[1px] bg-white/10" />
 
-      <div className="relative flex max-h-[40vh] flex-col overflow-y-auto px-2 lg:max-h-[72vh]">
+      <div className="app-scrollbar relative flex max-h-[40vh] flex-col overflow-y-auto px-2 lg:max-h-[72vh]">
         {balances
           .filter(({ balance }) => 0 < balance)
           .map((balance) => (
diff --git a/src/components/withdrawable-liquidities-select.tsx b/src/components/withdrawable-liquidities-select.tsx
index 0d392acc6..c2f01d35b 100644
--- a/src/components/withdrawable-liquidities-select.tsx
+++ b/src/components/withdrawable-liquidities-select.tsx
@@ -21,7 +21,11 @@ export default function WithdrawableLiquiditiesSelect({
   onLoadMore = () => undefined,
 }: Props) {
   return (
-    <div className={`relative max-h-60 rounded-medium bg-inner ${loading ? "overflow-y-hidden" : "overflow-y-auto"}`}>
+    <div
+      className={`relative max-h-60 rounded-medium bg-inner ${
+        loading ? "overflow-y-hidden" : "app-scrollbar overflow-y-auto"
+      }`}
+    >
       <ComponentLoading loading={loading} className="bg-black/30" />
 
       <div className="flex flex-col py-2">