update

packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts

@@ -27,6 +27,15 @@ export class FungibleTokenTransfer extends BaseComponent {
   @property({ type: String })
   environment?: Environment = Environment.MAINNET;
 
+  @property({ attribute: false, type: Object })
+  whitelistedSourceNetworks?: string[];
+
+  @property({ attribute: false, type: Object })
+  whitelistedDestinationNetworks?: string[];
+
+  @property({ attribute: false, type: Object })
+  whitelistedSourceResources?: string[];
+
   @property({ type: Object })
   onSourceNetworkSelected?: (domain: Domain) => void;
 
@@ -35,7 +44,12 @@ export class FungibleTokenTransfer extends BaseComponent {
 
   connectedCallback(): void {
     super.connectedCallback();
-    void this.transferController.init(this.environment!);
+    void this.transferController.init(
+      this.environment!,
+      this.whitelistedSourceNetworks,
+      this.whitelistedDestinationNetworks,
+      this.whitelistedSourceResources
+    );
   }
 
   private onClick = (): void => {

packages/widget/src/context/config.ts

@@ -28,15 +28,6 @@ export class ConfigContextProvider extends BaseComponent {
     initialValue: {}
   });
 
-  @property({ attribute: false, type: Object })
-  whitelistedSourceNetworks?: string[];
-
-  @property({ attribute: false, type: Object })
-  whitelistedDestinationNetworks?: string[];
-
-  @property({ attribute: false, type: Object })
-  whitelistedSourceResources?: string[];
-
   @property({ attribute: false, type: Object })
   walletConnectOptions?: WalletConnectOptions;
 
@@ -56,10 +47,7 @@ export class ConfigContextProvider extends BaseComponent {
       theme: this.theme,
       walletConnectOptions: this.walletConnectOptions,
       appMetaData: this.appMetadata,
-      walletModules: this.walletModules,
-      whitelistedSourceNetworks: this.whitelistedSourceNetworks,
-      whitelistedDestinationNetworks: this.whitelistedDestinationNetworks,
-      whitelistedSourceResources: this.whitelistedSourceResources
+      walletModules: this.walletModules
     });
   }
 

packages/widget/src/context/wallet.ts

