@rango-dev/widget-embedded 0.1.10-next.69

package/src/mockData/pendingSwap.ts

@@ -0,0 +1,607 @@
+//TODO: remove mock data after queue manager integration
+export const pendingSwap: any = {
+  creationTime: '1675837879344',
+  finishTime: '1675842500799',
+  requestId: 'c40b81cd-fdac-4dad-bfef-1c7b2cff715f',
+  inputAmount: '2',
+  wallets: {
+    POLYGON: {
+      walletType: 'metamask',
+      address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    },
+    SOLANA: {
+      walletType: 'phantom',
+      address: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+    },
+  },
+  status: 'success',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: '',
+  networkStatusExtraMessageDetail: '',
+  lastNotificationTime: null,
+  settings: {
+    slippage: '13.0',
+    disabledSwappersIds: [
+      'PancakeSwapBsc',
+      'ThorChain',
+      'Horizon Bridge',
+      'OneInchOptimism',
+      'OneInchGnosis',
+      'OneInchBsc',
+      'OneInchArbitrum',
+      'OpenOceanFantom',
+      'SushiHarmony',
+      'SushiArbitrum',
+      'OkcSwap',
+      'CherrySwap',
+      'Osmosis',
+      'SolanaWrapper',
+      'Jupiter',
+      'stargate',
+      'AnySwap',
+      'Satellite',
+      'Diffusion',
+      'JunoSwap',
+      'PangolinSwap',
+      'MMFinance',
+      'CronaSwap',
+      'VVSFinance',
+      'MDexHeco',
+      'ParaSwap Polygon',
+      'ParaSwap Bsc',
+      'ParaSwap Avalanche',
+      'AuroraSwap',
+      'Across',
+      'Arbitrum Bridge',
+      'TrisolarisSwap',
+      'Polygon Bridge',
+      'SpookySwap',
+      'Rainbow Bridge',
+      'Lido',
+      'Symbiosis',
+      'Avalanche Bridge',
+      'VoltageSwap',
+      'Stargate Aggregator',
+      'Across Aggregator',
+      'THORChain Aggregator',
+      'CBridge Aggregator',
+      'AnySwap Aggregator',
+      'Hyphen Aggregator',
+      'Optimism Bridge',
+      'OolongSwap',
+      'QuickSwap',
+      'StellaSwap',
+      'Hyphen',
+      'ViperSwap',
+      'cBridge v2.0',
+      'FinKujira',
+      'Hop',
+      'BeamSwap',
+      'SolarbeamSwap',
+      'Sifchain',
+      'Wormhole',
+      'EthUniSwapV2',
+      'OneInchPolygon',
+    ],
+    disabledSwappersGroups: [],
+  },
+  simulationResult: {
+    outputAmount: '0.084249153',
+    swaps: [
+      {
+        swapperId: 'QuickSwap',
+        swapperLogo: 'https://api.rango.exchange/swappers/quick-swap.png',
+        swapperType: 'DEX',
+        from: {
+          symbol: 'USDC',
+          logo: 'https://api.rango.exchange/i/ns0AMf',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+          address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+          blockchain: 'POLYGON',
+          decimals: 6,
+          usdPrice: 0.999792,
+        },
+        to: {
+          symbol: 'SOL',
+          logo: 'https://api.rango.exchange/i/YhJ1nK',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+          address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+          blockchain: 'POLYGON',
+          decimals: 9,
+          usdPrice: 23.700913462284028,
+        },
+        fromAmount: '2.000000',
+        fromAmountPrecision: null,
+        fromAmountMinValue: null,
+        fromAmountMaxValue: null,
+        fromAmountRestrictionType: null,
+        toAmount: '0.084249153',
+        fee: [
+          {
+            asset: {
+              blockchain: 'POLYGON',
+              symbol: 'USDC',
+              address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+            },
+            expenseType: 'DECREASE_FROM_OUTPUT',
+            amount: '0.006000000000000000124900090270330110797658562660217285156250000000',
+            name: 'Swapper Fee',
+          },
+          {
+            asset: {
+              blockchain: 'POLYGON',
+              symbol: 'MATIC',
+              address: null,
+            },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0.032758180196833611',
+            name: 'Network Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 60,
+        swapChainType: 'INTER_CHAIN',
+        routes: [
+          {
+            nodes: [
+              {
+                nodes: [
+                  {
+                    marketName: 'QuickSwap',
+                    marketId: 'QuickSwap',
+                    percent: 1,
+                  },
+                ],
+                from: 'USDC',
+                fromLogo: '',
+                fromAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+                fromBlockchain: 'POLYGON',
+
+                to: 'SOL',
+                toLogo: '',
+                toAddress: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+                toBlockchain: 'POLYGON',
+              },
+            ],
+          },
+        ],
+        recommendedSlippage: null,
+        warnings: [],
+        timeStat: {
+          min: 7,
+          avg: 59,
+          max: 736,
+        },
+        includesDestinationTx: false,
+        internalSwaps: null,
+        maxRequiredSign: 1,
+        fromAsset: {
+          blockchain: 'POLYGON',
+          symbol: 'USDC',
+          address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+        },
+        toAsset: {
+          blockchain: 'POLYGON',
+          symbol: 'SOL',
+          address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+        },
+      },
+      {
+        swapperId: 'Wormhole',
+        swapperLogo: 'https://api.rango.exchange/swappers/wormhole.png',
+        swapperType: 'BRIDGE',
+        from: {
+          symbol: 'SOL',
+          logo: 'https://api.rango.exchange/i/YhJ1nK',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+          address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+          blockchain: 'POLYGON',
+          decimals: 9,
+          usdPrice: 23.700913462284028,
+        },
+        to: {
+          symbol: 'SOL',
+          logo: 'https://api.rango.exchange/i/eLHYrb',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/solana.svg',
+          address: null,
+          blockchain: 'SOLANA',
+          decimals: 9,
+          usdPrice: 23.97093428787272,
+        },
+        fromAmount: '0.084249153',
+        fromAmountPrecision: null,
+        fromAmountMinValue: null,
+        fromAmountMaxValue: null,
+        fromAmountRestrictionType: null,
+        toAmount: '0.084249153',
+        fee: [
+          {
+            asset: {
+              blockchain: 'POLYGON',
+              symbol: 'MATIC',
+              address: null,
+            },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0.042205949048288939',
+            name: 'Network Fee',
+          },
+          {
+            asset: {
+              blockchain: 'SOLANA',
+              symbol: 'SOL',
+              address: null,
+            },
+            expenseType: 'FROM_DESTINATION_WALLET',
+            amount: '0.000070000',
+            name: 'Swapper Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 150,
+        swapChainType: 'INTRA_CHAIN',
+        routes: null,
+        recommendedSlippage: null,
+        warnings: [],
+        timeStat: {
+          min: 42,
+          avg: 146,
+          max: 5582,
+        },
+        includesDestinationTx: true,
+        internalSwaps: null,
+        maxRequiredSign: 6,
+        fromAsset: {
+          blockchain: 'POLYGON',
+          symbol: 'SOL',
+          address: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+        },
+        toAsset: {
+          blockchain: 'SOLANA',
+          symbol: 'SOL',
+          address: null,
+        },
+      },
+    ],
+    resultType: 'OK',
+  },
+  validateBalanceOrFee: true,
+  steps: [
+    {
+      id: 1,
+      fromBlockchain: 'POLYGON',
+      fromSymbol: 'USDC',
+      fromSymbolAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+      fromDecimals: 6,
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toBlockchain: 'POLYGON',
+      fromLogo: 'https://api.rango.exchange/i/ns0AMf',
+      fromBlockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+      toBlockchainLogo: 'https://api.rango.exchange/blockchains/solana.svg',
+      toSymbol: 'SOL',
+      toSymbolAddress: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+      toDecimals: 9,
+      toLogo: 'https://api.rango.exchange/i/YhJ1nK',
+      startTransactionTime: 1675837904769,
+      swapperId: 'QuickSwap',
+      swapperLogo: 'https://api.rango.exchange/swappers/quick-swap.png',
+      expectedOutputAmountHumanReadable: '0.084249153',
+      outputAmount: '0.084206923',
+      status: 'success',
+      networkStatus: 'networkChanged',
+      executedTransactionId: '0xb2a6b1b497b660bd58d8583d05425ea1b89fa19efc18c9b3baa501abf5f8cee9',
+      externalTransactionId: null,
+      explorerUrl: [
+        {
+          url: 'https://polygonscan.com/tx/0xb2a6b1b497b660bd58d8583d05425ea1b89fa19efc18c9b3baa501abf5f8cee9',
+          description: 'swap',
+        },
+      ],
+      trackingCode: null,
+      cosmosTransaction: null,
+      solanaTransaction: null,
+      evmTransaction: {
+        type: 'EVM',
+        blockChain: 'POLYGON',
+        isApprovalTx: false,
+        from: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+        to: '0x38F7Aa5370439E879370E24AdD063a11Bd74610D',
+        spender: null,
+        data: '0xa60fdfb60000000000000000000000002791bca1f2de4661ed88a30c99a7a9449aa84174000000000000000000000000d93f7e271cb87c23aaa73edc008a79646d1f991200000000000000000000000000000000000000000000000000000000001e84800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000020000000000000000000000000a5e0829caced8ffdd4de3c43696c57f7d7a678ff0000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000010438ed173900000000000000000000000000000000000000000000000000000000001e848000000000000000000000000000000000000000000000000000000000045e6b7b00000000000000000000000000000000000000000000000000000000000000a000000000000000000000000038f7aa5370439e879370e24add063a11bd74610d0000000000000000000000000000000000000000000000000000000063e348d800000000000000000000000000000000000000000000000000000000000000020000000000000000000000002791bca1f2de4661ed88a30c99a7a9449aa84174000000000000000000000000d93f7e271cb87c23aaa73edc008a79646d1f991200000000000000000000000000000000000000000000000000000000',
+        value: null,
+        gasLimit: '0x62f20',
+        gasPrice: '247516799843',
+        nonce: null,
+      },
+      evmApprovalTransaction: null,
+      transferTransaction: null,
+      diagnosisUrl: null,
+      internalSteps: null,
+    },
+    {
+      id: 2,
+      fromBlockchain: 'POLYGON',
+      fromSymbol: 'SOL',
+      fromSymbolAddress: '0xd93f7e271cb87c23aaa73edc008a79646d1f9912',
+      fromDecimals: 9,
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toBlockchain: 'SOLANA',
+      fromLogo: 'https://api.rango.exchange/i/YhJ1nK',
+      fromBlockchainLogo: 'https://api.rango.exchange/blockchains/polygon.svg',
+      toBlockchainLogo: 'https://api.rango.exchange/blockchains/solana.svg',
+      toSymbol: 'SOL',
+      toSymbolAddress: null,
+      toDecimals: 9,
+      toLogo: 'https://api.rango.exchange/i/eLHYrb',
+      startTransactionTime: 1675842459076,
+      swapperId: 'Wormhole',
+      swapperLogo: 'https://api.rango.exchange/swappers/wormhole.png',
+      expectedOutputAmountHumanReadable: '0.084249153',
+      outputAmount: '0.08420692',
+      status: 'failed',
+      networkStatus: 'networkChanged',
+      executedTransactionId:
+        '5MGhqrNRwRKkHGU11S37mgF7LscXWhAvwBeAWEdxcmV9AD6bNqig6iCCzC4mKBH41JBexKb6kj4axLfcH4XZQsT9',
+      externalTransactionId: null,
+      explorerUrl: [
+        {
+          url: 'https://solscan.io/tx/2wvqHEy5hCDfpwZM5sZhBpFxXZL7p6PRqpDdCZGpGF85deGQU9oiBC9Jgoszdo8x9hjkySktGPYzubcXP8pxW3H4',
+          description: 'Associate Token',
+        },
+        {
+          url: 'https://polygonscan.com/tx/0xcdd0c684fc203d41a0eaacfba2201ab0a48845bb6d0f0805fb4a70a0f971a599',
+          description: 'Transfer',
+        },
+        {
+          url: 'https://solscan.io/tx/5rc5EHfMrChB749RsJew1ze35yQMddafkQqy5JFqcdKPJ6j2NiggGT7UDmFDAXzP2AwHGyFj2XjaYr7RQjjc1KmH',
+          description: 'Verify vaa 1',
+        },
+        {
+          url: 'https://solscan.io/tx/5xNgHvdzu63fmF7uojrHuqcHC3NgErpdGiSg38X7KZ7EEjTyPWt8W1QUtuyUFcNcSjGkFGrGzfnkRUbe4Hj6oY2v',
+          description: 'Verify vaa 2',
+        },
+        {
+          url: 'https://solscan.io/tx/3FnXLYwwpc93o2TyjKNDfiBcRDZ9W1qJVdmCjTRw3kz4Jrwjr5zQzLSbsbbBzqFNMSxBFcUDaiQ7pP4DL5coUGq',
+          description: 'Post vaa',
+        },
+        {
+          url: 'https://solscan.io/tx/5MGhqrNRwRKkHGU11S37mgF7LscXWhAvwBeAWEdxcmV9AD6bNqig6iCCzC4mKBH41JBexKb6kj4axLfcH4XZQsT9',
+          description: 'Redeem',
+        },
+      ],
+      trackingCode: null,
+      cosmosTransaction: null,
+      solanaTransaction: {
+        type: 'SOLANA',
+        blockChain: 'SOLANA',
+        from: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+        identifier: 'redeem',
+        instructions: [
+          {
+            keys: [
+              {
+                pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+                isSigner: true,
+                isWritable: true,
+              },
+              {
+                pubkey: 'DapiQYH3BGonhN8cngWcXQ6SrqSm3cwysoznoHr6Sbsx',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'Wf8aqunuZ9y1tprCihMateij299Pa57XL15a6EQz9qt',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'FTWSFuqyc6B5BbarBzuHdBofA2ks12eyRNmUfKmDiUN1',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: 'J6fNPeeJc1E2zDRUtvD9aaC9kBsEq7JaFr1oa97DAJhj',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: '8nUPRxuXUJPbWiCbqCPrVLkmXqR8LdifLrRW3VjCQDhZ',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: '8nUPRxuXUJPbWiCbqCPrVLkmXqR8LdifLrRW3VjCQDhZ',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: '2nQNF8F9LLWMqdjymiLK2u8HoHMvYa4orCXsp3w65fQ2',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: 'So11111111111111111111111111111111111111112',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'GugU1tP7doLeTw9hQP51xRJyS8Da1fWxuiy2rVrnMD2m',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'SysvarRent111111111111111111111111111111111',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: '11111111111111111111111111111111',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'worm2ZoG2kUd4vFXhvjh93UUH596ayRfgQ2MgjNMTth',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+                isSigner: false,
+                isWritable: false,
+              },
+            ],
+            programId: 'wormDTUJ6AWPNvk59vGQbDvGJmqbDTdgWgAqcLBCgUb',
+            data: [2],
+          },
+          {
+            keys: [
+              {
+                pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+                isSigner: true,
+                isWritable: true,
+              },
+              {
+                pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+                isSigner: true,
+                isWritable: true,
+              },
+            ],
+            programId: '11111111111111111111111111111111',
+            data: [
+              0, 0, 0, 0, -16, 29, 31, 0, 0, 0, 0, 0, -91, 0, 0, 0, 0, 0, 0, 0, 6, -35, -10, -31,
+              -41, 101, -95, -109, -39, -53, -31, 70, -50, -21, 121, -84, 28, -76, -123, -19, 95,
+              91, 55, -111, 58, -116, -11, -123, 126, -1, 0, -87,
+            ],
+          },
+          {
+            keys: [
+              {
+                pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: 'So11111111111111111111111111111111111111112',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+                isSigner: false,
+                isWritable: false,
+              },
+              {
+                pubkey: 'SysvarRent111111111111111111111111111111111',
+                isSigner: false,
+                isWritable: false,
+              },
+            ],
+            programId: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+            data: [1],
+          },
+          {
+            keys: [
+              {
+                pubkey: '8nUPRxuXUJPbWiCbqCPrVLkmXqR8LdifLrRW3VjCQDhZ',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+                isSigner: true,
+                isWritable: false,
+              },
+            ],
+            programId: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+            data: [3, 72, -27, 4, 5, 0, 0, 0, 0],
+          },
+          {
+            keys: [
+              {
+                pubkey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+                isSigner: false,
+                isWritable: true,
+              },
+              {
+                pubkey: '9QoVnPEHj5HNL4cVicXUF8CVmyhBxTDqUUigVn3UPWwk',
+                isSigner: true,
+                isWritable: false,
+              },
+            ],
+            programId: 'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
+            data: [9],
+          },
+        ],
+        recentBlockhash: '2wBCvR3jVNj6wzL8vHSuqTRtxBYiwhtoY6Gkp6WaBxSG',
+        signatures: [
+          {
+            publicKey: '72pK2FqwMYPr9ajAhzLNQq8e5S2Rf33MGpVXxdXwCT6V',
+            signature: [
+              -116, 17, -5, 86, -122, 120, -7, -53, -29, -15, -70, -100, 16, 48, 113, -42, 8, 126,
+              75, -13, 63, -31, -17, 1, 74, 85, 77, 90, 98, -15, 104, 63, 4, -74, 45, -3, -3, -117,
+              -24, -56, 20, -89, -40, 33, 125, -120, -44, -75, 17, 69, 20, -48, 106, 48, 16, -19,
+              83, 123, -77, 93, -20, -27, -77, 7,
+            ],
+          },
+        ],
+        serializedMessage: null,
+      },
+      evmTransaction: null,
+      evmApprovalTransaction: null,
+      transferTransaction: null,
+      diagnosisUrl: null,
+      internalSteps: [
+        {
+          name: 'associate token address',
+          state: 'SUCCESSED',
+          current: false,
+        },
+        {
+          name: 'transfer',
+          state: 'SUCCESSED',
+          current: false,
+        },
+        {
+          name: 'signed vaa',
+          state: 'SUCCESSED',
+          current: false,
+        },
+        {
+          name: 'verify vaa#1',
+          state: 'SUCCESSED',
+          current: false,
+        },
+        {
+          name: 'verify vaa#2',
+          state: 'SUCCESSED',
+          current: false,
+        },
+        {
+          name: 'post vaa',
+          state: 'SUCCESSED',
+          current: false,
+        },
+        {
+          name: 'redeem',
+          state: 'SUCCESSED',
+          current: true,
+        },
+      ],
+    },
+  ],
+};

package/src/pages/ConfirmSwapPage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ConfirmSwap } from '@rango-dev/ui';
+import { useNavigate } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useConfirmSwap } from '../hooks/useConfirmSwap';
+
+export function ConfirmSwapPage() {
+  const navigate = useNavigate();
+
+  const bestRoute = useBestRouteStore.use.bestRoute();
+
+  const { error, loading, warning, swap } = useConfirmSwap();
+
+  return (
+    <ConfirmSwap
+      onConfirm={swap.bind(null)}
+      onBack={navigate.bind(null, -1)}
+      bestRoute={bestRoute}
+      loading={loading}
+      error={error}
+      warning={warning}
+    />
+  );
+}

package/src/pages/ConfirmWalletsPage.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { ConfirmWallets } from '@rango-dev/ui';
+import { useNavigate } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useWalletsStore } from '../store/wallets';
+import { useWallets } from '@rango-dev/wallets-core';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { getRequiredChains, getSelectableWallets, SelectedWallet } from '../utils/wallets';
+import { requiredWallets } from '../utils/swap';
+
+export interface SelectableWallet extends SelectedWallet {
+  image: string;
+  selected: boolean;
+}
+
+export function ConfirmWalletsPage() {
+  const navigate = useNavigate();
+
+  const bestRoute = useBestRouteStore.use.bestRoute();
+
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+
+  const { getWalletInfo } = useWallets();
+  const confirmDisabled = !requiredWallets(bestRoute).every((chain) =>
+    selectedWallets.map((wallet) => wallet.chain).includes(chain),
+  );
+
+  useEffect(() => {
+    initSelectedWallets();
+  }, []);
+
+  return (
+    <ConfirmWallets
+      requiredWallets={getRequiredChains(bestRoute)}
+      selectableWallets={getSelectableWallets(
+        accounts,
+        selectedWallets,
+        getWalletInfo,
+        getRequiredChains(bestRoute),
+      )}
+      onBack={() => navigate(-1)}
+      swap={bestRoute!}
+      onConfirm={() => navigate(navigationRoutes.confirmSwap)}
+      onChange={(wallet) => setSelectedWallet(wallet)}
+      confirmDisabled={confirmDisabled}
+    />
+  );
+}