Remove canonical logic and ui (#863)

* Remove canonical logic and ui

* feat: changeset

Author: ted-palmer

.changeset/great-pears-call.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Remove canonical logic and ui

packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx

@@ -226,7 +226,6 @@ const InnerDepositAddressModal: FC<InnerDepositAddressModalProps> = ({
             seconds={seconds ?? 0}
             onOpenChange={onOpenChange}
             timeEstimate={timeEstimate?.formattedTime}
-            isCanonical={false}
             details={details}
             isLoadingTransaction={isLoadingTransaction}
             requestId={requestId}

packages/ui/src/components/common/TransactionModal/TransactionModal.tsx

@@ -28,8 +28,6 @@ type TransactionModalProps = {
   fromToken?: Token
   toToken?: Token
   address?: Address | string
-  isCanonical?: boolean
-  useExternalLiquidity: boolean
   slippageTolerance?: string
   wallet?: AdaptedWallet
   linkedWallets?: LinkedWallet[]
@@ -59,9 +57,7 @@ export const TransactionModal: FC<TransactionModalProps> = (
     address,
     fromToken,
     toToken,
-    useExternalLiquidity,
     slippageTolerance,
-    isCanonical,
     wallet,
     onOpenChange,
     onAnalyticEvent,
@@ -131,7 +127,6 @@ export const TransactionModal: FC<TransactionModalProps> = (
           currency_out_address: details?.currencyOut?.currency?.address,
           currency_out_decimals: toToken?.decimals,
           currency_out_usd: details?.currencyOut?.amountUsd,
-          is_canonical: useExternalLiquidity,
           quote_id: quoteId,
           txHashes: steps
             ?.map((step) => {
@@ -165,7 +160,6 @@ export const TransactionModal: FC<TransactionModalProps> = (
           <InnerTransactionModal
             address={address}
             onAnalyticEvent={onAnalyticEvent}
-            isCanonical={isCanonical}
             {...transactionModalProps}
             {...rendererProps}
           />
@@ -200,7 +194,6 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
   seconds,
   onAnalyticEvent,
   timeEstimate,
-  isCanonical,
   fromChain,
   toChain,
   isLoadingTransaction,
@@ -302,7 +295,6 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
             seconds={seconds ?? 0}
             onOpenChange={onOpenChange}
             timeEstimate={timeEstimate?.formattedTime}
-            isCanonical={isCanonical}
             details={details}
             isLoadingTransaction={isLoadingTransaction}
             requestId={requestId}

packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx

@@ -40,7 +40,6 @@ type SwapSuccessStepProps = {
   seconds: number
   fillTime: string
   timeEstimate?: string
-  isCanonical?: boolean
   details?: Execute['details'] | null
   isLoadingTransaction?: boolean
   onOpenChange: (open: boolean) => void
@@ -59,7 +58,6 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   fillTime,
   seconds,
   timeEstimate,
-  isCanonical,
   details,
   isLoadingTransaction,
   onOpenChange,
@@ -122,16 +120,11 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   // Show delayed screen when:
   // 1. Bitcoin as origin: Immediately (no status check needed, tx takes 10+ mins)
   // 2. Bitcoin as destination: When status reaches 'submitted'
-  // 3. Canonical routes: When time estimate exceeds polling timeout
+
   const isDelayedTx =
     isBitcoinOrigin ||
     (isBitcoinDestination &&
-      (currentCheckStatus === 'submitted' ||
-        currentCheckStatus === 'success')) ||
-    (isCanonical &&
-      timeEstimateMs >
-        (relayClient?.maxPollingAttemptsBeforeTimeout ?? 30) *
-          (relayClient?.pollingInterval ?? 5000))
+      (currentCheckStatus === 'submitted' || currentCheckStatus === 'success'))
 
   // Bitcoin transactions typically take 10+ minutes for confirmation
   const estimatedMinutes =

packages/ui/src/components/widgets/FeeBreakdown.tsx

@@ -1,23 +1,18 @@
 import { useState, type FC } from 'react'
-import { Box, Button, Flex, Pill, Text } from '../primitives/index.js'
+import { Box, Button, Flex, Text } from '../primitives/index.js'
 import type { ChildrenProps } from './SwapWidgetRenderer.js'
 import { formatBN, formatDollar } from '../../utils/numbers.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGasPump } from '@fortawesome/free-solid-svg-icons/faGasPump'
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown'
 import FetchingQuoteLoader from '../widgets/FetchingQuoteLoader.js'
-import SwapRouteSelector from '../widgets/SwapRouteSelector.js'
 import type { RelayChain } from '@relayprotocol/relay-sdk'
 import {
   CollapsibleContent,
   CollapsibleRoot,
   CollapsibleTrigger
 } from '../primitives/Collapsible.js'
-import {
-  faChevronRight,
-  faClock,
-  faInfoCircle
-} from '@fortawesome/free-solid-svg-icons'
+import { faClock, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import { PriceImpactTooltip } from './PriceImpactTooltip.js'
 import { getSlippageRating, ratingToColor } from '../../utils/slippage.js'
 import Tooltip from '../primitives/Tooltip.js'
@@ -31,10 +26,6 @@ type Props = Pick<
   | 'toToken'
   | 'fromToken'
   | 'timeEstimate'
-  | 'supportsExternalLiquidity'
-  | 'useExternalLiquidity'
-  | 'setUseExternalLiquidity'
-  | 'canonicalTimeEstimate'
 > & {
   toChain?: RelayChain
   isSingleChainLocked?: boolean
@@ -56,11 +47,7 @@ const FeeBreakdown: FC<Props> = ({
   toToken,
   fromToken,
   toChain,
-  supportsExternalLiquidity,
-  useExternalLiquidity,
-  setUseExternalLiquidity,
   timeEstimate,
-  canonicalTimeEstimate,
   isSingleChainLocked,
   fromChainWalletVMSupported,
   isAutoSlippage,
@@ -176,38 +163,6 @@ const FeeBreakdown: FC<Props> = ({
     }
   ]
 
-  if (!isSingleChainLocked && fromChainWalletVMSupported) {
-    breakdown.unshift({
-      title: 'Route',
-      value: (
-        <SwapRouteSelector
-          chain={toChain}
-          supportsExternalLiquidity={supportsExternalLiquidity}
-          externalLiquidtySelected={useExternalLiquidity}
-          onExternalLiquidityChange={(selected) => {
-            setUseExternalLiquidity(selected)
-          }}
-          canonicalTimeEstimate={canonicalTimeEstimate?.formattedTime}
-          error={error}
-          trigger={
-            <Button color="ghost" size="none">
-              <Flex css={{ gap: '2', alignItems: 'center' }}>
-                <Text style="subtitle2">
-                  {useExternalLiquidity ? 'Native' : 'Relay'}
-                </Text>
-                {supportsExternalLiquidity || useExternalLiquidity ? (
-                  <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
-                    <FontAwesomeIcon icon={faChevronRight} width={14} />
-                  </Box>
-                ) : null}
-              </Flex>
-            </Button>
-          }
-        />
-      )
-    })
-  }
-
   if (!feeBreakdown) {
     if (isFetchingQuote) {
       return (
@@ -403,11 +358,6 @@ const FeeBreakdown: FC<Props> = ({
             }}
           >
             {breakdown.map((item) => {
-              const showNativeBridgeWarning =
-                item.title === 'Estimated time' &&
-                useExternalLiquidity &&
-                timeEstimate?.time &&
-                timeEstimate?.time > 86400
               return (
                 <React.Fragment key={item.title}>
                   <Flex
@@ -417,33 +367,13 @@ const FeeBreakdown: FC<Props> = ({
                   >
                     <Text
                       style="subtitle2"
-                      color={
-                        showNativeBridgeWarning ? 'warningSecondary' : 'subtle'
-                      }
+                      color={'subtle'}
                       css={{ alignSelf: 'flex-start' }}
                     >
                       {item.title}
                     </Text>
                     {item.value}
                   </Flex>
-                  {showNativeBridgeWarning ? (
-                    <Flex
-                      align="center"
-                      css={{
-                        gap: '2',
-                        py: '2',
-                        px: '3',
-                        backgroundColor: 'amber2',
-                        borderRadius: 12
-                      }}
-                    >
-                      <Text style="subtitle3" css={{ color: 'amber12' }}>
-                        Native bridge routes are expected to take{' '}
-                        {timeEstimate.formattedTime} but could be longer due to
-                        unexpected delays
-                      </Text>
-                    </Flex>
-                  ) : null}
                 </React.Fragment>
               )
             })}