Fix bugs with wallet connection ux

reservoirprotocol · Nov 25, 2024 · 0b4e528 · 0b4e528
1 parent 3862a8a
commit 0b4e528
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 43 deletions.
diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx
@@ -15,7 +15,7 @@ import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js'
 type MultiWalletDropdownProps = {
   context: 'origin' | 'destination'
   wallets: LinkedWallet[]
-  selectedWalletAddress: string
+  selectedWalletAddress?: string
   chain?: RelayChain
   onSelect: (wallet: LinkedWallet) => void
   onLinkNewWallet: () => void

diff --git a/packages/ui/src/components/widgets/SwapButton.tsx b/packages/ui/src/components/widgets/SwapButton.tsx
@@ -6,6 +6,7 @@ import { EventNames } from '../../constants/events.js'
 
 type SwapButtonProps = {
   transactionModalOpen: boolean
+  depositAddressModalOpen: boolean
   onConnectWallet?: () => void
   onAnalyticEvent?: (eventName: string, data?: any) => void
   onClick: () => void
@@ -28,6 +29,7 @@ type SwapButtonProps = {
 
 const SwapButton: FC<SwapButtonProps> = ({
   transactionModalOpen,
+  depositAddressModalOpen,
   isValidFromAddress,
   isValidToAddress,
   context,
@@ -48,21 +50,25 @@ const SwapButton: FC<SwapButtonProps> = ({
   const isMounted = useMounted()
 
   if (isMounted && (address || !fromChainWalletVMSupported)) {
+    const invalidAmount =
+      !price ||
+      Number(debouncedInputAmountValue) === 0 ||
+      Number(debouncedOutputAmountValue) === 0
+
     return (
       <Button
         css={{ justifyContent: 'center' }}
         aria-label={context}
         disabled={
-          !isValidRefundAddress ||
-          (isValidToAddress &&
-            isValidFromAddress &&
-            (!price ||
-              hasInsufficientBalance ||
-              isInsufficientLiquidityError ||
-              transactionModalOpen ||
-              Number(debouncedInputAmountValue) === 0 ||
-              Number(debouncedOutputAmountValue) === 0 ||
-              isSameCurrencySameRecipientSwap))
+          isValidToAddress &&
+          (isValidFromAddress || !fromChainWalletVMSupported) &&
+          (invalidAmount ||
+            hasInsufficientBalance ||
+            isInsufficientLiquidityError ||
+            transactionModalOpen ||
+            depositAddressModalOpen ||
+            isSameCurrencySameRecipientSwap ||
+            (!isValidRefundAddress && !fromChainWalletVMSupported))
         }
         onClick={() => {
           onAnalyticEvent?.(EventNames.SWAP_BUTTON_CLICKED, {

diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -331,8 +331,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         From
                       </Text>
                       {multiWalletSupportEnabled === true &&
-                      fromChainWalletVMSupported &&
-                      address ? (
+                      fromChainWalletVMSupported ? (
                         <MultiWalletDropdown
                           context="origin"
                           selectedWalletAddress={address}
@@ -383,8 +382,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           tradeType === 'EXACT_INPUT'
                             ? amountInputValue
                             : amountInputValue
-                            ? formatFixedLength(amountInputValue, 8)
-                            : amountInputValue
+                              ? formatFixedLength(amountInputValue, 8)
+                              : amountInputValue
                         }
                         setValue={(e) => {
                           setAmountInputValue(e)
@@ -443,9 +442,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           isSingleChainLocked
                             ? [lockChainId]
                             : fromToken?.chainId !== undefined &&
-                              fromToken?.chainId === lockChainId
-                            ? [fromToken?.chainId]
-                            : undefined
+                                fromToken?.chainId === lockChainId
+                              ? [fromToken?.chainId]
+                              : undefined
                         }
                         restrictedTokensList={tokens?.filter(
                           (token) => token.chainId === fromToken?.chainId
@@ -666,9 +665,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         To
                       </Text>
 
-                      {multiWalletSupportEnabled === true &&
-                      toChainWalletVMSupported &&
-                      recipient ? (
+                      {multiWalletSupportEnabled && toChainWalletVMSupported ? (
                         <MultiWalletDropdown
                           context="destination"
                           selectedWalletAddress={recipient}
@@ -690,16 +687,10 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         />
                       ) : null}
 
-                      {multiWalletSupportEnabled === false ||
-                      (!toChainWalletVMSupported &&
-                        isMounted &&
-                        (address || customToAddress)) ? (
+                      {!multiWalletSupportEnabled ||
+                      !toChainWalletVMSupported ? (
                         <Button
-                          color={
-                            !toChainWalletVMSupported && !isValidToAddress
-                              ? 'primary'
-                              : 'secondary'
-                          }
+                          color={'secondary'}
                           corners="pill"
                           size="none"
                           css={{
@@ -752,8 +743,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           tradeType === 'EXPECTED_OUTPUT'
                             ? amountOutputValue
                             : amountOutputValue
-                            ? formatFixedLength(amountOutputValue, 8)
-                            : amountOutputValue
+                              ? formatFixedLength(amountOutputValue, 8)
+                              : amountOutputValue
                         }
                         setValue={(e) => {
                           setAmountOutputValue(e)
@@ -840,9 +831,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           isSingleChainLocked
                             ? [lockChainId]
                             : toToken?.chainId !== undefined &&
-                              toToken?.chainId === lockChainId
-                            ? [toToken?.chainId]
-                            : undefined
+                                toToken?.chainId === lockChainId
+                              ? [toToken?.chainId]
+                              : undefined
                         }
                         restrictedTokensList={tokens?.filter(
                           (token) => token.chainId === toToken?.chainId
@@ -1023,6 +1014,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                   ) : (
                     <SwapButton
                       transactionModalOpen={transactionModalOpen}
+                      depositAddressModalOpen={depositAddressModalOpen}
                       isValidFromAddress={isValidFromAddress}
                       isValidToAddress={isValidToAddress}
                       isValidRefundAddress={isValidRefundAddress}
@@ -1071,7 +1063,10 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           }
                         } else {
                           if (!isValidToAddress) {
-                            if (multiWalletSupportEnabled) {
+                            if (
+                              multiWalletSupportEnabled &&
+                              toChainWalletVMSupported
+                            ) {
                               onLinkNewWallet?.({
                                 chain: toChain,
                                 direction: 'to'

diff --git a/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx b/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx
@@ -221,7 +221,7 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     )
     const _isValidToAddress = isValidAddress(
       toChain?.vmType,
-      customToAddress ?? address ?? '',
+      customToAddress ?? '',
       toChain?.id,
       !customToAddress && _linkedWallet?.address === address
         ? _linkedWallet?.connector
@@ -252,9 +252,11 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     setCustomToAddress
   ])
 
-  const recipient = customToAddress ?? defaultRecipient ?? address
+  const recipient = customToAddress ?? defaultRecipient
 
-  const { displayName: toDisplayName } = useENSResolver(recipient)
+  const { displayName: toDisplayName } = useENSResolver(recipient, {
+    enabled: toChain?.vmType === 'evm'
+  })
 
   const {
     value: fromBalance,
@@ -400,7 +402,9 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     }
   )
   const supportsExternalLiquidity =
-    tokenPairIsCanonical && externalLiquiditySupport.status === 'success'
+    tokenPairIsCanonical &&
+    externalLiquiditySupport.status === 'success' &&
+    fromChainWalletVMSupported
       ? true
       : false
 
@@ -652,7 +656,9 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
   ) {
     ctaCopy = `Select ${fromChain?.displayName} Wallet`
   } else if (multiWalletSupportEnabled && !isValidToAddress) {
-    ctaCopy = `Select ${toChain?.displayName} Wallet`
+    ctaCopy = toChainWalletVMSupported
+      ? `Select ${toChain?.displayName} Wallet`
+      : `Enter ${toChain?.displayName} Address`
   } else if (toChain?.vmType !== 'evm' && !isValidToAddress) {
     ctaCopy = `Enter ${toChain?.displayName} Address`
   } else if (isSameCurrencySameRecipientSwap) {
@@ -663,10 +669,10 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     ctaCopy = 'Insufficient Balance'
   } else if (isInsufficientLiquidityError) {
     ctaCopy = 'Insufficient Liquidity'
-  } else if (!isValidRefundAddress) {
+  } else if (!fromChainWalletVMSupported && !isValidRefundAddress) {
     ctaCopy = 'Enter Refund Address'
   } else if (!toChainWalletVMSupported && !isValidToAddress) {
-    ctaCopy = 'Enter Address'
+    ctaCopy = `Enter ${toChain.displayName} Address`
   } else if (transactionModalOpen) {
     switch (operation) {
       case 'wrap': {