feat(synapse-interface): Adds Hyperliquid bridge & deposit support

packages/synapse-interface/components/HyperliquidDepositInfo.tsx

@@ -0,0 +1,45 @@
+import Image from 'next/image'
+import { CheckCircleIcon } from '@heroicons/react/outline'
+
+import { ARBITRUM, HYPERLIQUID } from '@/constants/chains/master'
+
+export const HyperliquidDepositInfo = ({
+  fromChainId,
+  isOnArbitrum,
+  hasDepositedOnHyperliquid,
+}) => {
+  return (
+    <div className="flex flex-col p-2 mb-2 space-y-1 text-sm border rounded border-zinc-300 dark:border-separator">
+      <div className="flex items-center mb-1 space-x-2 ">
+        <Image
+          loading="lazy"
+          src={HYPERLIQUID.chainImg}
+          alt="Switch Network"
+          width="16"
+          height="16"
+          className="w-4 h-4 max-w-fit"
+        />
+
+        <div>Hyperliquid Deposit</div>
+      </div>
+      <div className="flex items-center space-x-2">
+        <CheckCircleIcon
+          className={`w-3 h-3 ${
+            fromChainId === ARBITRUM.id && isOnArbitrum
+              ? 'text-green-500'
+              : 'text-gray-500'
+          }`}
+        />
+        <div>Bridge to Arbitrum</div>
+      </div>
+      <div className="flex items-center space-x-2">
+        <CheckCircleIcon
+          className={`w-3 h-3 ${
+            hasDepositedOnHyperliquid ? 'text-green-500' : 'text-gray-500'
+          }`}
+        />
+        <div>Deposit to Hyperliquid</div>
+      </div>
+    </div>
+  )
+}

