fix(checkout-widgets): Fix colour of Buy button

Author: keithbro-imx

packages/checkout/sdk/src/fiatRamp/fiatRamp.test.ts

@@ -106,10 +106,10 @@ describe('FiatRampService', () => {
 
     it(`should return widget url with non-configurable query params when onRampProvider is Transak' +
       'and default to IMX`, async () => {
-      const params: FiatRampWidgetParams = {
+      const params = {
         exchangeType: ExchangeType.ONRAMP,
         isPassport: false,
-      };
+      } as FiatRampWidgetParams;
       const result = await fiatRampService.createWidgetUrl(params, mockedHttpClient);
       expect(result).toContain('https://global-stg.transak.com');
       expect(mockedHttpClient.post).toHaveBeenCalledWith(
@@ -123,11 +123,11 @@ describe('FiatRampService', () => {
 
     it(`should return widget url with encoded email, isAutoFillUserData and disableWalletAddressForm query params
     for passport users`, async () => {
-      const params: FiatRampWidgetParams = {
+      const params = {
         exchangeType: ExchangeType.ONRAMP,
         isPassport: true,
         email: '[email protected]',
-      };
+      } as FiatRampWidgetParams;
       const result = await fiatRampService.createWidgetUrl(params, mockedHttpClient);
       expect(result).toContain('https://global-stg.transak.com');
       expect(mockedHttpClient.post).toHaveBeenCalledWith(
@@ -143,10 +143,10 @@ describe('FiatRampService', () => {
 
     it(`should return widget url with defaultFiatAmount and defaultCryptoCurrency query params when tokenAmount and
     tokenSymbol are not present`, async () => {
-      const params: FiatRampWidgetParams = {
+      const params = {
         exchangeType: ExchangeType.ONRAMP,
         isPassport: false,
-      };
+      } as FiatRampWidgetParams;
       const result = await fiatRampService.createWidgetUrl(params, mockedHttpClient);
       expect(result).toContain('https://global-stg.transak.com');
       expect(mockedHttpClient.post).toHaveBeenCalledWith(
@@ -161,12 +161,12 @@ describe('FiatRampService', () => {
 
     it(`should return widget url with defaultCryptoAmount and cryptoCurrencyCode query params when tokenAmount and
     tokenSymbol is present`, async () => {
-      const params: FiatRampWidgetParams = {
+      const params = {
         exchangeType: ExchangeType.ONRAMP,
         isPassport: false,
         tokenAmount: '100',
         tokenSymbol: 'ETH',
-      };
+      } as FiatRampWidgetParams;
       const result = await fiatRampService.createWidgetUrl(params, mockedHttpClient);
       expect(result).toContain('https://global-stg.transak.com');
       expect(mockedHttpClient.post).toHaveBeenCalledWith(
@@ -180,11 +180,11 @@ describe('FiatRampService', () => {
     });
 
     it('should return widget url with walletAddress query params when walletAddress is present', async () => {
-      const params: FiatRampWidgetParams = {
+      const params = {
         exchangeType: ExchangeType.ONRAMP,
         isPassport: false,
         walletAddress: '0x1234567890',
-      };
+      } as FiatRampWidgetParams;
       const result = await fiatRampService.createWidgetUrl(params, mockedHttpClient);
       expect(result).toContain('https://global-stg.transak.com');
       expect(mockedHttpClient.post).toHaveBeenCalledWith(
@@ -197,11 +197,11 @@ describe('FiatRampService', () => {
     });
 
     it('should return widget url with allowed crypto tokens in query params when allowed list is present', async () => {
-      const params: FiatRampWidgetParams = {
+      const params = {
         exchangeType: ExchangeType.ONRAMP,
         isPassport: false,
         allowedTokens: ['ETH', 'IMX'],
-      };
+      } as FiatRampWidgetParams;
       const result = await fiatRampService.createWidgetUrl(params, mockedHttpClient);
       expect(result).toContain('https://global-stg.transak.com');
       expect(mockedHttpClient.post).toHaveBeenCalledWith(

packages/checkout/sdk/src/fiatRamp/fiatRamp.ts

@@ -7,13 +7,13 @@ import { HttpClient } from '../api/http';
 export interface FiatRampWidgetParams {
   exchangeType: ExchangeType;
   isPassport: boolean;
-  walletAddress?: string;
-  tokenAmount?: string;
-  tokenSymbol?: string;
-  email?: string;
-  allowedTokens?: string[];
-  showMenu?: boolean;
-  customSubTitle?: string;
+  walletAddress: string | undefined;
+  tokenAmount: string | undefined;
+  tokenSymbol: string | undefined;
+  email: string | undefined;
+  allowedTokens: string[] | undefined;
+  showMenu: boolean | undefined;
+  customSubTitle: string | undefined;
 }
 
 export class FiatRampService {
@@ -57,7 +57,7 @@ export class FiatRampService {
       disable_payment_methods: '',
       products_availed: 'buy',
       exchange_screen_title: params.customSubTitle === '' ? ' ' : (params.customSubTitle ?? 'Buy'),
-      theme_color: '0D0D0D',
+      theme_color: 'FFFFFF', // this only controls the background colour of the Buy button
       default_crypto_currency: params.tokenSymbol || 'IMX',
       hide_menu: !(params.showMenu ?? true),
     };

packages/checkout/sdk/src/sdk.ts

@@ -8,7 +8,7 @@ import * as balances from './balances';
 import { CheckoutConfiguration } from './config';
 import * as connect from './connect';
 import { CheckoutError, CheckoutErrorType } from './errors';
-import { FiatRampService, FiatRampWidgetParams } from './fiatRamp';
+import { FiatRampService } from './fiatRamp';
 import * as gasEstimatorService from './gasEstimate';
 import * as network from './network';
 import * as provider from './provider';
@@ -671,7 +671,7 @@ export class Checkout {
       allowedTokens,
       showMenu: params.showMenu,
       customSubTitle: params.customSubTitle,
-    } as FiatRampWidgetParams);
+    });
   }
 
   /**

packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts

@@ -29,23 +29,11 @@ type UseTransakIframeProps = {
 
 const MAX_GAS_LIMIT = '30000000';
 
-// TODO: Move to common config file inside Checkout SDK while refactoring onRamp
-// TODO: Get transak config from checkout SDK
-export const TRANSAK_WIDGET_BASE_URL = {
-  [Environment.SANDBOX]: 'https://global-stg.transak.com',
-  [Environment.PRODUCTION]: 'https://global.transak.com/',
-};
-
 export const TRANSAK_API_BASE_URL = {
   [Environment.SANDBOX]: 'https://api-stg.transak.com',
   [Environment.PRODUCTION]: 'https://api.transak.com',
 };
 
-export const TRANSAK_ENVIRONMENT = {
-  [Environment.SANDBOX]: 'STAGING',
-  [Environment.PRODUCTION]: 'PRODUCTION',
-};
-
 export const TRANSAK_API_KEY = {
   [Environment.SANDBOX]: 'd14b44fb-0f84-4db5-affb-e044040d724b',
   [Environment.PRODUCTION]: 'ad1bca70-d917-4628-bb0f-5609537498bc',