feat(frontend): Use Network wallets for Onramper Widget

src/frontend/src/lib/components/onramper/OnramperWidget.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { nonNullish } from '@dfinity/utils';
 	import { NETWORK_BITCOIN_ENABLED } from '$env/networks.btc.env';
+	import { BTC_MAINNET_NETWORK_ID, ETHEREUM_NETWORK_ID, ICP_NETWORK_ID } from '$env/networks.env';
 	import { BTC_MAINNET_TOKEN } from '$env/tokens.btc.env';
 	import { ICP_TOKEN } from '$env/tokens.env';
 	import { ethereumToken } from '$eth/derived/token.derived';
-	import { icpAccountIdentifierText, icrcAccountIdentifierText } from '$icp/derived/ic.derived';
+	import { icpAccountIdentifierText } from '$icp/derived/ic.derived';
 	import { btcAddressMainnet, ethAddress } from '$lib/derived/address.derived';
 	import { networkBitcoin, networkEthereum } from '$lib/derived/network.derived';
 	import { networks } from '$lib/derived/networks.derived';
-	import { enabledTokens, tokens } from '$lib/derived/tokens.derived';
+	import { enabledTokens } from '$lib/derived/tokens.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { token } from '$lib/stores/token.store';
-	import type { OnramperCryptoWallet, OnramperId, OnramperNetworkId } from '$lib/types/onramper';
-	import { buildOnramperLink, mapOnramperWallets } from '$lib/utils/onramper.utils';
+	import type { OnramperId, OnramperNetworkId, OnramperNetworkWallet } from '$lib/types/onramper';
+	import { buildOnramperLink, mapOnramperNetworkWallets } from '$lib/utils/onramper.utils';
 
 	let defaultCrypto: OnramperId | undefined;
 	$: defaultCrypto =
@@ -33,30 +34,29 @@
 	let onlyCryptoNetworks: OnramperNetworkId[];
 	$: onlyCryptoNetworks = $networks.map((network) => network.buy?.onramperId).filter(nonNullish);
 