packages/synapse-interface/components/StateManagedBridge/HyperliquidDepositButton.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useState } from 'react'
+import { useAccount, useAccountEffect, useSwitchChain } from 'wagmi'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useTranslations } from 'next-intl'
+import { Address, erc20Abi } from 'viem'
+import {
+  simulateContract,
+  waitForTransactionReceipt,
+  writeContract,
+} from '@wagmi/core'
+
+import { wagmiConfig } from '@/wagmiConfig'
+import { useAppDispatch } from '@/store/hooks'
+import { useWalletState } from '@/slices/wallet/hooks'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { TransactionButton } from '@/components/buttons/TransactionButton'
+import { useBridgeValidations } from './hooks/useBridgeValidations'
+import { USDC } from '@/constants/tokens/bridgeable'
+import { ARBITRUM, HYPERLIQUID } from '@/constants/chains/master'
+import { stringToBigInt } from '@/utils/bigint/format'
+import { fetchAndStoreSingleNetworkPortfolioBalances } from '@/slices/portfolio/hooks'
+import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
+import { addPendingBridgeTransaction } from '@/slices/transactions/actions'
+import { getUnixTimeMinutesFromNow } from '@/utils/time'
+
+const HYPERLIQUID_DEPOSIT_ADDRESS = '0x2Df1c51E09aECF9cacB7bc98cB1742757f163dF7'
+
+const approve = async (address: Address, amount: bigint) => {
+  const { request } = await simulateContract(wagmiConfig, {
+    chainId: ARBITRUM.id,
+    address: USDC.addresses[ARBITRUM.id],
+    abi: erc20Abi,
+    functionName: 'approve',
+    args: [address, amount],
+  })
+
+  const hash = await writeContract(wagmiConfig, request)
+
+  const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
+
+  return txReceipt
+}
+
+const deposit = async (amount: bigint) => {
+  try {
+    const { request } = await simulateContract(wagmiConfig, {
+      chainId: ARBITRUM.id,
+      address: USDC.addresses[ARBITRUM.id],
+      abi: erc20Abi,
+      functionName: 'transfer',
+      args: [HYPERLIQUID_DEPOSIT_ADDRESS, amount],
+    })
+
+    const hash = await writeContract(wagmiConfig, request)
+
+    const txReceipt = await waitForTransactionReceipt(wagmiConfig, { hash })
+
+    return txReceipt
+  } catch (error) {
+    console.error('Confirmation error:', error)
+    throw error
+  }
+}
+
+export const HyperliquidTransactionButton = ({
+  isTyping,
+  hasDepositedOnHyperliquid,
+  setHasDepositedOnHyperliquid,
+}) => {
+  const [isApproved, setIsApproved] = useState(false)
+  const [isApproving, setIsApproving] = useState(false)
+  const [isDepositing, setIsDepositing] = useState(false)
+
+  const { address } = useAccount()
+
+  const dispatch = useAppDispatch()
+  const { openConnectModal } = useConnectModal()
+  const [isConnected, setIsConnected] = useState(false)
+
+  const { isConnected: isConnectedInit } = useAccount()
+  const { chains, switchChain } = useSwitchChain()
+
+  const { fromToken, fromChainId, debouncedFromValue } = useBridgeState()
+
+  const { isWalletPending } = useWalletState()
+
+  const { hasValidInput, hasSufficientBalance, onSelectedChain } =
+    useBridgeValidations()
+
+  const depositingMinimumAmount = Number(debouncedFromValue) >= 5
+
+  const t = useTranslations('Bridge')
+
+  const amount = stringToBigInt(
+    debouncedFromValue,
+    fromToken.decimals[fromChainId]
+  )
+
+  const handleApprove = async () => {
+    setIsApproving(true)
+
+    try {
+      await approve(address, amount)
+      setIsApproved(true)
+    } catch (error) {
+      console.error('Approval error:', error)
+    } finally {
+      setIsApproving(false)
+    }
+  }
+
+  const handleDeposit = async () => {
+    setIsDepositing(true)
+    const currentTimestamp: number = getUnixTimeMinutesFromNow(0)
+    try {
+      const txReceipt = await deposit(amount)
+
+      setHasDepositedOnHyperliquid(true)
+      setIsApproved(false)
+      segmentAnalyticsEvent(`[Hyperliquid Deposit]`, {
+        inputAmount: debouncedFromValue,
+      })
+      dispatch(
+        fetchAndStoreSingleNetworkPortfolioBalances({
+          address,
+          chainId: ARBITRUM.id,
+        })
+      )
+      dispatch(
+        addPendingBridgeTransaction({
+          id: currentTimestamp,
+          originChain: ARBITRUM,
+          originToken: fromToken,
+          originValue: debouncedFromValue,
+          destinationChain: HYPERLIQUID,
+          destinationToken: undefined,
+          transactionHash: txReceipt.transactionHash,
+          timestamp: undefined,
+          isSubmitted: false,
+          estimatedTime: undefined,
+          bridgeModuleName: undefined,
+          destinationAddress: undefined,
+          routerAddress: undefined,
+        })
+      )
+    } catch (error) {
+      console.error('Deposit error:', error)
+    } finally {
+      setIsDepositing(false)
+    }
+  }
+
+  useAccountEffect({
+    onDisconnect() {
+      setIsConnected(false)
+    },
+  })
+
+  useEffect(() => {
+    setIsConnected(isConnectedInit)
+  }, [isConnectedInit])
+
+  const isButtonDisabled =
+    isTyping ||
+    isApproving ||
+    isDepositing ||
+    !depositingMinimumAmount ||
+    isWalletPending ||
+    !hasValidInput ||
+    (isConnected && !hasSufficientBalance)
+
+  let buttonProperties
+
+  if (isConnected && !hasSufficientBalance) {
+    buttonProperties = {
+      label: t('Insufficient balance'),
+      onClick: null,
+    }
+  } else if (!depositingMinimumAmount) {
+    buttonProperties = {
+      label: '5 USDC Minimum',
+      onClick: null,
+    }
+  } else if (!isConnected && hasValidInput) {
+    buttonProperties = {
+      label: t('Connect Wallet to Bridge'),
+      onClick: openConnectModal,
+    }
+  } else if (!onSelectedChain && hasValidInput) {
+    buttonProperties = {
+      label: t('Switch to {chainName}', {
+        chainName: chains.find((c) => c.id === fromChainId)?.name,
+      }),
+      onClick: () => switchChain({ chainId: fromChainId }),
+      pendingLabel: t('Switching chains'),
+    }
+  } else if (!isApproved && hasValidInput) {
+    buttonProperties = {
+      onClick: handleApprove,
+      label: t('Approve {symbol}', { symbol: fromToken?.symbol }),
+      pendingLabel: t('Approving'),
+    }
+  } else {
+    buttonProperties = {
+      onClick: handleDeposit,
+      label: t('Deposit {symbol}', { symbol: fromToken?.symbol }),
+      pendingLabel: t('Depositing'),
+    }
+  }
+
+  return (
+    buttonProperties && (
+      <>
+        <div className="flex flex-col w-full">
+          <TransactionButton
+            {...buttonProperties}
+            disabled={isButtonDisabled}
+            chainId={fromChainId}
+          />
+        </div>
+      </>
+    )
+  )
+}

packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx

@@ -16,6 +16,7 @@ import { useWalletState } from '@/slices/wallet/hooks'
 import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
 import { useBridgeValidations } from './hooks/useBridgeValidations'
 import { useTranslations } from 'next-intl'
