diff --git a/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts b/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts index 7f45a2f1..7cbf8c09 100644 --- a/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts +++ b/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 => { diff --git a/packages/widget/src/context/config.ts b/packages/widget/src/context/config.ts index 58dcbb93..b14db7fa 100644 --- a/packages/widget/src/context/config.ts +++ b/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 }); } diff --git a/packages/widget/src/context/wallet.ts b/packages/widget/src/context/wallet.ts index 8058ec78..2000981a 100644 --- a/packages/widget/src/context/wallet.ts +++ b/packages/widget/src/context/wallet.ts @@ -78,7 +78,8 @@ export class WalletContextProvider extends BaseComponent { @property({ attribute: false }) substrateProviders?: Array = []; - @property({ type: String }) environment?: Environment; + @property({ type: String }) + environment?: Environment; async connectedCallback(): Promise { super.connectedCallback(); diff --git a/packages/widget/src/controllers/transfers/fungible-token-transfer.ts b/packages/widget/src/controllers/transfers/fungible-token-transfer.ts index 583413bc..62e12dc4 100644 --- a/packages/widget/src/controllers/transfers/fungible-token-transfer.ts +++ b/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 = new Map(); + protected whitelistedSourceNetworks?: string[] = []; + protected whitelistedDestinationNetworks?: string[] = []; + protected whitelistedSourceResources?: string[] = []; + host: ReactiveElement; walletContext: ContextConsumer; - configContext: ContextConsumer; 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 { + async init( + env: Environment, + whitelistedSourceNetworks?: string[], + whitelistedDestinationNetworks?: string[], + whitelistedSourceResources?: string[] + ): Promise { 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); diff --git a/packages/widget/src/widget.ts b/packages/widget/src/widget.ts index b6e1c9e0..5cd6d924 100644 --- a/packages/widget/src/widget.ts +++ b/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} > (this.sourceNetwork = domain)} environment=${Environment.TESTNET} + .whitelistedSourceNetworks=${this.whitelistedSourceNetworks} + .whitelistedDestinationNetworks=${this + .whitelistedDestinationNetworks} + .whitelistedSourceResources=${this.whitelistedSourceResources} > diff --git a/packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts b/packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts index eaa0099a..f145f77b 100644 --- a/packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts +++ b/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( + html`` + ); + + 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}` + ); + }); }); diff --git a/packages/widget/tests/unit/context/config.test.ts b/packages/widget/tests/unit/context/config.test.ts index 6761faca..2040edc2 100644 --- a/packages/widget/tests/unit/context/config.test.ts +++ b/packages/widget/tests/unit/context/config.test.ts @@ -28,9 +28,6 @@ describe('config context provider', function () { const contextProvider = await fixture(html` `); const child = await fixture(html` `, { @@ -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 }); }); });