-	let wallets: OnramperCryptoWallet[];
-	$: wallets = mapOnramperWallets({
-		tokens: $tokens,
-		walletMap: {
-			bitcoin: $btcAddressMainnet,
-			ethereum: $ethAddress,
-			erc20: $ethAddress,
-			icrc: $icrcAccountIdentifierText,
-			icp: $icpAccountIdentifierText
-		}
+	let networkWallets: OnramperNetworkWallet[];
+	$: networkWallets = mapOnramperNetworkWallets({
+		networks: $networks,
+		walletMap: new Map([
+			[BTC_MAINNET_NETWORK_ID, $btcAddressMainnet],
+			[ETHEREUM_NETWORK_ID, $ethAddress],
+			[ICP_NETWORK_ID, $icpAccountIdentifierText]
+		])
 	});
 
 	let src: string;
 	$: defaultCrypto,
 		onlyCryptos,
 		onlyCryptoNetworks,
-		wallets,
+		networkWallets,
 		(src = buildOnramperLink({
 			mode: 'buy',
 			defaultFiat: 'usd',
 			defaultCrypto,
 			onlyCryptos,
 			onlyCryptoNetworks,
-			wallets,
+			wallets: [],
+			networkWallets,
 			supportRecurringPayments: true,
 			enableCountrySelector: true
 		}));

src/frontend/src/lib/types/onramper.ts

@@ -21,3 +21,8 @@ export interface OnramperCryptoWallet {
 	cryptoId: OnramperId;
 	wallet: OnramperWalletAddress;
 }
+
+export interface OnramperNetworkWallet {
+	networkId: OnramperNetworkId;
+	wallet: OnramperWalletAddress;
+}

src/frontend/src/lib/utils/onramper.utils.ts

@@ -1,10 +1,12 @@
 import { ONRAMPER_API_KEY, ONRAMPER_BASE_URL } from '$env/onramper.env';
+import type { Network } from '$lib/types/network';
 import type {
 	OnramperCryptoWallet,
 	OnramperFiatId,
 	OnramperId,
 	OnramperMode,
 	OnramperNetworkId,
+	OnramperNetworkWallet,
 	OnramperWalletAddress
 } from '$lib/types/onramper';
 import type { Token, TokenStandard } from '$lib/types/token';
@@ -18,18 +20,20 @@ export interface BuildOnramperLinkParams {
 	onlyCryptos: OnramperId[];
 	onlyCryptoNetworks: OnramperNetworkId[];
 	wallets: OnramperCryptoWallet[];
+	networkWallets: OnramperNetworkWallet[];
 	supportRecurringPayments: boolean;
 	enableCountrySelector: boolean;
 }
 
 const arrayToParam = (array: OnramperId[] | OnramperNetworkId[]) => array.join(',');
 
-const walletToParam = ({ cryptoId, wallet }: OnramperCryptoWallet) => `${cryptoId}:${wallet}`;
+const walletToParam = ({ wallet, ...rest }: OnramperCryptoWallet | OnramperNetworkWallet) =>
+	'cryptoId' in rest ? `${rest.cryptoId}:${wallet}` : `${rest.networkId}:${wallet}`;
 
-const walletsToParam = (wallets: OnramperCryptoWallet[]) =>
+const walletsToParam = (wallets: OnramperCryptoWallet[] | OnramperNetworkWallet[]) =>
 	arrayToParam(wallets.map(walletToParam));
 
-const toQueryString = (params: Omit<BuildOnramperLinkParams, 'wallets'>) =>
+const toQueryString = (params: Omit<BuildOnramperLinkParams, 'wallets' | 'networkWallets'>) =>
 	Object.entries(params)
 		.reduce<string[]>(
 			(acc, [key, value]) =>
@@ -57,16 +61,26 @@ const toQueryString = (params: Omit<BuildOnramperLinkParams, 'wallets'>) =>
  * @param {OnramperId[]} params.onlyCryptos - The list of allowed cryptocurrencies.
  * @param {OnramperNetworkId[]} params.onlyCryptoNetworks - The list of allowed cryptocurrency networks.
  * @param {OnramperCryptoWallet} params.wallets - The list of combination of cryptocurrency and wallet addresses.
+ * @param {OnramperNetworkWallet} params.networkWallets - The list of combination of network and wallet addresses.
  * @param {boolean} params.supportRecurringPayments - Whether to support recurring payments.
  * @param {boolean} params.enableCountrySelector - Whether to enable the country selector.
  * @returns The Onramper source link.
  */
-export const buildOnramperLink = ({ wallets, ...params }: BuildOnramperLinkParams) =>
-	`${ONRAMPER_BASE_URL}?apiKey=${ONRAMPER_API_KEY}&${toQueryString(params)}&wallets=${walletsToParam(wallets)}`;
+export const buildOnramperLink = ({
+	wallets,
+	networkWallets,
+	...params
+}: BuildOnramperLinkParams) => {
+	const walletsParam = wallets.length > 0 ? `&wallets=${walletsToParam(wallets)}` : '';
+	const networkWalletsParam =
+		networkWallets.length > 0 ? `&networkWallets=${walletsToParam(networkWallets)}` : '';
+
+	return `${ONRAMPER_BASE_URL}?apiKey=${ONRAMPER_API_KEY}&${toQueryString(params)}${walletsParam}${networkWalletsParam}`;
+};
 
 /** Map a list of tokens to a list of Onramper wallets.
  *
- * The Onramper widget requires a list wallet addresses that are a combination of a token ID and a wallet address, to which send the tokens.
+ * The Onramper widget requires a list of wallet addresses that are a combination of a token ID and a wallet address, to which send the tokens.
  * For example: `btc:1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa` or `eth:0x0000000123456789abcdef0123456789abcdef0123`.
  * The documentation can be found here: https://docs.onramper.com/docs/supported-widget-parameters#wallets
  *
@@ -96,3 +110,36 @@ export const mapOnramperWallets = ({
 				]
 			: acc;
 	}, []);
+
+/** Map a list of networks to a list of Onramper wallets.
+ *
+ * The Onramper widget requires a list of wallet addresses that are a combination of a network ID and a wallet address, to which send the tokens.
+ * For example: `bitcoin:1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa` or `ethereum:0x0000000123456789abcdef0123456789abcdef0123`.
+ * The documentation can be found here: https://docs.onramper.com/docs/supported-widget-parameters#network-wallets
+ *
+ * So we map each network to a wallet address and create a list of objects with the network ID and the wallet address.
+ *
+ * @param networks - The list of networks to map.
+ * @param walletMap - The map of network ID to wallet addresses.
+ */
+export const mapOnramperNetworkWallets = ({
+	networks,
+	walletMap
+}: {
+	networks: Network[];
+	walletMap: Map<symbol, Option<OnramperWalletAddress>>;
+}): OnramperNetworkWallet[] =>
+	networks.reduce<OnramperNetworkWallet[]>((acc, { buy, id }) => {
+		const { onramperId: networkId } = buy ?? {};
+		const wallet = walletMap.get(id);
+
+		return nonNullish(networkId) && nonNullish(wallet)
+			? [
+					...acc,
+					{
+						networkId,
+						wallet
+					}
+				]
+			: acc;
+	}, []);