[WT-1419] Update swap and bridge web components to allow attribute changes (#860)

Author: deepti-imx

packages/checkout/widgets-lib/src/lib/testUtils.ts

@@ -167,6 +167,12 @@ export const cyIntercept = (overrides?: {
     ...defaultTokensConfig,
     ...overrides?.tokenConfigOverrides && overrides.tokenConfigOverrides,
   });
+  cy.intercept('https://cdn.segment.com/v1/projects/b69BcXnFXdaiFC6MqRQiHvjcPrTxftZl/settings', {
+    writeKey: 'segment-mock-write-key',
+  });
+  cy.intercept('https://cdn.segment.com/v1/projects//settings', {
+    writeKey: 'segment-mock-write-key',
+  });
   cy.intercept(
     `${checkoutApi}/fiat/coins/all*`,
     overrides?.cryptoFiatOverrides?.coins || [

packages/checkout/widgets-lib/src/widgets/ImmutableWebComponent.cy.tsx

@@ -6,10 +6,11 @@ import { WalletProviderName } from '@imtbl/checkout-sdk';
 import { ExternalProvider, Web3Provider } from '@ethersproject/providers';
 import { ImmutableConnect } from './connect/ConnectWebComponent';
 import { ImmutableBridge } from './bridge/BridgeWebComponent';
-import { cySmartGet } from '../lib/testUtils';
+import { cyIntercept, cySmartGet } from '../lib/testUtils';
 
 describe('ImmutableWebComponent', () => {
   before(() => {
+    cyIntercept();
     window.customElements.define('imtbl-connect', ImmutableConnect);
   });
 
@@ -35,6 +36,10 @@ describe('BridgeWebComponent with Passport', () => {
     window.customElements.define('imtbl-bridge', ImmutableBridge);
   });
 
+  beforeEach(() => {
+    cyIntercept();
+  });
+
   it('should show BridgeComingSoon screen when mounting bridge widget with passport provider', () => {
     const reference = createRef<ImmutableBridge>();
     const testPassportProvider = {
@@ -56,10 +61,20 @@ describe('BridgeWebComponent with Passport', () => {
 
   it('should show BridgeComingSoon screen when mounting bridge widget with passport walletProvider', () => {
     const reference = createRef<ImmutableBridge>();
-
+    const testPassportInstance = {
+      connectEvm: cy.stub().returns({
+        isPassport: true,
+        request: cy.stub(),
+      }),
+    } as any as Passport;
     mount(
-      <imtbl-bridge ref={reference} walletProvider={WalletProviderName.PASSPORT} />,
-    );
+      <imtbl-bridge ref={reference} />,
+    ).then(() => {
+      (document.getElementsByTagName('imtbl-bridge')[0] as ImmutableBridge)?.addPassportOption(testPassportInstance);
+    }).then(() => {
+      reference.current?.setAttribute('walletProvider', WalletProviderName.PASSPORT);
+    });
+
     cySmartGet('bridge-coming-soon').should('be.visible');
   });
 });

packages/checkout/widgets-lib/src/widgets/ImmutableWebComponent.tsx

@@ -33,10 +33,7 @@ export abstract class ImmutableWebComponent extends HTMLElement {
     if (name === 'widgetconfig') {
       this.widgetConfig = this.parseWidgetConfig(newValue);
       this.updateCheckout();
-    } else {
-      this[name] = (newValue as string)?.toLowerCase();
     }
-    this.renderWidget();
   }
 
   updateCheckout() {

packages/checkout/widgets-lib/src/widgets/bridge/BridgeWebComponent.tsx

@@ -20,6 +20,11 @@ export class ImmutableBridge extends ImmutableWebComponent {
 
   walletProvider: WalletProviderName | undefined = undefined;
 
+  static get observedAttributes(): string[] {
+    const baseObservedAttributes = super.observedAttributes;
+    return [...baseObservedAttributes, 'amount', 'fromcontractaddress', 'walletprovider'];
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.fromContractAddress = this.getAttribute('fromContractAddress')?.toLowerCase() ?? '';
@@ -31,6 +36,22 @@ export class ImmutableBridge extends ImmutableWebComponent {
     this.renderWidget();
   }
 
+  attributeChangedCallback(name: string, oldValue: any, newValue: any): void {
+    super.attributeChangedCallback(name, oldValue, newValue);
+
+    if (name === 'amount') {
+      this.amount = newValue;
+    }
+    if (name === 'fromcontractaddress') {
+      this.fromContractAddress = newValue;
+    }
+    if (name === 'walletprovider') {
+      this.walletProvider = newValue.toLowerCase() as WalletProviderName;
+    }
+
+    this.renderWidget();
+  }
+
   validateInputs(): void {
     if (!isValidWalletProvider(this.walletProvider)) {
       // eslint-disable-next-line no-console

packages/checkout/widgets-lib/src/widgets/connect/ConnectWebComponent.tsx

@@ -10,6 +10,12 @@ export class ImmutableConnect extends ImmutableWebComponent {
     this.renderWidget();
   }
 
+  attributeChangedCallback(name: string, oldValue: any, newValue: any): void {
+    super.attributeChangedCallback(name, oldValue, newValue);
+
+    this.renderWidget();
+  }
+
   validateInputs(): void {
     // not implemented as nothing to validate for ConnectWidget
   }

packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWebComponent.tsx

@@ -10,17 +10,17 @@ import { ConnectTargetLayer, getL1ChainId, getL2ChainId } from '../../lib';
 import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 
 export class ImmutableOnRamp extends ImmutableWebComponent {
-  static get observedAttributes(): string[] {
-    const baseObservedAttributes = super.observedAttributes;
-    return [...baseObservedAttributes, 'amount', 'contractaddress'];
-  }
-
   amount = '';
 
   walletProvider?: WalletProviderName;
 
   contractAddress = '';
 
+  static get observedAttributes(): string[] {
+    const baseObservedAttributes = super.observedAttributes;
+    return [...baseObservedAttributes, 'amount', 'contractaddress', 'walletprovider'];
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.amount = this.getAttribute('amount') ?? '';
@@ -38,6 +38,9 @@ export class ImmutableOnRamp extends ImmutableWebComponent {
     if (name === 'contractaddress') {
       this.contractAddress = newValue;
     }
+    if (name === 'walletprovider') {
+      this.walletProvider = newValue.toLowerCase() as WalletProviderName;
+    }
 
     this.renderWidget();
   }

packages/checkout/widgets-lib/src/widgets/swap/SwapWebComponent.tsx

@@ -21,6 +21,11 @@ export class ImmutableSwap extends ImmutableWebComponent {
 
   toContractAddress = '';
 
+  static get observedAttributes(): string[] {
+    const baseObservedAttributes = super.observedAttributes;
+    return [...baseObservedAttributes, 'amount', 'fromcontractaddress', 'tocontractaddress', 'walletprovider'];
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.walletProvider = this.getAttribute(
@@ -32,6 +37,24 @@ export class ImmutableSwap extends ImmutableWebComponent {
     this.renderWidget();
   }
 
+  attributeChangedCallback(name: string, oldValue: any, newValue: any): void {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'amount') {
+      this.amount = newValue;
+    }
+    if (name === 'fromcontractaddress') {
+      this.fromContractAddress = newValue;
+    }
+    if (name === 'tocontractaddress') {
+      this.toContractAddress = newValue;
+    }
+    if (name === 'walletprovider') {
+      this.walletProvider = newValue.toLowerCase() as WalletProviderName;
+    }
+
+    this.renderWidget();
+  }
+
   validateInputs(): void {
     if (!isValidWalletProvider(this.walletProvider)) {
       // eslint-disable-next-line no-console

packages/checkout/widgets-lib/src/widgets/wallet/WalletWebComponent.tsx

@@ -15,12 +15,27 @@ import { CustomAnalyticsProvider } from '../../context/analytics-provider/Custom
 export class ImmutableWallet extends ImmutableWebComponent {
   walletProvider: WalletProviderName | undefined = undefined;
 
+  static get observedAttributes(): string[] {
+    const baseObservedAttributes = super.observedAttributes;
+    return [...baseObservedAttributes, 'walletprovider'];
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.walletProvider = this.getAttribute('walletProvider')?.toLowerCase() as WalletProviderName;
     this.renderWidget();
   }
 
+  attributeChangedCallback(name: string, oldValue: any, newValue: any): void {
+    super.attributeChangedCallback(name, oldValue, newValue);
+
+    if (name === 'walletprovider') {
+      this.walletProvider = newValue.toLowerCase() as WalletProviderName;
+    }
+
+    this.renderWidget();
+  }
+
   validateInputs(): void {
     if (!isValidWalletProvider(this.walletProvider)) {
       // eslint-disable-next-line no-console