Canonical ux improvements

.changeset/sweet-planes-attend.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Improvements on the canonical fallback ux

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

@@ -71,7 +71,7 @@ const SwapRouteSelector: FC<Props> = ({
             color="gray"
           >
             <Text style="subtitle2">
-              {externalLiquidtySelected ? 'Standard' : 'Relay'}
+              {externalLiquidtySelected ? 'Native' : 'Relay'}
             </Text>
             {supportsExternalLiquidity || externalLiquidtySelected ? (
               <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
@@ -118,7 +118,7 @@ const SwapRouteSelector: FC<Props> = ({
         </DropdownMenuItem>
         {supportsExternalLiquidity || externalLiquidtySelected ? (
           <DropdownMenuItem
-            aria-label={'Standard Bridge'}
+            aria-label={'Native Bridge'}
             onClick={() => {
               setOpen(false)
               onExternalLiquidityChange(true)
@@ -148,7 +148,7 @@ const SwapRouteSelector: FC<Props> = ({
               }}
             />
             <Flex direction="column">
-              <Text style="subtitle2">Standard</Text>
+              <Text style="subtitle2">Native</Text>
               <Text style="body3" color="subtle">
                 Standard time (&#62;2m), unlimited transaction capacity
               </Text>

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -831,23 +831,27 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                   />
                   {isCapacityExceededError && supportsExternalLiquidity ? (
                     <Flex css={{ mt: '6px', gap: '3' }}>
-                      <Button
-                        color="white"
-                        onClick={() => {
-                          if (maxCapacityFormatted) {
-                            setAmountInputValue(maxCapacityFormatted)
-                          } else {
-                            console.error('Missing max capacity')
-                          }
-                          onAnalyticEvent?.(
-                            EventNames.CTA_SET_MAX_CAPACITY_CLICKED
-                          )
-                        }}
-                      >
-                        Set to {maxCapacityFormatted} {toToken?.symbol}
-                      </Button>
+                      {maxCapacityFormatted != '0' ? (
+                        <Button
+                          color="white"
+                          css={{ flexGrow: '1', justifyContent: 'center' }}
+                          onClick={() => {
+                            if (maxCapacityFormatted) {
+                              setAmountInputValue(maxCapacityFormatted)
+                            } else {
+                              console.error('Missing max capacity')
+                            }
+                            onAnalyticEvent?.(
+                              EventNames.CTA_SET_MAX_CAPACITY_CLICKED
+                            )
+                          }}
+                        >
+                          Set to {maxCapacityFormatted} {toToken?.symbol}
+                        </Button>
+                      ) : null}
                       <Button
                         color="primary"
+                        css={{ flexGrow: '1', justifyContent: 'center' }}
                         onClick={() => {
                           setUseExternalLiquidity(true)
                           onAnalyticEvent?.(EventNames.CTA_SWITCH_ROUTE_CLICKED)

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

@@ -6,7 +6,8 @@ import {
   useRelayClient,
   useDebounceState,
   useWalletAddress,
-  useDisconnected
+  useDisconnected,
+  usePreviousValueChange
 } from '../../hooks/index.js'
 import type { Address } from 'viem'
 import { formatUnits, isAddress, parseUnits } from 'viem'
@@ -518,7 +519,7 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
       ? fetchQuoteDataErrorMessage.match(/(\d+)/)?.[0]
       : undefined
   const maxCapacityFormatted = maxCapacityWei
-    ? formatBN(BigInt(maxCapacityWei), 5, toToken?.decimals ?? 18)
+    ? formatBN(BigInt(maxCapacityWei), 2, toToken?.decimals ?? 18)
     : undefined
 
   let ctaCopy: string = context || 'Swap'
@@ -589,6 +590,16 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     }
   }
 
+  usePreviousValueChange(
+    isCapacityExceededError && supportsExternalLiquidity,
+    !isFetchingPrice && !externalLiquiditySupport.isFetching,
+    (capacityExceeded) => {
+      if (capacityExceeded) {
+        onAnalyticEvent?.(EventNames.CTA_MAX_CAPACITY_PROMPTED)
+      }
+    }
+  )
+
   return (
     <>
       {children({

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

@@ -1,5 +1,5 @@
 import { type Execute } from '@reservoir0x/relay-sdk'
-import { type FC } from 'react'
+import { useEffect, type FC } from 'react'
 import { Box, Flex, Text } from '../primitives/index.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
@@ -71,7 +71,7 @@ export const WidgetErrorWell: FC<Props> = ({
           <Text style="subtitle3" css={{ color: 'amber12' }}>
             Due to high demand, only {maxCapacity} {currency.symbol} can be
             bridged instantly. Set to max instant capacity or switch to the
-            standard route for unlimited capacity.
+            native route for unlimited capacity.
           </Text>
         </Flex>
       )

packages/ui/src/constants/events.ts

@@ -16,6 +16,7 @@ export const EventNames = {
   SWAP_ROUTE_SELECTED: 'SWAP_ROUTE_SELECTED',
   CTA_SET_MAX_CAPACITY_CLICKED: 'CTA_SET_MAX_CAPACITY_CLICKED',
   CTA_SWITCH_ROUTE_CLICKED: 'CTA_SWITCH_ROUTE_CLICKED',
+  CTA_MAX_CAPACITY_PROMPTED: 'CTA_MAX_CAPACITY_PROMPTED',
   WALLET_SELECTOR_SELECT: 'WALLET_SELECTOR_SELECT',
   WALLET_SELECTOR_OPEN: 'WALLET_SELECTOR_OPEN',
   WALLET_SELECTOR_CLOSE: 'WALLET_SELECTOR_CLOSE',

packages/ui/src/hooks/index.ts

@@ -6,6 +6,7 @@ import useDebounceState from './useDebounceState.js'
 import useDuneBalances from './useDuneBalances.js'
 import useWalletAddress from './useWalletAddress.js'
 import useDisconnected from './useDisconnected.js'
+import usePreviousValueChange from './usePreviousValueChange.js'
 
 export {
   useMounted,
@@ -15,5 +16,6 @@ export {
   useDebounceState,
   useDuneBalances,
   useWalletAddress,
-  useDisconnected
+  useDisconnected,
+  usePreviousValueChange
 }

packages/ui/src/hooks/usePreviousValueChange.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react'
+
+export default <T>(
+  value: T,
+  enabled: boolean,
+  onChange: (value: T) => void
+) => {
+  const ref = useRef<T>()
+
+  useEffect(() => {
+    if (enabled && ref.current !== value) {
+      ref.current = value
+      onChange(value)
+    }
+  }, [value, enabled, onChange])
+
+  return ref.current
+}