@@ -78,7 +78,8 @@ export class WalletContextProvider extends BaseComponent {
   @property({ attribute: false })
   substrateProviders?: Array<ApiPromise> = [];
 
-  @property({ type: String }) environment?: Environment;
+  @property({ type: String })
+  environment?: Environment;
 
   async connectedCallback(): Promise<void> {
     super.connectedCallback();

packages/widget/src/controllers/transfers/fungible-token-transfer.ts

@@ -22,12 +22,12 @@ import type {
   ParachainID,
   SubstrateFee
 } from '@buildwithsygma/sygma-sdk-core/substrate';
-import { configContext, walletContext } from '../../context';
+import type { WalletContext } from '../../context';
+import { walletContext } from '../../context';
 import { MAINNET_EXPLORER_URL, TESTNET_EXPLORER_URL } from '../../constants';
 
 import { SdkInitializedEvent } from '../../interfaces';
 import { substrateProviderContext } from '../../context/wallet';
-import type { WalletContext } from '../../context';
 import { buildEvmFungibleTransactions, executeNextEvmTransaction } from './evm';
 import {
   buildSubstrateFungibleTransactions,
@@ -89,9 +89,12 @@ export class FungibleTokenTransferController implements ReactiveController {
   //source network chain id -> Route[]
   protected routesCache: Map<number, Route[]> = new Map();
 
+  protected whitelistedSourceNetworks?: string[] = [];
+  protected whitelistedDestinationNetworks?: string[] = [];
+  protected whitelistedSourceResources?: string[] = [];
+
   host: ReactiveElement;
   walletContext: ContextConsumer<typeof walletContext, ReactiveElement>;
-  configContext: ContextConsumer<typeof configContext, ReactiveElement>;
   substrateProviderContext: ContextConsumer<
     typeof substrateProviderContext,
     ReactiveElement
@@ -118,7 +121,7 @@ export class FungibleTokenTransferController implements ReactiveController {
   /**
    * Provides substrate provider
    * based on parachain id
-   * @param {ParachainId} parachainId
+   * @param {parachainId} parachainId
    * @returns {ApiPromise | undefined}
    */
   getSubstrateProvider(parachainId: ParachainID): ApiPromise | undefined {
@@ -131,11 +134,6 @@ export class FungibleTokenTransferController implements ReactiveController {
     (this.host = host).addController(this);
     this.config = new Config();
 
-    this.configContext = new ContextConsumer(host, {
-      context: configContext,
-      subscribe: true
-    });
-
     this.walletContext = new ContextConsumer(host, {
       context: walletContext,
       subscribe: true,
@@ -207,26 +205,28 @@ export class FungibleTokenTransferController implements ReactiveController {
     );
   };
 
-  async init(env: Environment): Promise<void> {
+  async init(
+    env: Environment,
+    whitelistedSourceNetworks?: string[],
+    whitelistedDestinationNetworks?: string[],
+    whitelistedSourceResources?: string[]
+  ): Promise<void> {
     this.host.requestUpdate();
     this.env = env;
+    this.whitelistedSourceNetworks = whitelistedSourceNetworks;
+    this.whitelistedDestinationNetworks = whitelistedDestinationNetworks;
+    this.whitelistedSourceResources = whitelistedSourceResources;
+
     await this.retryInitSdk();
-    await this.config.init(1, this.env);
     this.supportedSourceNetworks = this.config
       .getDomains()
       .filter((network) =>
-        this.filterWhitelistedNetworks(
-          this.configContext.value?.whitelistedSourceNetworks,
-          network
-        )
+        this.filterWhitelistedNetworks(whitelistedSourceNetworks, network)
       );
     this.supportedDestinationNetworks = this.config
       .getDomains()
       .filter((network) =>
-        this.filterWhitelistedNetworks(
-          this.configContext.value?.whitelistedDestinationNetworks,
-          network
-        )
+        this.filterWhitelistedNetworks(whitelistedDestinationNetworks, network)
       );
     this.host.requestUpdate();
   }
@@ -420,7 +420,7 @@ export class FungibleTokenTransferController implements ReactiveController {
         .filter((route) => route.toDomain.chainId !== sourceNetwork.chainId)
         .filter((route) =>
           this.filterWhitelistedNetworks(
-            this.configContext.value?.whitelistedDestinationNetworks,
+            this.whitelistedDestinationNetworks,
             route.toDomain
           )
         )
@@ -452,11 +452,10 @@ export class FungibleTokenTransferController implements ReactiveController {
             !this.supportedResources.includes(route.resource))
       )
       .filter((route) => {
-        const { whitelistedSourceResources } = this.configContext.value ?? {};
         // skip filter if resources are not specified
-        if (!whitelistedSourceResources?.length) return true;
+        if (!this.whitelistedSourceResources?.length) return true;
 
-        return whitelistedSourceResources.includes(route.resource.symbol!);
+        return this.whitelistedSourceResources.includes(route.resource.symbol!);
       })
       .map((route) => route.resource);
 

packages/widget/src/widget.ts

@@ -101,9 +101,6 @@ class SygmaProtocolWidget
         .theme=${this.theme}
         .walletConnectOptions=${this.walletConnectOptions}
         .walletModules=${this.walletModules}
-        .whitelistedSourceNetworks=${this.whitelistedSourceNetworks}
-        .whitelistedDestinationNetworks=${this.whitelistedDestinationNetworks}
-        .whitelistedSourceResources=${this.whitelistedSourceResources}
       >
         <sygma-wallet-context-provider
           .substrateProviders=${this.substrateProviders}
@@ -124,6 +121,10 @@ class SygmaProtocolWidget
                 .onSourceNetworkSelected=${(domain: Domain) =>
                   (this.sourceNetwork = domain)}
                 environment=${Environment.TESTNET}
+                .whitelistedSourceNetworks=${this.whitelistedSourceNetworks}
+                .whitelistedDestinationNetworks=${this
+                  .whitelistedDestinationNetworks}
+                .whitelistedSourceResources=${this.whitelistedSourceResources}
               >
               </sygma-fungible-transfer>
             </section>

packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts

@@ -1,10 +1,10 @@
-import { fixture, fixtureCleanup } from '@open-wc/testing-helpers';
+import { aTimeout, fixture, fixtureCleanup } from '@open-wc/testing-helpers';
 import { afterEach, assert, describe, it, vi } from 'vitest';
 import { html } from 'lit';
 import type { Domain } from '@buildwithsygma/sygma-sdk-core';
-import { Network } from '@buildwithsygma/sygma-sdk-core';
-import type { AddressInput } from '../../../../../src/components';
+import { Environment, Network } from '@buildwithsygma/sygma-sdk-core';
 import { FungibleTokenTransfer } from '../../../../../src/components';
+import type { AddressInput } from '../../../../../src/components';
 import type { WalletContextProvider } from '../../../../../src/context';
 import { WalletUpdateEvent } from '../../../../../src/context';
 import { getMockedEvmWallet } from '../../../../utils';
@@ -101,4 +101,38 @@ describe('Fungible token Transfer', function () {
 
     assert(sygmaAddressInput.address === '');
   });
+
+  it('should filter whitelisted networks and resources', async () => {
+    const whitelistedSourceNetworks = ['cronos'];
+    const whitelistedDestinationNetworks = ['sepolia'];
+
+    const fungibleTransfer = await fixture<FungibleTokenTransfer>(
+      html`<sygma-fungible-transfer
+        .whitelistedSourceNetworks=${whitelistedSourceNetworks}
+        .whitelistedDestinationNetworks=${whitelistedDestinationNetworks}
+        .whitelistedSourceResources=${['ERC20LRTest']}
+        .environment=${Environment.TESTNET}
+      ></sygma-fungible-transfer>`
+    );
+
+    const [sygmaSourceNetwork, sygmaDestinationNetwork] =
+      fungibleTransfer.shadowRoot!.querySelectorAll('sygma-network-selector');
+
+    // Wait for sdk init
+    await aTimeout(1000);
+
+    assert.isTrue(
+      whitelistedSourceNetworks.includes(
+        sygmaSourceNetwork.networks?.[0]?.name
+      ),
+      `Expected source network to be one of ${whitelistedSourceNetworks.join(', ')}, but got ${sygmaSourceNetwork.networks?.[0]?.name}`
+    );
+
+    assert.isTrue(
+      whitelistedDestinationNetworks.includes(
+        sygmaDestinationNetwork.networks?.[0]?.name
+      ),
+      `Expected destination network to be one of ${whitelistedDestinationNetworks.join(', ')}, but got ${sygmaDestinationNetwork.networks?.[0]?.name}`
+    );
+  });
 });

packages/widget/tests/unit/context/config.test.ts

@@ -28,9 +28,6 @@ describe('config context provider', function () {
     const contextProvider = await fixture<ConfigContextProvider>(html`
       <sygma-config-context-provider
         .appMetadata=${{ name: 'My Dapp' }}
-        .whitelistedSourceNetworks=${['sepolia', 'cronos']}
-        .whitelistedDestinationNetworks=${['mumbai']}
-        .whitelistedSourceResources=${['ERC20LRTest']}
       ></sygma-config-context-provider>
     `);
     const child = await fixture<MyElement>(html` <my-element></my-element> `, {
@@ -45,10 +42,7 @@ describe('config context provider', function () {
       theme: undefined,
       walletConnectOptions: undefined,
       appMetaData: { name: 'My Dapp' },
-      walletModules: undefined,
-      whitelistedSourceNetworks: ['sepolia', 'cronos'],
-      whitelistedDestinationNetworks: ['mumbai'],
-      whitelistedSourceResources: ['ERC20LRTest']
+      walletModules: undefined
     });
   });
 });