@orderly.network/ui-transfer 2.8.3 → 2.8.4

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { modal, useScreen, useModal, SimpleSheet, SimpleDialog, registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, toast, Box, ExtensionSlot, ExtensionPositionEnum, textVariants, Flex, Text, Button, cn, Divider, Spinner, Select, Input, inputFormatter, AlertDialog, EditIcon, Icon, TokenIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, Tooltip, ExclamationFillIcon, CloseCircleFillIcon, CheckedCircleFillIcon, ChainIcon, Badge, CloseIcon } from '@orderly.network/ui';
 import { forwardRef, useState, useMemo, useEffect, useCallback, useRef, createElement } from 'react';
-import { useEventEmitter, useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useBoolean, useAccountInstance, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useTokensInfo, usePositionStream, useIndexPricesStream, useDeposit, useAssetsHistory, useChains, useQuery, useWithdraw, useMemoizedFn, useWalletTopic, useTokenInfo, useIndexPrice, useInternalTransfer, useDebouncedCallback, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
+import { useEventEmitter, useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useBoolean, useAccountInstance, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useTokensInfo, usePositionStream, useIndexPricesStream, useDeposit, useAssetsHistory, useChains, useWithdraw, useMemoizedFn, useWalletTopic, useQuery, useTokenInfo, useIndexPrice, useInternalTransfer, useDebouncedCallback, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
 import { Decimal, zero, praseChainIdToNumber, int2hex, toNonExponential, isSolana } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { WS_WalletStatusEnum, AccountStatusEnum, ChainNamespace, AssetHistoryStatusEnum, AssetHistorySideEnum, Arbitrum, isNativeTokenChecker as isNativeTokenChecker$1, ABSTRACT_CHAIN_ID_MAP, nativeTokenAddress as nativeTokenAddress$1 } from '@orderly.network/types';
-import { AuthGuard } from '@orderly.network/ui-connector';
+import { AuthGuard, useAuthGuard } from '@orderly.network/ui-connector';
 import { useAppContext, useAppConfig } from '@orderly.network/react-app';
 import { ChainSelectorDialogId } from '@orderly.network/ui-chain-selector';
 import { account } from '@orderly.network/perp';
@@ -339,7 +339,7 @@ var TransferVerticalIcon = (props) => /* @__PURE__ */ jsx(
   }
 );
 var ChainSelect = (props) => {
-  const { chains, value, wrongNetwork, loading } = props;
+  const { chains, value, wrongNetwork, loading, disabled } = props;
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
   const selectable = wrongNetwork || chains?.length > 1;
@@ -370,7 +370,7 @@ var ChainSelect = (props) => {
       intensity: 500,
       className: 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,
@@ -426,7 +426,7 @@ var ChainSelect = (props) => {
     );
   });
   return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: selectable ? open : false, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { disabled, asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
       DropdownMenuContent,
       {
@@ -4665,6 +4665,7 @@ var useDepositFormScript = (options2) => {
     quantity,
     maxQuantity
   });
+  const isLoggedIn = useAuthGuard();
   const {
     collateralRatio: collateralRatio2,
     collateralContributionQuantity,
@@ -4817,7 +4818,8 @@ var useDepositFormScript = (options2) => {
     warningMessage,
     targetQuantity,
     targetQuantityLoading,
-    tokenBalances
+    tokenBalances,
+    isLoggedIn
   };
 };
 function useDepositFee(options2) {
@@ -5025,7 +5027,8 @@ var DepositForm = (props) => {
             value: currentChain,
             onValueChange: onChainChange,
             wrongNetwork,
-            loading: settingChain
+            loading: settingChain,
+            disabled: !props.isLoggedIn
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5043,7 +5046,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
           }
         )
       ] }),
@@ -5079,7 +5083,8 @@ var DepositForm = (props) => {
           loading: targetQuantityLoading,
           classNames: {
             root: "oui-mt-3 oui-border-transparent focus-within:oui-outline-transparent"
-          }
+          },
+          disabled: !props.isLoggedIn
         }
       ),
       renderContent()
