Integrated swap UX using Swing.xyz (#229)

* Retrieve quotes for swap

* fix lint problems

* refactor to expected swing quote API

* lint fixes

* implement basic swap Tx signing

* refactor for lint

* token amount selector

* show transaction ID when available

* refine the completion UX

* add i18n definitions

* add feature flag for swap

* add production swap pair definitions

* add progress description at bottom of swap modal

* fix fund wallet CTA

* bubble up fund wallet CTA

* use QR icon for receive button

* text spacing

* mobile breakpoint

* introduce compact token rendering

* use swing v1 platform API

* add slider for source token amount

* only show USD for swaps

* add user context to feature flag

* imporove failed swap UX

* update copy

* fix lint

* updates for extension styling

* bump package version

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/config",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "private": true,
   "description": "Configuration variables for Unstoppable Domains environments",
   "homepage": "https://github.com/unstoppabledomains/domain-profiles#readme",

packages/config/src/env/default.ts

@@ -122,6 +122,134 @@ export default function getDefaultConfig(): Config {
         SEND: ['BTC/BTC', 'MATIC/MATIC', 'SOL/SOL', 'BASE/ETH', 'ETH/ETH'],
         DOMAINS: ['ETH', 'MATIC', 'BASE'],
       },
+      SWAP: {
+        EXCHANGE_HOST_URL: 'https://swap.prod.swing.xyz/v0',
+        PLATFORM_HOST_URL:
+          'https://platform.swing.xyz/api/v1/projects/unstoppable-domains-staging',
+        API_KEY: 'swing-8faf57ed-6f1d-4dbc-94a0-00c28bd1a277',
+        ENVIRONMENT: 'testnet',
+        PROJECT_ID: 'unstoppable-domains-staging',
+        FEE_BPS: 85, // 0.85%
+        MIN_BALANCE_USD: 5,
+        SUPPORTED_TOKENS: {
+          SOURCE: [
+            {
+              swing: {
+                chain: 'sepolia',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'ETH',
+              chainName: 'Ethereum',
+              chainSymbol: 'ETH',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/ETH/icon.svg',
+              environment: 'staging',
+            },
+            {
+              swing: {
+                chain: 'polygon-amoy',
+                symbol: 'POL',
+                type: 'native',
+              },
+              walletType: 'MATIC',
+              chainName: 'Polygon',
+              chainSymbol: 'MATIC',
+              tokenSymbol: 'MATIC',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/MATIC/icon.svg',
+              environment: 'staging',
+            },
+            {
+              swing: {
+                chain: 'polygon-amoy',
+                symbol: 'USDC',
+                type: 'erc20',
+              },
+              walletType: 'MATIC',
+              chainName: 'Polygon',
+              chainSymbol: 'MATIC',
+              tokenSymbol: 'USDC',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/USDC/icon.svg',
+              environment: 'staging',
+            },
+          ],
+          DESTINATION: [
+            {
+              swing: {
+                chain: 'sepolia',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'ETH',
+              chainName: 'Ethereum',
+              chainSymbol: 'ETH',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/ETH/icon.svg',
+              environment: 'staging',
+            },
+            {
+              swing: {
+                chain: 'arbitrum-sepolia',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'ETH',
+              chainName: 'Arbitrum',
+              chainSymbol: 'ARB',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/ARB/icon.svg',
+              environment: 'staging',
+            },
+            {
+              swing: {
+                chain: 'solana-dev',
+                symbol: 'SOL',
+                type: 'native',
+              },
+              walletType: 'SOL',
+              chainName: 'Solana',
+              chainSymbol: 'SOL',
+              tokenSymbol: 'SOL',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/SOL/icon.svg',
+              environment: 'staging',
+            },
+            {
+              swing: {
+                chain: 'bitcoin-testnet',
+                symbol: 'BTC',
+                type: 'native',
+              },
+              walletType: 'BTC',
+              chainName: 'Bitcoin',
+              chainSymbol: 'BTC',
+              tokenSymbol: 'BTC',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/BTC/icon.svg',
+              environment: 'staging',
+            },
+            {
+              swing: {
+                chain: 'base-sepolia',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'BASE',
+              chainName: 'Base',
+              chainSymbol: 'BASE',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/BASE/icon.svg',
+              environment: 'staging',
+            },
+          ],
+        },
+      },
       MOBILE: {
         ANDROID_URL:
           'https://play.google.com/store/apps/details?id=com.unstoppabledomains.manager',

packages/config/src/env/production.ts

@@ -60,6 +60,131 @@ export default function getProductionConfig(): ConfigOverride {
       HOST_URL: 'https://api.unstoppabledomains.com/wallet/v1',
       GET_WALLET_URL:
         'https://unstoppabledomains.com/cart?product=unstoppable-wallet',
+      SWAP: {
+        PLATFORM_HOST_URL:
+          'https://platform.swing.xyz/api/v1/projects/unstoppable-domains',
+        API_KEY: 'swing-37b05c4c-0b6d-43a8-ad54-7bd7168af0ee',
+        ENVIRONMENT: 'production',
+        PROJECT_ID: 'unstoppable-domains',
+        SUPPORTED_TOKENS: {
+          SOURCE: [
+            {
+              swing: {
+                chain: 'ethereum',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'ETH',
+              chainName: 'Ethereum',
+              chainSymbol: 'ETH',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/ETH/icon.svg',
+              environment: 'production',
+            },
+            {
+              swing: {
+                chain: 'polygon',
+                symbol: 'POL',
+                type: 'native',
+              },
+              walletType: 'MATIC',
+              chainName: 'Polygon',
+              chainSymbol: 'MATIC',
+              tokenSymbol: 'MATIC',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/MATIC/icon.svg',
+              environment: 'production',
+            },
+            {
+              swing: {
+                chain: 'base',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'BASE',
+              chainName: 'Base',
+              chainSymbol: 'BASE',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/BASE/icon.svg',
+              environment: 'production',
+            },
+          ],
+          DESTINATION: [
+            {
+              swing: {
+                chain: 'ethereum',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'ETH',
+              chainName: 'Ethereum',
+              chainSymbol: 'ETH',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/ETH/icon.svg',
+              environment: 'production',
+            },
+            {
+              swing: {
+                chain: 'solana',
+                symbol: 'SOL',
+                type: 'native',
+              },
+              walletType: 'SOL',
+              chainName: 'Solana',
+              chainSymbol: 'SOL',
+              tokenSymbol: 'SOL',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/SOL/icon.svg',
+              environment: 'production',
+            },
+            {
+              swing: {
+                chain: 'bitcoin',
+                symbol: 'BTC',
+                type: 'native',
+              },
+              walletType: 'BTC',
+              chainName: 'Bitcoin',
+              chainSymbol: 'BTC',
+              tokenSymbol: 'BTC',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/BTC/icon.svg',
+              environment: 'production',
+            },
+            {
+              swing: {
+                chain: 'polygon',
+                symbol: 'POL',
+                type: 'native',
+              },
+              walletType: 'MATIC',
+              chainName: 'Polygon',
+              chainSymbol: 'MATIC',
+              tokenSymbol: 'MATIC',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/MATIC/icon.svg',
+              environment: 'production',
+            },
+            {
+              swing: {
+                chain: 'base',
+                symbol: 'ETH',
+                type: 'native',
+              },
+              walletType: 'BASE',
+              chainName: 'Base',
+              chainSymbol: 'BASE',
+              tokenSymbol: 'ETH',
+              imageUrl:
+                'https://images.unstoppabledomains.com/images/icons/BASE/icon.svg',
+              environment: 'production',
+            },
+          ],
+        },
+      },
     },
     XMTP: {
       ENVIRONMENT: 'production',

packages/config/src/env/types.ts

@@ -59,6 +59,16 @@ export type BaseChainBlockchainConfig = BaseBlockchainConfig & {
   BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/base/tx/';
 };
 
+export interface SwapConfig {
+  swing: {chain: string; symbol: string; type: 'erc20' | 'native'};
+  walletType: string;
+  chainName: string;
+  chainSymbol: string;
+  tokenSymbol: string;
+  imageUrl: string;
+  environment: string;
+}
+
 export type Config = {
   APP_ENV: AppEnv;
   APP_VERSION: string;
@@ -110,6 +120,19 @@ export type Config = {
       SEND: string[];
       DOMAINS: string[];
     };
+    SWAP: {
+      PLATFORM_HOST_URL: string;
+      EXCHANGE_HOST_URL: string;
+      API_KEY: string;
+      ENVIRONMENT: string;
+      PROJECT_ID: string;
+      FEE_BPS?: number;
+      MIN_BALANCE_USD: number;
+      SUPPORTED_TOKENS: {
+        SOURCE: SwapConfig[];
+        DESTINATION: SwapConfig[];
+      };
+    };
     SIGNATURE_SYMBOL: string;
     MOBILE: {
       ANDROID_URL: string;

packages/config/src/launchdarkly/defaultFlagValues.ts

@@ -12,6 +12,7 @@ export const defaultFlagValues: LaunchDarklyFlagSet = {
   'ud-me-service-domains-enable-social-verification': false,
   'ud-me-service-domains-enable-management': false,
   'ud-me-service-domains-enable-fireblocks': false,
+  'ud-me-service-enable-swap': false,
   'ecommerce-service-users-enable-chat-community-udBlue': false,
   'ecommerce-service-wallets-disable-badges': [],
   'example-number': 0,

packages/config/src/launchdarkly/keys.ts

@@ -10,7 +10,8 @@ export type LaunchDarklyBooleanKey =
   | 'profile-service-enable-wallet-send-to-email'
   | 'ud-me-service-domains-enable-social-verification'
   | 'ud-me-service-domains-enable-fireblocks'
-  | 'ud-me-service-domains-enable-management';
+  | 'ud-me-service-domains-enable-management'
+  | 'ud-me-service-enable-swap';
 
 export type LaunchDarklyNumberKey = 'example-number';
 

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/ui-components",
-  "version": "0.0.52",
+  "version": "0.0.52-browser-extension.1",
   "private": true,
   "description": "An open and reusable suite of Unstoppable Domains management components",
   "keywords": [
@@ -91,6 +91,7 @@
     "qs": "^6.11.2",
     "ramda": "^0.27.1",
     "react": "^17.0.0",
+    "react-canvas-confetti": "^2.0.7",
     "react-chartjs-2": "^5.2.0",
     "react-cookies": "^0.1.1",
     "react-dom": "^17.0.0",