Support CCTP and noble auto deposits on testnet (#180)

* Support CCTP and noble auto deposits on testnet

* slippage

* fix fees

* update isCctp, and comments

* bump packages

* cctp.json

* Bump abacus

* fix error

* fix loading button

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -18,7 +18,6 @@ import type { EvmAddress } from '@/constants/wallets';
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
-import { NATIVE_TOKEN_ADDRESS, useSquid } from '@/hooks/useSquid';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -38,6 +37,7 @@ import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
+import { getNobleChainId, NATIVE_TOKEN_ADDRESS } from '@/lib/squid';
 import { log } from '@/lib/telemetry';
 import { parseWalletError } from '@/lib/wallet';
 
@@ -69,6 +69,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     summary,
     errors: routeErrors,
     errorMessage: routeErrorMessage,
+    isCctp,
   } = useSelector(getTransferInputs, shallowEqual) || {};
   const chainId = chainIdStr ? parseInt(chainIdStr) : undefined;
 
@@ -84,7 +85,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   );
 
   const [fromAmount, setFromAmount] = useState('');
-  const [slippage, setSlippage] = useState(0.01); // 1% slippage
+  const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 1% slippage
   const debouncedAmount = useDebounce<string>(fromAmount, 500);
 
   // Async Data
@@ -99,6 +100,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const debouncedAmountBN = MustBigNumber(debouncedAmount);
   const balanceBN = MustBigNumber(balance);
 
+  useEffect(() => setSlippage(isCctp ? 0 : 0.01), [isCctp]);
+
   useEffect(() => {
     const hasInvalidInput =
       debouncedAmountBN.isNaN() || debouncedAmountBN.lte(0) || debouncedAmountBN.gt(balanceBN);
@@ -250,11 +253,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         if (txHash) {
           addTransferNotification({
             txHash: txHash,
-            toChainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId,
+            toChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
             fromChainId: chainIdStr || undefined,
             toAmount: summary?.usdcSize || undefined,
             triggeredAt: Date.now(),
-            notificationStatus: NotificationStatus.Triggered,
+            isCctp,
           });
           abacusStateManager.clearTransferInputValues();
           setFromAmount('');

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -109,6 +109,8 @@ export const DepositButtonAndReceipt = ({
     ? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS })
     : stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS });
 
+  const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
+
   const submitButtonReceipt = [
     {
       key: 'equity',
@@ -158,9 +160,7 @@ export const DepositButtonAndReceipt = ({
     {
       key: 'total-fees',
       label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
-      value: typeof summary?.bridgeFee === 'number' && typeof summary?.gasFee === 'number' && (
-        <Output type={OutputType.Fiat} value={summary?.bridgeFee + summary?.gasFee} />
-      ),
+      value: <Output type={OutputType.Fiat} value={totalFees} />,
       subitems: feeSubitems,
     },
     {
@@ -183,7 +183,12 @@ export const DepositButtonAndReceipt = ({
           type={OutputType.Text}
           value={stringGetter({
             key: STRING_KEYS.X_MINUTES_LOWERCASED,
-            params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
+            params: {
+              X:
+                summary?.estimatedRouteDuration < 60
+                  ? '< 1'
+                  : Math.round(summary?.estimatedRouteDuration / 60),
+            },
           })}
         />
       ),

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -58,11 +58,6 @@ export const WithdrawForm = () => {
   const { sendSquidWithdraw } = useSubaccount();
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
 
-  // User input
-  const [withdrawAmount, setWithdrawAmount] = useState('');
-  const [slippage, setSlippage] = useState(0.01); // 0.1% slippage
-  const debouncedAmount = useDebounce<string>(withdrawAmount, 500);
-
   const {
     requestPayload,
     token,
@@ -71,8 +66,15 @@ export const WithdrawForm = () => {
     resources,
     errors: routeErrors,
     errorMessage: routeErrorMessage,
+    isCctp
   } = useSelector(getTransferInputs, shallowEqual) || {};
 
+  // User input
+  const [withdrawAmount, setWithdrawAmount] = useState('');
+  const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 0.1% slippage
+  const debouncedAmount = useDebounce<string>(withdrawAmount, 500);
+
+
   const isValidAddress = toAddress && isAddress(toAddress);
 
   const toToken = useMemo(
@@ -89,6 +91,8 @@ export const WithdrawForm = () => {
     [freeCollateral?.current]
   );
 
+  useEffect(() => setSlippage(isCctp ? 0 : 0.01), [isCctp]);
+
   useEffect(() => {
     abacusStateManager.setTransferValue({
       field: TransferInputField.type,

src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx

@@ -89,14 +89,14 @@ export const WithdrawButtonAndReceipt = ({
   const showSubitemsToggle = showFeeBreakdown
     ? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS })
     : stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS });
+  
+  const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
 
   const submitButtonReceipt = [
     {
       key: 'total-fees',
       label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
-      value: typeof summary?.bridgeFee === 'number' && typeof summary?.gasFee === 'number' && (
-        <Output type={OutputType.Fiat} value={summary?.bridgeFee + summary?.gasFee} />
-      ),
+      value: <Output type={OutputType.Fiat} value={totalFees} />,
       subitems: feeSubitems,
     },
     {
@@ -165,7 +165,12 @@ export const WithdrawButtonAndReceipt = ({
           type={OutputType.Text}
           value={stringGetter({
             key: STRING_KEYS.X_MINUTES_LOWERCASED,
-            params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
+            params: {
+              X:
+                summary?.estimatedRouteDuration < 60
+                  ? '< 1'
+                  : Math.round(summary?.estimatedRouteDuration / 60),
+            },
           })}
         />
       ),

src/views/notifications/TransferStatusNotification/index.tsx

@@ -44,6 +44,7 @@ export const TransferStatusNotification = ({
 
   // @ts-ignore status.errors is not in the type definition but can be returned
   const error = status?.errors?.length ? status?.errors[0] : status?.error;
+  const hasError = error && Object.keys(error).length !== 0;
 
   const updateSecondsLeft = useCallback(() => {
     const fromChainEta = (status?.fromChain?.chainData?.estimatedRouteDuration || 0) * 1000;
@@ -87,7 +88,7 @@ export const TransferStatusNotification = ({
           },
         })}
       </Styled.Status>
-      {error && (
+      {hasError && (
         <AlertMessage type={AlertType.Error}>
           {stringGetter({
             key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
@@ -112,7 +113,7 @@ export const TransferStatusNotification = ({
         ) : (
           <Styled.BridgingStatus>
             {content}
-            {!isToast && status?.squidTransactionStatus !== 'success' && (
+            {!isToast && status?.squidTransactionStatus !== 'success' && !hasError && (
               <Styled.TransferStatusSteps status={status} type={type} />
             )}
           </Styled.BridgingStatus>
@@ -120,8 +121,7 @@ export const TransferStatusNotification = ({
       }
       slotAction={
         isToast &&
-        status &&
-        !error && (
+        status && (
           <Styled.Trigger
             isOpen={open}
             onClick={(e: MouseEvent) => {