@@ -5181,11 +5186,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
@@ -5441,22 +5448,9 @@ var WithdrawAction = (props) => {
   ) });
 };
 var WithdrawWarningMessage = (props) => {
-  const {
-    chainVaultBalance,
-    currentChain,
-    crossChainTrans,
-    tokenName,
-    qtyGreaterThanMaxAmount,
-    qtyGreaterThanVault
-  } = props;
+  const { crossChainTrans, qtyGreaterThanMaxAmount } = props;
   const { t } = useTranslation();
   const { state } = useAccount();
-  const chainName = useMemo(() => {
-    if (currentChain && currentChain.info && currentChain.info.network_infos) {
-      return currentChain.info.network_infos.name;
-    }
-    return void 0;
-  }, [currentChain]);
   const renderContent = () => {
     if (state.status === AccountStatusEnum.NotConnected) {
       return null;
@@ -5467,13 +5461,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();
@@ -5503,15 +5490,13 @@ var WithdrawForm = (props) => {
     currentChain,
     fee,
     settingChain,
-    chainVaultBalance,
     crossChainTrans,
     checkIsBridgeless,
     withdrawTo,
     sourceTokens,
     onSourceTokenChange,
     vaultBalanceList,
-    qtyGreaterThanMaxAmount,
-    qtyGreaterThanVault
+    qtyGreaterThanMaxAmount
   } = props;
   const { t } = useTranslation();
   const internalWithdrawPanel = /* @__PURE__ */ jsxs(
@@ -5529,7 +5514,8 @@ var WithdrawForm = (props) => {
             value: props.toAccountId,
             onChange: props.setToAccountId,
             status: props.toAccountIdInputStatus,
-            hintMessage: props.toAccountIdHintMessage
+            hintMessage: props.toAccountIdHintMessage,
+            disabled: !props.isLoggedIn
           }
         ),
         /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 54, children: t("transfer.withdraw.accountId.tips") }) })
