fix: [GPR-477][OnRamp Widget] Fix default crypto amount (#1589)

immutable · Mar 13, 2024 · d221dc1 · d221dc1
1 parent bde5534
commit d221dc1
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 41 deletions.
diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.test.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.test.ts
@@ -5,11 +5,19 @@ import { FiatRampService, FiatRampWidgetParams } from './fiatRamp';
 import { ExchangeType, OnRampProvider } from '../types';
 import { HttpClient } from '../api/http';
 
-const defaultWidgetUrl = 'https://global-stg.transak.com?apiKey=mock-api-key'
-+ '&network=immutablezkevm&defaultPaymentMethod=credit_debit_card&disablePaymentMethods=sepa_bank_transfer,'
-+ 'gbp_bank_transfer,pm_cash_app,pm_jwire,pm_paymaya,pm_bpi,pm_ubp,pm_grabpay,pm_shopeepay,pm_gcash,pm_pix,'
-+ 'pm_astropay,pm_pse,inr_bank_transfer&productsAvailed=buy&exchangeScreenTitle=Buy&themeColor=0D0D0D'
-+ '&defaultFiatAmount=50&defaultFiatCurrency=usd';
+const defaultURL = 'https://global-stg.transak.com';
+const defaultParams = {
+  apiKey: 'mock-api-key',
+  network: 'immutablezkevm',
+  defaultPaymentMethod: 'credit_debit_card',
+  disablePaymentMethods: 'sepa_bank_transfer,gbp_bank_transfer,pm_cash_app,pm_jwire,pm_paymaya,pm_bpi,pm_ubp,pm_grabpay,pm_shopeepay,pm_gcash,pm_pix,pm_astropay,pm_pse,inr_bank_transfer', // eslint-disable-line max-len
+  productsAvailed: 'buy',
+  exchangeScreenTitle: 'Buy',
+  themeColor: '0D0D0D',
+  defaultFiatCurrency: 'usd',
+};
+
+const defaultWidgetUrl = `${defaultURL}?${new URLSearchParams(defaultParams).toString()}`;
 
 jest.mock('../config/remoteConfigFetcher');
 
@@ -117,8 +125,23 @@ describe('FiatRampService', () => {
       };
       const result = await fiatRampService.createWidgetUrl(params);
       expect(result).toContain(defaultWidgetUrl);
-      expect(result).toContain('&email=passport.user%40immutable.com');
-      expect(result).toContain('&isAutoFillUserData=true&disableWalletAddressForm=true');
+      expect(result).toContain('&email=passport.user%2540immutable.com');
+      expect(result).toContain('&isAutoFillUserData=true');
+      expect(result).toContain('&disableWalletAddressForm=true');
+    });
+
+    it(`should return widget url with defaultFiatAmount and defaultCryptoCurrency query params when tokenAmount and
+    tokenSymbol are no present`, async () => {
+      const params: FiatRampWidgetParams = {
+        exchangeType: ExchangeType.ONRAMP,
+        isPassport: false,
+      };
+      const result = await fiatRampService.createWidgetUrl(params);
+      expect(result).toContain(defaultWidgetUrl);
+      expect(result).toContain('&defaultFiatAmount=50');
+      expect(result).toContain('&defaultCryptoCurrency=IMX');
+      expect(result).not.toContain('&defaultCryptoAmount=100');
+      expect(result).not.toContain('&cryptoCurrencyCode=ETH');
     });
 
     it(`should return widget url with defaultCryptoAmount and cryptoCurrencyCode query params when tokenAmount and
@@ -132,7 +155,9 @@ describe('FiatRampService', () => {
       const result = await fiatRampService.createWidgetUrl(params);
       expect(result).toContain(defaultWidgetUrl);
       expect(result).toContain('&defaultCryptoAmount=100');
-      expect(result).toContain('&defaultCryptoCurrency=ETH');
+      expect(result).toContain('&cryptoCurrencyCode=ETH');
+      expect(result).not.toContain('&defaultFiatAmount=');
+      expect(result).not.toContain('&defaultCryptoCurrency=IMX');
     });
 
     it('should return widget url with walletAddress query params when walletAddress is present', async () => {
@@ -154,7 +179,7 @@ describe('FiatRampService', () => {
       };
       const result = await fiatRampService.createWidgetUrl(params);
       expect(result).toContain(defaultWidgetUrl);
-      expect(result).toContain('&cryptoCurrencyList=eth,imx');
+      expect(result).toContain('&cryptoCurrencyList=eth%2Cimx');
     });
   });
 });
diff --git a/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts b/packages/checkout/sdk/src/fiatRamp/fiatRamp.ts
@@ -1,7 +1,5 @@
 import { ExchangeType } from '../types/fiatRamp';
-import {
-  OnRampConfig, OnRampProvider, OnRampProviderFees,
-} from '../types';
+import { OnRampConfig, OnRampProvider, OnRampProviderFees } from '../types';
 import { CheckoutConfiguration } from '../config';
 import { TRANSAK_API_BASE_URL } from '../env';
 
@@ -35,48 +33,63 @@ export class FiatRampService {
     return (await this.getTransakWidgetUrl(params));
   }
 
-  private async getTransakWidgetUrl(params: FiatRampWidgetParams): Promise<string> {
-    let widgetUrl = `${TRANSAK_API_BASE_URL[this.config.environment]}?`;
-    const onRampConfig = (await this.config.remote.getConfig('onramp')) as OnRampConfig;
-    const apiKey = onRampConfig[OnRampProvider.TRANSAK].publishableApiKey;
-    const transakPublishableKey = `apiKey=${apiKey}`;
-    const zkevmNetwork = 'network=immutablezkevm';
-    const defaultPaymentMethod = 'defaultPaymentMethod=credit_debit_card';
-    const disableBankTransfer = 'disablePaymentMethods=sepa_bank_transfer,gbp_bank_transfer,'
-      + 'pm_cash_app,pm_jwire,pm_paymaya,pm_bpi,pm_ubp,pm_grabpay,pm_shopeepay,pm_gcash,pm_pix,'
-      + 'pm_astropay,pm_pse,inr_bank_transfer';
-    const productsAvailed = 'productsAvailed=buy';
-    const exchangeScreenTitle = 'exchangeScreenTitle=Buy';
-    const themeColor = 'themeColor=0D0D0D';
-    const defaultFiat = 'defaultFiatAmount=50&defaultFiatCurrency=usd';
+  private async getTransakWidgetUrl(
+    params: FiatRampWidgetParams,
+  ): Promise<string> {
+    const onRampConfig = (await this.config.remote.getConfig(
+      'onramp',
+    )) as OnRampConfig;
+
+    const widgetUrl = TRANSAK_API_BASE_URL[this.config.environment];
+    let widgetParams: Record<string, any> = {
+      apiKey: onRampConfig[OnRampProvider.TRANSAK].publishableApiKey,
+      network: 'immutablezkevm',
+      defaultPaymentMethod: 'credit_debit_card',
+      disablePaymentMethods: 'sepa_bank_transfer,gbp_bank_transfer,pm_cash_app,pm_jwire,pm_paymaya,'
+        + 'pm_bpi,pm_ubp,pm_grabpay,pm_shopeepay,pm_gcash,pm_pix,pm_astropay,pm_pse,inr_bank_transfer',
+      productsAvailed: 'buy',
+      exchangeScreenTitle: 'Buy',
+      themeColor: '0D0D0D',
+      defaultFiatCurrency: 'usd',
+    };
 
-    widgetUrl += `${transakPublishableKey}&`
-      + `${zkevmNetwork}&`
-      + `${defaultPaymentMethod}&`
-      + `${disableBankTransfer}&`
-      + `${productsAvailed}&`
-      + `${exchangeScreenTitle}&`
-      + `${themeColor}&`
-      + `${defaultFiat}`;
     if (params.isPassport && params.email) {
-      const encodedEmail = encodeURIComponent(params.email);
-      widgetUrl += `&email=${encodedEmail}&isAutoFillUserData=true&disableWalletAddressForm=true`;
+      widgetParams = {
+        ...widgetParams,
+        email: encodeURIComponent(params.email),
+        isAutoFillUserData: true,
+        disableWalletAddressForm: true,
+      };
     }
 
     if (params.tokenAmount && params.tokenSymbol) {
-      widgetUrl += `&defaultCryptoAmount=${params.tokenAmount}&defaultCryptoCurrency=${params.tokenSymbol}`;
+      widgetParams = {
+        ...widgetParams,
+        defaultCryptoAmount: params.tokenAmount,
+        cryptoCurrencyCode: params.tokenSymbol,
+      };
     } else {
-      widgetUrl += '&defaultCryptoCurrency=IMX';
+      widgetParams = {
+        ...widgetParams,
+        defaultFiatAmount: '50',
+        defaultCryptoCurrency: 'IMX',
+      };
     }
 
     if (params.walletAddress) {
-      widgetUrl += `&walletAddress=${params.walletAddress}`;
+      widgetParams = {
+        ...widgetParams,
+        walletAddress: params.walletAddress,
+      };
     }
 
     if (params.allowedTokens) {
-      widgetUrl += `&cryptoCurrencyList=${params.allowedTokens?.join(',').toLowerCase()}`;
+      widgetParams = {
+        ...widgetParams,
+        cryptoCurrencyList: params.allowedTokens?.join(',').toLowerCase(),
+      };
     }
 
-    return widgetUrl;
+    return `${widgetUrl}?${new URLSearchParams(widgetParams).toString()}`;
   }
 }