+import { ARBITRUM, HYPERLIQUID } from '@/constants/chains/master'
 
 interface OutputContainerProps {
   isQuoteStale: boolean
@@ -26,6 +27,7 @@ export const OutputContainer = ({ isQuoteStale }: OutputContainerProps) => {
   const { bridgeQuote, isLoading } = useBridgeQuoteState()
   const { showDestinationAddress } = useBridgeDisplayState()
   const { hasValidInput, hasValidQuote } = useBridgeValidations()
+  const { debouncedFromValue, fromChainId, toChainId } = useBridgeState()
 
   const showValue = useMemo(() => {
     if (!hasValidInput) {
@@ -43,7 +45,7 @@ export const OutputContainer = ({ isQuoteStale }: OutputContainerProps) => {
     <BridgeSectionContainer>
       <div className="flex items-center justify-between">
         <ToChainSelector />
-        {showDestinationAddress ? (
+        {showDestinationAddress && toChainId !== HYPERLIQUID.id ? (
           <DestinationAddressInput connectedAddress={address} />
         ) : null}
       </div>
@@ -52,7 +54,11 @@ export const OutputContainer = ({ isQuoteStale }: OutputContainerProps) => {
         <ToTokenSelector />
         <AmountInput
           disabled={true}
-          showValue={showValue}
+          showValue={
+            fromChainId === ARBITRUM.id && toChainId === HYPERLIQUID.id
+              ? debouncedFromValue
+              : showValue
+          }
           isLoading={isLoading}
           className={inputClassName}
         />

packages/synapse-interface/components/StateManagedBridge/hooks/useBridgeValidations.ts

@@ -8,6 +8,7 @@ import { BridgeQuoteState } from '@/slices/bridgeQuote/reducer'
 import { EMPTY_BRIDGE_QUOTE } from '@/constants/bridge'
 import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
 import { useBridgeSelections } from './useBridgeSelections'
+import { ARBITRUM, HYPERLIQUID } from '@/constants/chains/master'
 
 export const useBridgeValidations = () => {
   const { chainId } = useAccount()
@@ -66,7 +67,7 @@ export const useBridgeValidations = () => {
       debouncedFromValue,
       fromChainId,
       fromToken,
-      toChainId,
+      toChainId === HYPERLIQUID.id ? ARBITRUM.id : toChainId,
       toToken
     )
   }, [debouncedFromValue, fromChainId, fromToken, toChainId, toToken])

packages/synapse-interface/components/_Transaction/_Transaction.tsx

@@ -20,6 +20,7 @@ import { RightArrow } from '@/components/icons/RightArrow'
 import { Address } from 'viem'
 import { useIsTxReverted } from './helpers/useIsTxReverted'
 import { useTxRefundStatus } from './helpers/useTxRefundStatus'
+import { HYPERLIQUID } from '@/constants/chains/master'
 
 interface _TransactionProps {
   connectedAddress: string
@@ -185,13 +186,15 @@ export const _Transaction = ({
                 iconUrl={originChain?.explorerImg}
               />
             )}
-            {!isNull(destExplorerAddressLink) && !isTxReverted && (
-              <MenuItem
-                text={destExplorerName}
-                link={destExplorerAddressLink}
-                iconUrl={destinationChain?.explorerImg}
-              />
-            )}
+            {destinationChain.id !== HYPERLIQUID.id &&
+              !isNull(destExplorerAddressLink) &&
+              !isTxReverted && (
+                <MenuItem
+                  text={destExplorerName}
+                  link={destExplorerAddressLink}
+                  iconUrl={destinationChain?.explorerImg}
+                />
+              )}
             <MenuItem
               text={t('Contact Support (Discord)')}
               link="https://discord.gg/synapseprotocol"

packages/synapse-interface/components/_Transaction/_Transactions.tsx

@@ -7,6 +7,7 @@ import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
 import { ALL_TOKENS } from '@/constants/tokens/master'
 import { CHAINS_BY_ID } from '@/constants/chains'
 import { useWalletState } from '@/slices/wallet/hooks'
+import { HYPERLIQUID } from '@/constants/chains/master'
 
 /** TODO: Update naming once refactoring of previous Activity/Tx flow is done */
 export const _Transactions = ({
@@ -61,7 +62,11 @@ export const _Transactions = ({
               kappa={tx?.kappa}
               timestamp={tx.timestamp}
               currentTime={currentTime}
-              status={tx.status}
+              status={
+                tx.destinationChain.id === HYPERLIQUID.id
+                  ? 'completed'
+                  : tx.status
+              }
               disabled={isWalletPending}
             />
           )