(Deposit/Withdraw) Allow Selecting a Custom Withdraw Address (#3453)

* feat: add send address modal

* feat: add translations

* feat: make wallet handling predictable

* feat: allow using custom withdraw address

* fix: test

* fix: tests

* improvement: remove unused prop

* fix: remove duplicate lock line

* improvement: remove console log

* improvement: @jonator feedback

packages/bridge/src/skip/__tests__/skip-bridge-provider.spec.ts

@@ -480,7 +480,7 @@ describe("SkipBridgeProvider", () => {
       toChain
     );
 
-    expect(addressList).toEqual([fromAddress]);
+    expect(addressList).toEqual([fromAddress, toAddress]);
   });
 
   it("should return correct finality time for known chain IDs", () => {

packages/bridge/src/skip/index.ts

@@ -559,28 +559,41 @@ export class SkipBridgeProvider implements BridgeProvider {
         throw new Error(`Failed to find chain ${chainID}`);
       }
 
-      if (chain.chain_type === "evm" && fromChain.chainType === "evm") {
+      if (
+        chain.chain_type === "evm" &&
+        chain.chain_id === String(fromChain.chainId) &&
+        fromChain.chainType === "evm"
+      ) {
         addressList.push(fromAddress);
-        continue;
       }
 
-      if (chain.chain_type === "evm" && toChain.chainType === "evm") {
+      if (
+        chain.chain_type === "evm" &&
+        chain.chain_id === String(toChain.chainId) &&
+        toChain.chainType === "evm"
+      ) {
         addressList.push(toAddress);
-        continue;
       }
 
-      if (chain.chain_type === "cosmos" && fromChain.chainType === "cosmos") {
+      if (
+        chain.chain_type === "cosmos" &&
+        chain.chain_id === String(fromChain.chainId) &&
+        fromChain.chainType === "cosmos"
+      ) {
         addressList.push(
           toBech32(chain.bech32_prefix, fromBech32(fromAddress).data)
         );
         continue;
       }
 
-      if (chain.chain_type === "cosmos" && toChain.chainType === "cosmos") {
+      if (
+        chain.chain_type === "cosmos" &&
+        chain.chain_id === String(toChain.chainId) &&
+        toChain.chainType === "cosmos"
+      ) {
         addressList.push(
           toBech32(chain.bech32_prefix, fromBech32(toAddress).data)
         );
-        continue;
       }
     }
 

packages/utils/package.json

@@ -17,7 +17,8 @@
     "@keplr-wallet/unit": "0.10.24-ibc.go.v7.hot.fix",
     "@osmosis-labs/types": "^1.0.0",
     "sha.js": "^2.4.11",
-    "viem": "2.16.4"
+    "viem": "2.16.4",
+    "@cosmjs/encoding": "0.32.3"
   },
   "devDependencies": {
     "@types/jest-in-case": "^1.0.6",

packages/utils/src/string.ts

@@ -1,3 +1,6 @@
+import * as cosmjsEncoding from "@cosmjs/encoding";
+import * as viem from "viem";
+
 /** Trucates a string with ellipsis, default breakpoint: `num = 8`. */
 export function truncateString(str: string, num = 8) {
   if (str.length <= num) {
@@ -58,3 +61,25 @@ export const ellipsisText = (str: string, maxLength: number): string => {
 export const camelCaseToSnakeCase = (input: string) => {
   return input.replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase();
 };
+
+export function isEvmAddressValid({ address }: { address: string }): boolean {
+  return viem.isAddress(address);
+}
+
+export function isCosmosAddressValid({
+  address,
+  bech32Prefix,
+}: {
+  address: string;
+  bech32Prefix: string;
+}): boolean {
+  try {
+    const { prefix, data } = cosmjsEncoding.fromBech32(address);
+    if (prefix !== bech32Prefix) {
+      return false;
+    }
+    return data.length === 20;
+  } catch {
+    return false;
+  }
+}

packages/web/components/bridge/immersive/amount-and-review-screen.tsx

@@ -41,6 +41,8 @@ export const AmountAndReviewScreen = observer(
     const [cryptoAmount, setCryptoAmount] = useState<string>("0");
     const [fiatAmount, setFiatAmount] = useState<string>("0");
 
+    const [manualToAddress, setManualToAddress] = useState<string>();
+
     // Wallets
     const { address: evmAddress, connector: evmConnector } =
       useEvmWalletAccount();
@@ -59,8 +61,11 @@ export const AmountAndReviewScreen = observer(
       fromChain?.chainType === "evm"
         ? evmAddress
         : fromChainCosmosAccount?.address;
-    const toAddress =
-      toChain?.chainType === "evm" ? evmAddress : toChainCosmosAccount?.address;
+    const toAddress = !isNil(manualToAddress)
+      ? manualToAddress
+      : toChain?.chainType === "evm"
+      ? evmAddress
+      : toChainCosmosAccount?.address;
 
     const fromWalletIcon =
       fromChain?.chainType === "evm"
@@ -129,6 +134,8 @@ export const AmountAndReviewScreen = observer(
               setFromChain={setFromChain}
               toChain={toChain}
               setToChain={setToChain}
+              manualToAddress={manualToAddress}
+              setManualToAddress={setManualToAddress}
               fromAsset={fromAsset}
               setFromAsset={setFromAsset}
               toAsset={toAsset}
@@ -169,6 +176,7 @@ export const AmountAndReviewScreen = observer(
                     onConfirm={() => {
                       quote.onTransfer().catch(noop);
                     }}
+                    isManualAddress={!isNil(manualToAddress)}
                   />
                 )}
             </>