address feedback

Author: 0xTxbi

demo/pages/ui/token/[[...params]].tsx

@@ -123,6 +123,8 @@ const TokenWidgetPage: NextPage = () => {
     if (!addressParam || !chainParam) {
       setUrlTokenAddress(undefined)
       setUrlTokenChainId(undefined)
+      setAddressInput('')
+      setChainInput('')
       return
     }
 
@@ -137,6 +139,10 @@ const TokenWidgetPage: NextPage = () => {
     if (!Number.isNaN(chainId)) {
       setUrlTokenAddress(decodedAddress)
       setUrlTokenChainId(chainId)
+      // Auto-populate form inputs with URL params
+      setAddressInput(decodedAddress)
+      setChainInput(chainId.toString())
+      setTokenNotFound(false)
     }
   }, [router.isReady, router.query.params])
 
@@ -231,6 +237,20 @@ const TokenWidgetPage: NextPage = () => {
     switchWallet.current = _switchWallet
   }, [_switchWallet])
 
+  // Check if token should have loaded but didn't (token not found)
+  useEffect(() => {
+    if (urlTokenAddress && urlTokenChainId && !fromToken && relayClient) {
+      // Wait a bit for the query to complete, then check if token was not found
+      const timer = setTimeout(() => {
+        if (!fromToken) {
+          setTokenNotFound(true)
+        }
+      }, 2000) // Wait 2 seconds for token query to complete
+
+      return () => clearTimeout(timer)
+    }
+  }, [urlTokenAddress, urlTokenChainId, fromToken, relayClient])
+
   useEffect(() => {
     const adaptWallet = async () => {
       try {
@@ -353,8 +373,8 @@ const TokenWidgetPage: NextPage = () => {
             setToToken={setToToken}
             fromToken={fromToken}
             setFromToken={setFromToken}
-            defaultToTokenAddress={urlTokenAddress}
-            defaultToTokenChainId={urlTokenChainId}
+            defaultFromTokenAddress={urlTokenAddress}
+            defaultFromTokenChainId={urlTokenChainId}
             wallet={wallet}
             multiWalletSupportEnabled={true}
             linkedWallets={linkedWallets}
@@ -425,6 +445,7 @@ const TokenWidgetPage: NextPage = () => {
               setFromToken(token)
               if (token) {
                 setTokenNotFound(false)
+                updateDemoUrl(token)
               }
             }}
             onToTokenChange={(token) => {

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

@@ -270,7 +270,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
 }) => {
   const isMobile = useMediaQuery('(max-width: 520px)')
   const [displayValue, setDisplayValue] = useState<string | undefined>(() =>
-    convertBpsToPercent(currentSlippageTolerance)
+    currentSlippageTolerance ? convertBpsToPercent(currentSlippageTolerance) : undefined
   )
   const [debouncedDisplayValue] = useDebounceValue(displayValue, 500)
 
@@ -304,7 +304,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
   }, [open, mode])
 
   useEffect(() => {
-    if (!open) {
+    if (!open && currentSlippageTolerance !== undefined) {
       setDisplayValue(convertBpsToPercent(currentSlippageTolerance))
       setMode(currentSlippageTolerance ? 'Custom' : 'Auto')
     }

packages/ui/src/components/primitives/Tabs.tsx

@@ -16,7 +16,7 @@ const TabsListCss = cva({
     alignItems: 'center',
     borderRadius: 8,
     p: '1',
-    backgroundColor: 'transparent',
+    backgroundColor: 'gray2',
     border: 'none'
   }
 })

packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx

@@ -14,7 +14,6 @@ import {
 } from '../../../../hooks/index.js'
 import type { Address, WalletClient } from 'viem'
 import { formatUnits, parseUnits } from 'viem'
-import { normalizeTokenAddress } from '../../../../utils/tokens.js'
 import { useAccount, useWalletClient } from 'wagmi'
 import { useCapabilities } from 'wagmi/experimental'
 import type { Token } from '../../../../types/index.js'
@@ -35,7 +34,10 @@ import { ProviderOptionsContext } from '../../../../providers/RelayKitProvider.j
 import type { DebouncedState } from 'usehooks-ts'
 import type { AdaptedWallet } from '@relayprotocol/relay-sdk'
 import type { LinkedWallet } from '../../../../types/index.js'
-import { addressWithFallback, isValidAddress } from '../../../../utils/address.js'
+import {
+  addressWithFallback,
+  isValidAddress
+} from '../../../../utils/address.js'
 import { adaptViemWallet, getDeadAddress } from '@relayprotocol/relay-sdk'
 import { errorToJSON } from '../../../../utils/errors.js'
 import { useSwapButtonCta } from '../../../../hooks/widget/useSwapButtonCta.js'
@@ -263,19 +265,28 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
     toToken?.chainId !== undefined &&
     fromToken.symbol === toToken.symbol
 
-  const toChain = relayClient?.chains.find(
-    (chain) => chain.id === toToken?.chainId
+  const toChain = useMemo(
+    () => relayClient?.chains?.find((chain) => chain.id === toToken?.chainId),
+    [relayClient?.chains, toToken?.chainId]
   )
-  const fromChain = relayClient?.chains?.find(
-    (chain) => chain.id === fromToken?.chainId
+
+  const fromChain = useMemo(
+    () => relayClient?.chains?.find((chain) => chain.id === fromToken?.chainId),
+    [relayClient?.chains, fromToken?.chainId]
   )
 
-  const fromChainWalletVMSupported =
-    !fromChain?.vmType ||
-    supportedWalletVMs.includes(fromChain?.vmType) ||
-    fromChain?.id === 1337
-  const toChainWalletVMSupported =
-    !toChain?.vmType || supportedWalletVMs.includes(toChain?.vmType)
+  const fromChainWalletVMSupported = useMemo(
+    () =>
+      !fromChain?.vmType ||
+      supportedWalletVMs.includes(fromChain?.vmType) ||
+      fromChain?.id === 1337,
+    [fromChain?.vmType, fromChain?.id, supportedWalletVMs]
+  )
+
+  const toChainWalletVMSupported = useMemo(
+    () => !toChain?.vmType || supportedWalletVMs.includes(toChain?.vmType),
+    [toChain?.vmType, supportedWalletVMs]
+  )
 
   // Automatically select the correct wallet address based on fromToken's chain VM
   // In sell mode (no fromChain), use toChain to find compatible wallet
@@ -338,6 +349,7 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
         : undefined,
       connectorKeyOverrides
     )
+
     if (
       multiWalletSupportEnabled &&
       toChain &&
@@ -359,6 +371,8 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
 
       return supportedWallet?.address
     }
+
+    return undefined
   }, [
     multiWalletSupportEnabled,
     toChain,
@@ -369,9 +383,11 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
     connectorKeyOverrides
   ])
 
-  // Don't default to origin address as recipient (prevents selling to yourself)
   const recipient =
-    destinationAddressOverride ?? customToAddress ?? defaultRecipient
+    destinationAddressOverride ??
+    customToAddress ??
+    defaultRecipient ??
+    (!allowUnsupportedRecipient && address ? address : undefined)
 
   const {
     value: fromBalance,
@@ -399,7 +415,8 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
     chain: toChain,
     address: recipient,
     currency: toToken?.address ? (toToken.address as Address) : undefined,
-    enabled: toToken !== undefined,
+    enabled:
+      toToken !== undefined && recipient !== undefined && recipient !== '',
     refreshInterval: undefined,
     wallet
   })
@@ -472,12 +489,22 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
       ? linkedWallets?.find((wallet) => wallet.address === recipient)
       : undefined) !== undefined
 
-  const isValidFromAddress = isValidAddress(
-    fromChain?.vmType,
-    address ?? '',
-    fromChain?.id,
-    linkedWallet?.connector,
-    connectorKeyOverrides
+  const isValidFromAddress = useMemo(
+    () =>
+      isValidAddress(
+        fromChain?.vmType,
+        address ?? '',
+        fromChain?.id,
+        linkedWallet?.connector,
+        connectorKeyOverrides
+      ),
+    [
+      fromChain?.vmType,
+      address,
+      fromChain?.id,
+      linkedWallet?.connector,
+      connectorKeyOverrides
+    ]
   )
   const fromAddressWithFallback = addressWithFallback(
     fromChain?.vmType,
@@ -487,10 +514,9 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
     connectorKeyOverrides
   )
 
-  const isValidToAddress = isValidAddress(
-    toChain?.vmType,
-    recipient ?? '',
-    toChain?.id
+  const isValidToAddress = useMemo(
+    () => isValidAddress(toChain?.vmType, recipient ?? '', toChain?.id),
+    [toChain?.vmType, recipient, toChain?.id]
   )
 
   const toAddressWithFallback = addressWithFallback(
@@ -599,8 +625,6 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
     isFromNative
   )
 
-
-
   const shouldSetQuoteParameters =
     fromToken &&
     toToken &&
@@ -760,7 +784,12 @@ const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
     queryClient.invalidateQueries({ queryKey: quoteQueryKey })
   }, [queryClient, quoteQueryKey])
 
-  const derivedError = quote || (isFetchingQuote && Boolean(quoteFetchingEnabled && quoteParameters !== undefined)) ? null : quoteError
+  const derivedError =
+    quote ||
+    (isFetchingQuote &&
+      Boolean(quoteFetchingEnabled && quoteParameters !== undefined))
+      ? null
+      : quoteError
   const error = derivedError
 
   useDisconnected(address, () => {