@orderly.network/ui-transfer 2.8.3-alpha.0 → 2.8.4-alpha.0

package/dist/index.d.mts

@@ -168,6 +168,7 @@ declare const useDepositFormScript: (options: DepositFormScriptOptions) => {
     targetQuantity: string;
     targetQuantityLoading: boolean;
     tokenBalances: Record<string, string>;
+    isLoggedIn: boolean;
 };
 type UseDepositFeeReturn = ReturnType<typeof useDepositFee>;
 declare function useDepositFee(options: {
@@ -194,7 +195,8 @@ declare const useWithdrawFormScript: (options: WithdrawFormScriptOptions) => {
     setWithdrawTo: react.Dispatch<react.SetStateAction<WithdrawTo>>;
     currentLTV: number;
     nextLTV: number;
-    warningMessage: string | undefined;
+    warningMessage: string;
+    isLoggedIn: boolean;
     toAccountId: string;
     setToAccountId: react.Dispatch<react.SetStateAction<string>>;
     onTransfer: () => void;
@@ -222,7 +224,6 @@ declare const useWithdrawFormScript: (options: WithdrawFormScriptOptions) => {
     currentChain: CurrentChain | null;
     onChainChange: (chain: API.NetworkInfos) => Promise<void>;
     onWithdraw: () => Promise<void>;
-    chainVaultBalance: number | null;
     fee: number;
     crossChainWithdraw: boolean;
     crossChainTrans: boolean;
@@ -233,8 +234,7 @@ declare const useWithdrawFormScript: (options: WithdrawFormScriptOptions) => {
     onSettlePnl: () => Promise<any>;
     brokerName: string;
     qtyGreaterThanMaxAmount: boolean;
-    qtyGreaterThanVault: boolean;
-    vaultBalanceList: API.VaultBalance[] | undefined;
+    vaultBalanceList: API.VaultBalance[];
 };
 
 type WithdrawFormProps = WithdrawFormScriptReturn;
@@ -436,6 +436,7 @@ type ChainSelectProps = {
     onValueChange: (chain: API.NetworkInfos) => Promise<void>;
     wrongNetwork: boolean;
     loading?: boolean;
+    disabled?: boolean;
 };
 declare const ChainSelect: React.FC<ChainSelectProps>;
 

package/dist/index.d.ts

@@ -168,6 +168,7 @@ declare const useDepositFormScript: (options: DepositFormScriptOptions) => {
     targetQuantity: string;
     targetQuantityLoading: boolean;
     tokenBalances: Record<string, string>;
+    isLoggedIn: boolean;
 };
 type UseDepositFeeReturn = ReturnType<typeof useDepositFee>;
 declare function useDepositFee(options: {
@@ -194,7 +195,8 @@ declare const useWithdrawFormScript: (options: WithdrawFormScriptOptions) => {
     setWithdrawTo: react.Dispatch<react.SetStateAction<WithdrawTo>>;
     currentLTV: number;
     nextLTV: number;
-    warningMessage: string | undefined;
+    warningMessage: string;
+    isLoggedIn: boolean;
     toAccountId: string;
     setToAccountId: react.Dispatch<react.SetStateAction<string>>;
     onTransfer: () => void;
@@ -222,7 +224,6 @@ declare const useWithdrawFormScript: (options: WithdrawFormScriptOptions) => {
     currentChain: CurrentChain | null;
     onChainChange: (chain: API.NetworkInfos) => Promise<void>;
     onWithdraw: () => Promise<void>;
-    chainVaultBalance: number | null;
     fee: number;
     crossChainWithdraw: boolean;
     crossChainTrans: boolean;
@@ -233,8 +234,7 @@ declare const useWithdrawFormScript: (options: WithdrawFormScriptOptions) => {
     onSettlePnl: () => Promise<any>;
     brokerName: string;
     qtyGreaterThanMaxAmount: boolean;
-    qtyGreaterThanVault: boolean;
-    vaultBalanceList: API.VaultBalance[] | undefined;
+    vaultBalanceList: API.VaultBalance[];
 };
 
 type WithdrawFormProps = WithdrawFormScriptReturn;
@@ -436,6 +436,7 @@ type ChainSelectProps = {
     onValueChange: (chain: API.NetworkInfos) => Promise<void>;
     wrongNetwork: boolean;
     loading?: boolean;
+    disabled?: boolean;
 };
 declare const ChainSelect: React.FC<ChainSelectProps>;
 

package/dist/index.js

@@ -341,7 +341,7 @@ var TransferVerticalIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 var ChainSelect = (props) => {
-  const { chains, value, wrongNetwork, loading } = props;
+  const { chains, value, wrongNetwork, loading, disabled } = props;
   const [open, setOpen] = react.useState(false);
   const { t } = i18n.useTranslation();
   const selectable = wrongNetwork || chains?.length > 1;
@@ -372,7 +372,7 @@ var ChainSelect = (props) => {
       intensity: 500,
       className: ui.cn(
         "oui-rounded-t-xl oui-rounded-b-sm oui-border oui-border-line",
-        selectable ? "oui-cursor-pointer" : "oui-cursor-auto"
+        disabled ? "oui-cursor-not-allowed" : selectable ? "oui-cursor-pointer" : "oui-cursor-auto"
       ),
       height: 54,
       px: 3,
@@ -428,7 +428,7 @@ var ChainSelect = (props) => {
     );
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open: selectable ? open : false, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { disabled, asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.DropdownMenuContent,
       {
@@ -4667,6 +4667,7 @@ var useDepositFormScript = (options2) => {
     quantity,
     maxQuantity
   });
+  const isLoggedIn = uiConnector.useAuthGuard();
   const {
     collateralRatio: collateralRatio2,
     collateralContributionQuantity,
@@ -4819,7 +4820,8 @@ var useDepositFormScript = (options2) => {
     warningMessage,
     targetQuantity,
     targetQuantityLoading,
-    tokenBalances
+    tokenBalances,
+    isLoggedIn
   };
 };
 function useDepositFee(options2) {
@@ -5027,7 +5029,8 @@ var DepositForm = (props) => {
             value: currentChain,
             onValueChange: onChainChange,
             wrongNetwork,
-            loading: settingChain
+            loading: settingChain,
+            disabled: !props.isLoggedIn
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5045,7 +5048,8 @@ var DepositForm = (props) => {
             hintMessage,
             fetchBalance,
             tokenBalances: props.tokenBalances,
-            "data-testId": "oui-testid-deposit-dialog-quantity-input"
+            "data-testId": "oui-testid-deposit-dialog-quantity-input",
+            disabled: !props.isLoggedIn
           }
         )
       ] }),
@@ -5081,7 +5085,8 @@ var DepositForm = (props) => {
           loading: targetQuantityLoading,
           classNames: {
             root: "oui-mt-3 oui-border-transparent focus-within:oui-outline-transparent"
-          }
+          },
+          disabled: !props.isLoggedIn
         }
       ),
       renderContent()
@@ -5183,11 +5188,13 @@ var TextAreaInput = (props) => {
           "oui-border oui-border-line focus:oui-border-primary-light",
           status === "error" && "oui-border-danger-light focus-within:oui-border-danger-light focus:oui-border-danger-light",
           status === "warning" && "oui-border-warning-light focus-within:oui-border-warning-light focus:oui-border-warning-light",
+          "disabled:oui-cursor-not-allowed",
           props.className
         ),
         rows: 1,
         value,
-        onChange: handleChange
+        onChange: handleChange,
+        disabled: props.disabled
       }
     ),
     hintMessage && message
@@ -5443,22 +5450,9 @@ var WithdrawAction = (props) => {
   ) });
 };
 var WithdrawWarningMessage = (props) => {
-  const {
-    chainVaultBalance,
-    currentChain,
-    crossChainTrans,
-    tokenName,
-    qtyGreaterThanMaxAmount,
-    qtyGreaterThanVault
-  } = props;
+  const { crossChainTrans, qtyGreaterThanMaxAmount } = props;
   const { t } = i18n.useTranslation();
   const { state } = hooks.useAccount();
-  const chainName = react.useMemo(() => {
-    if (currentChain && currentChain.info && currentChain.info.network_infos) {
-      return currentChain.info.network_infos.name;
-    }
-    return void 0;
-  }, [currentChain]);
   const renderContent = () => {
     if (state.status === types.AccountStatusEnum.NotConnected) {
       return null;
@@ -5469,13 +5463,6 @@ var WithdrawWarningMessage = (props) => {
     if (qtyGreaterThanMaxAmount) {
       return t("transfer.insufficientBalance");
     }
-    if (qtyGreaterThanVault) {
-      return t("transfer.withdraw.vaultWarning", {
-        tokenName,
-        chainName,
-        balance: chainVaultBalance
-      });
-    }
     return props.message;
   };
   const content = renderContent();
@@ -5505,15 +5492,13 @@ var WithdrawForm = (props) => {
     currentChain,
     fee,
     settingChain,
-    chainVaultBalance,
     crossChainTrans,
     checkIsBridgeless,
     withdrawTo,
     sourceTokens,
     onSourceTokenChange,
     vaultBalanceList,
-    qtyGreaterThanMaxAmount,
-    qtyGreaterThanVault
+    qtyGreaterThanMaxAmount
   } = props;
   const { t } = i18n.useTranslation();
   const internalWithdrawPanel = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5531,7 +5516,8 @@ var WithdrawForm = (props) => {
             value: props.toAccountId,
             onChange: props.setToAccountId,
             status: props.toAccountIdInputStatus,
-            hintMessage: props.toAccountIdHintMessage
+            hintMessage: props.toAccountIdHintMessage,
+            disabled: !props.isLoggedIn
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { my: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 54, children: t("transfer.withdraw.accountId.tips") }) })
@@ -5558,7 +5544,8 @@ var WithdrawForm = (props) => {
               hintMessage: props.hintMessage,
               vaultBalanceList,
               testId: "oui-testid-withdraw-dialog-quantity-input",
-              displayType: "vaultBalance"
+              displayType: "vaultBalance",
+              disabled: !props.isLoggedIn
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5600,7 +5587,7 @@ var WithdrawForm = (props) => {
                   ui.TabPanel,
                   {
                     title: t("transfer.web3Wallet.my"),
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { size: "xs", name: props.walletName ?? "" }),
+                    icon: props.walletName ? /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { size: "xs", name: props.walletName ?? "" }) : void 0,
                     value: "wallet" /* Wallet */,
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5610,7 +5597,8 @@ var WithdrawForm = (props) => {
                           value: currentChain,
                           onValueChange: props.onChainChange,
                           wrongNetwork: props.wrongNetwork,
-                          loading: settingChain
+                          loading: settingChain,
+                          disabled: !props.isLoggedIn
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5649,11 +5637,7 @@ var WithdrawForm = (props) => {
           WithdrawWarningMessage,
           {
             checkIsBridgeless,
-            chainVaultBalance,
-            currentChain,
             crossChainTrans,
-            tokenName: sourceToken?.symbol,
-            qtyGreaterThanVault,
             qtyGreaterThanMaxAmount,
             message: props.warningMessage
           }
@@ -5718,6 +5702,87 @@ var useSettlePnl = (options2) => {
     onSettlePnl
   };
 };
+var cctpSupportedChains = [43114, 1, 137, 42161, 10, 8453, 1329];
+var cctpSupportedTokens = ["USDC"];
+var useVaultBalance = (inputs) => {
+  const {
+    currentChain,
+    sourceToken,
+    withdrawTo,
+    quantity,
+    qtyGreaterThanMaxAmount
+  } = inputs;
+  const { t } = i18n.useTranslation();
+  const { data: vaultBalanceData } = hooks.useQuery(
+    `/v1/public/vault_balance`,
+    {
+      revalidateOnMount: true,
+      errorRetryCount: 3
+    }
+  );
+  const vaultBalanceList = react.useMemo(() => {
+    if (withdrawTo === "accountId" /* Account */ || !currentChain || !Array.isArray(vaultBalanceData)) {
+      return [];
+    }
+    return vaultBalanceData.filter(
+      (item) => Number.parseInt(item.chain_id) === currentChain?.id
+    );
+  }, [vaultBalanceData, currentChain, withdrawTo]);
+  const chainVaultBalance = react.useMemo(() => {
+    const vaultBalance = vaultBalanceList?.find(
+      (item) => item.token === sourceToken?.symbol
+    );
+    return vaultBalance?.balance;
+  }, [vaultBalanceList, sourceToken]);
+  const qtyGreaterThanVault = react.useMemo(() => {
+    if (!quantity || Number.isNaN(quantity) || !chainVaultBalance || Number.isNaN(chainVaultBalance)) {
+      return false;
+    }
+    return new utils.Decimal(quantity).gt(chainVaultBalance);
+  }, [quantity, chainVaultBalance, withdrawTo]);
+  const crossChainWithdraw = react.useMemo(() => {
+    const canCCTP = currentChain?.id && sourceToken?.symbol ? cctpSupportedChains.includes(currentChain?.id) && cctpSupportedTokens.includes(sourceToken?.symbol) : false;
+    return qtyGreaterThanVault && canCCTP && !qtyGreaterThanMaxAmount;
+  }, [qtyGreaterThanVault, qtyGreaterThanMaxAmount, currentChain, sourceToken]);
+  const chainName = react.useMemo(() => {
+    if (currentChain && currentChain.info && currentChain.info.network_infos) {
+      return currentChain.info.network_infos.name;
+    }
+    return "";
+  }, [currentChain]);
+  const vaultBalanceMessage = react.useMemo(() => {
+    if (qtyGreaterThanVault && !crossChainWithdraw && chainName) {
+      return t("transfer.withdraw.vaultWarning", {
+        tokenName: sourceToken?.symbol,
+        chainName,
+        balance: chainVaultBalance
+      });
+    }
+    return "";
+  }, [
+    qtyGreaterThanVault,
+    crossChainWithdraw,
+    chainName,
+    sourceToken,
+    chainVaultBalance
+  ]);
+  const vaultBalanceListFilterCCTP = react.useMemo(() => {
+    if (cctpSupportedChains.includes(currentChain?.id)) {
+      return vaultBalanceList?.filter(
+        (item) => !cctpSupportedTokens.includes(item.token)
+      );
+    }
+    return vaultBalanceList;
+  }, [vaultBalanceList, currentChain]);
+  return {
+    vaultBalanceList: vaultBalanceListFilterCCTP,
+    // chainVaultBalance,
+    // if the token is cross chain withdraw supported, the qtyGreaterThanVault will be false
+    qtyGreaterThanVault: qtyGreaterThanVault && !crossChainWithdraw,
+    crossChainWithdraw,
+    vaultBalanceMessage
+  };
+};
 function useWithdrawAccountId(options2) {
   const { token, quantity, setQuantity, close, setLoading, decimals } = options2;
   const { t } = i18n.useTranslation();
@@ -5932,19 +5997,13 @@ var useWithdrawFormScript = (options2) => {
     filter: (chain) => chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
   });
   const [linkDeviceStorage] = hooks.useLocalStorage("orderly_link_device", {});
-  const { data: vaultBalanceList } = hooks.useQuery(
-    `/v1/public/vault_balance`,
-    {
-      revalidateOnMount: true,
-      errorRetryCount: 3
-    }
-  );
   const {
     connectedChain,
     wallet,
     setChain: switchChain,
     settingChain
   } = hooks.useWalletConnector();
+  const isLoggedIn = uiConnector.useAuthGuard();
   const currentChain = react.useMemo(() => {
     const chainId = connectedChain ? utils.praseChainIdToNumber(connectedChain.id) : Number.parseInt(linkDeviceStorage?.chainId);
     if (!chainId) {
@@ -5985,6 +6044,27 @@ var useWithdrawFormScript = (options2) => {
     token: sourceToken?.symbol,
     decimals: sourceToken?.token_decimal
   });
+  const qtyGreaterThanMaxAmount = react.useMemo(() => {
+    if (!quantity || Number.isNaN(quantity)) {
+      return false;
+    }
+    if (!maxAmount || Number.isNaN(maxAmount)) {
+      return true;
+    }
+    return new utils.Decimal(quantity).gt(maxAmount);
+  }, [quantity, maxAmount]);
+  const {
+    vaultBalanceList,
+    qtyGreaterThanVault,
+    crossChainWithdraw,
+    vaultBalanceMessage
+  } = useVaultBalance({
+    currentChain,
+    sourceToken,
+    withdrawTo,
+    quantity,
+    qtyGreaterThanMaxAmount
+  });
   const withdrawAccountIdState = useWithdrawAccountId({
     token: sourceToken?.symbol,
     decimals: sourceToken?.token_decimal,
@@ -6035,47 +6115,6 @@ var useWithdrawFormScript = (options2) => {
     },
     [currentChain, switchChain, findByChainId, t]
   );
-  const chainVaultBalance = react.useMemo(() => {
-    if (!Array.isArray(vaultBalanceList) || !currentChain) {
-      return null;
-    }
-    const vaultBalance = vaultBalanceList.find(
-      (item) => Number.parseInt(item.chain_id) === currentChain?.id && item.token === sourceToken?.symbol
-    );
-    if (vaultBalance) {
-      return vaultBalance.balance;
-    }
-    return null;
-  }, [chains, currentChain, vaultBalanceList, sourceToken?.symbol]);
-  const qtyGreaterThanMaxAmount = react.useMemo(() => {
-    if (!quantity || Number.isNaN(quantity)) {
-      return false;
-    }
-    if (!maxAmount || Number.isNaN(maxAmount)) {
-      return true;
-    }
-    return new utils.Decimal(quantity).gt(maxAmount);
-  }, [quantity, maxAmount]);
-  const qtyGreaterThanVault = react.useMemo(() => {
-    if (withdrawTo === "accountId" /* Account */) {
-      return false;
-    }
-    if (!quantity || Number.isNaN(quantity)) {
-      return false;
-    }
-    if (!chainVaultBalance || Number.isNaN(chainVaultBalance)) {
-      return true;
-    }
-    return new utils.Decimal(quantity).gt(chainVaultBalance);
-  }, [quantity, chainVaultBalance, withdrawTo]);
-  const crossChainWithdraw = react.useMemo(() => {
-    if (chainVaultBalance !== null) {
-      const qtyNum = Number.parseFloat(quantity);
-      const value = qtyNum > chainVaultBalance && qtyNum <= maxAmount;
-      return value;
-    }
-    return false;
-  }, [quantity, maxAmount, chainVaultBalance]);
   const onWithdraw = async () => {
     if (loading) {
       return;
@@ -6157,7 +6196,6 @@ var useWithdrawFormScript = (options2) => {
       }
     }
   }, [quantity, maxAmount, unsettledPnL, crossChainTrans]);
-  const disabled = crossChainTrans || !quantity || Number(quantity) === 0 || ["error", "warning"].includes(inputStatus) || withdrawTo === "accountId" /* Account */ && !withdrawAccountIdState.toAccountId || qtyGreaterThanMaxAmount || qtyGreaterThanVault || !!minAmountWarningMessage;
   react.useEffect(() => {
     setCrossChainTrans(!!assetHistory?.length);
   }, [assetHistory?.length]);
@@ -6179,15 +6217,8 @@ var useWithdrawFormScript = (options2) => {
     token: sourceToken?.symbol,
     quantity
   });
-  const warningMessage = ltvWarningMessage || minAmountWarningMessage;
-  const filteredVaultBalanceList = react.useMemo(() => {
-    if (withdrawTo === "accountId" /* Account */) {
-      return [];
-    }
-    return vaultBalanceList?.filter(
-      (item) => Number.parseInt(item.chain_id) === currentChain?.id
-    );
-  }, [vaultBalanceList, currentChain, withdrawTo]);
+  const disabled = crossChainTrans || !quantity || Number(quantity) === 0 || ["error", "warning"].includes(inputStatus) || withdrawTo === "accountId" /* Account */ && !withdrawAccountIdState.toAccountId || qtyGreaterThanMaxAmount || !!minAmountWarningMessage || qtyGreaterThanVault;
+  const warningMessage = minAmountWarningMessage || ltvWarningMessage || vaultBalanceMessage;
   return {
     walletName,
     address,
@@ -6210,7 +6241,6 @@ var useWithdrawFormScript = (options2) => {
     currentChain,
     onChainChange,
     onWithdraw,
-    chainVaultBalance,
     fee,
     crossChainWithdraw,
     crossChainTrans,
@@ -6221,14 +6251,14 @@ var useWithdrawFormScript = (options2) => {
     onSettlePnl,
     brokerName,
     qtyGreaterThanMaxAmount,
-    qtyGreaterThanVault,
-    vaultBalanceList: filteredVaultBalanceList,
+    vaultBalanceList,
     ...withdrawAccountIdState,
     withdrawTo,
     setWithdrawTo,
     currentLTV,
     nextLTV,
-    warningMessage
+    warningMessage,
+    isLoggedIn
   };
 };
 var WithdrawFormWidget = (props) => {