@@ -5556,7 +5542,8 @@ var WithdrawForm = (props) => {
               hintMessage: props.hintMessage,
               vaultBalanceList,
               testId: "oui-testid-withdraw-dialog-quantity-input",
-              displayType: "vaultBalance"
+              displayType: "vaultBalance",
+              disabled: !props.isLoggedIn
             }
           ) }),
           /* @__PURE__ */ jsx(
@@ -5598,7 +5585,7 @@ var WithdrawForm = (props) => {
                   TabPanel,
                   {
                     title: t("transfer.web3Wallet.my"),
-                    icon: /* @__PURE__ */ jsx(WalletIcon, { size: "xs", name: props.walletName ?? "" }),
+                    icon: props.walletName ? /* @__PURE__ */ jsx(WalletIcon, { size: "xs", name: props.walletName ?? "" }) : void 0,
                     value: "wallet" /* Wallet */,
                     children: [
                       /* @__PURE__ */ jsx(
@@ -5608,7 +5595,8 @@ var WithdrawForm = (props) => {
                           value: currentChain,
                           onValueChange: props.onChainChange,
                           wrongNetwork: props.wrongNetwork,
-                          loading: settingChain
+                          loading: settingChain,
+                          disabled: !props.isLoggedIn
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -5647,11 +5635,7 @@ var WithdrawForm = (props) => {
           WithdrawWarningMessage,
           {
             checkIsBridgeless,
-            chainVaultBalance,
-            currentChain,
             crossChainTrans,
-            tokenName: sourceToken?.symbol,
-            qtyGreaterThanVault,
             qtyGreaterThanMaxAmount,
             message: props.warningMessage
           }
@@ -5716,6 +5700,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 } = useTranslation();
+  const { data: vaultBalanceData } = useQuery(
+    `/v1/public/vault_balance`,
+    {
+      revalidateOnMount: true,
+      errorRetryCount: 3
+    }
+  );
+  const vaultBalanceList = 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 = useMemo(() => {
+    const vaultBalance = vaultBalanceList?.find(
+      (item) => item.token === sourceToken?.symbol
+    );
+    return vaultBalance?.balance;
+  }, [vaultBalanceList, sourceToken]);
+  const qtyGreaterThanVault = useMemo(() => {
+    if (!quantity || Number.isNaN(quantity) || !chainVaultBalance || Number.isNaN(chainVaultBalance)) {
+      return false;
+    }
+    return new Decimal(quantity).gt(chainVaultBalance);
+  }, [quantity, chainVaultBalance, withdrawTo]);
+  const crossChainWithdraw = 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 = useMemo(() => {
+    if (currentChain && currentChain.info && currentChain.info.network_infos) {
+      return currentChain.info.network_infos.name;
+    }
+    return "";
+  }, [currentChain]);
+  const vaultBalanceMessage = useMemo(() => {
+    if (qtyGreaterThanVault && !crossChainWithdraw && chainName) {
+      return t("transfer.withdraw.vaultWarning", {
+        tokenName: sourceToken?.symbol,
+        chainName,
+        balance: chainVaultBalance
+      });
+    }
+    return "";
+  }, [
+    qtyGreaterThanVault,
+    crossChainWithdraw,
+    chainName,
+    sourceToken,
+    chainVaultBalance
+  ]);
+  const vaultBalanceListFilterCCTP = 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 } = useTranslation();
@@ -5930,19 +5995,13 @@ var useWithdrawFormScript = (options2) => {
     filter: (chain) => chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
   });
   const [linkDeviceStorage] = useLocalStorage("orderly_link_device", {});
-  const { data: vaultBalanceList } = useQuery(
-    `/v1/public/vault_balance`,
-    {
-      revalidateOnMount: true,
-      errorRetryCount: 3
-    }
-  );
   const {
     connectedChain,
     wallet,
     setChain: switchChain,
     settingChain
   } = useWalletConnector();
+  const isLoggedIn = useAuthGuard();
   const currentChain = useMemo(() => {
     const chainId = connectedChain ? praseChainIdToNumber(connectedChain.id) : Number.parseInt(linkDeviceStorage?.chainId);
     if (!chainId) {
@@ -5983,6 +6042,27 @@ var useWithdrawFormScript = (options2) => {
     token: sourceToken?.symbol,
     decimals: sourceToken?.token_decimal
   });
+  const qtyGreaterThanMaxAmount = useMemo(() => {
+    if (!quantity || Number.isNaN(quantity)) {
+      return false;
+    }
+    if (!maxAmount || Number.isNaN(maxAmount)) {
+      return true;
+    }
+    return new 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,
@@ -6033,47 +6113,6 @@ var useWithdrawFormScript = (options2) => {
     },
     [currentChain, switchChain, findByChainId, t]
   );
-  const chainVaultBalance = 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 = useMemo(() => {
-    if (!quantity || Number.isNaN(quantity)) {
-      return false;
-    }
-    if (!maxAmount || Number.isNaN(maxAmount)) {
-      return true;
-    }
-    return new Decimal(quantity).gt(maxAmount);
-  }, [quantity, maxAmount]);
-  const qtyGreaterThanVault = useMemo(() => {
-    if (withdrawTo === "accountId" /* Account */) {
-      return false;
-    }
-    if (!quantity || Number.isNaN(quantity)) {
-      return false;
-    }
-    if (!chainVaultBalance || Number.isNaN(chainVaultBalance)) {
-      return true;
-    }
-    return new Decimal(quantity).gt(chainVaultBalance);
-  }, [quantity, chainVaultBalance, withdrawTo]);
-  const crossChainWithdraw = 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;
@@ -6155,7 +6194,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;
   useEffect(() => {
     setCrossChainTrans(!!assetHistory?.length);
   }, [assetHistory?.length]);
@@ -6177,15 +6215,8 @@ var useWithdrawFormScript = (options2) => {
     token: sourceToken?.symbol,
     quantity
   });
-  const warningMessage = ltvWarningMessage || minAmountWarningMessage;
-  const filteredVaultBalanceList = 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,
@@ -6208,7 +6239,6 @@ var useWithdrawFormScript = (options2) => {
     currentChain,
     onChainChange,
     onWithdraw,
-    chainVaultBalance,
     fee,
     crossChainWithdraw,
     crossChainTrans,
@@ -6219,14 +6249,14 @@ var useWithdrawFormScript = (options2) => {
     onSettlePnl,
     brokerName,
     qtyGreaterThanMaxAmount,
-    qtyGreaterThanVault,
-    vaultBalanceList: filteredVaultBalanceList,
+    vaultBalanceList,
     ...withdrawAccountIdState,
     withdrawTo,
     setWithdrawTo,
     currentLTV,
     nextLTV,
-    warningMessage
+    warningMessage,
+    isLoggedIn
   };
 };
 var WithdrawFormWidget = (props) => {