Handle different fiat currencies in payment widgets

Author: joaquim-verges

.changeset/ready-loops-search.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle different fiat currencies in payment widgets

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -17,6 +17,7 @@ export function BuyMerchPreview() {
         seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
         theme="light"
         tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+        currency="EUR"
       />
     </>
   );

packages/thirdweb/src/bridge/types/Token.ts

@@ -7,5 +7,5 @@ export type Token = {
   symbol: string;
   name: string;
   iconUri?: string;
-  priceUsd: number;
+  prices: Record<string, number>;
 };

packages/thirdweb/src/pay/buyWithCrypto/getQuote.ts

@@ -300,14 +300,14 @@ export async function getBuyWithCryptoQuote(
             Number(
               Value.format(quote.originAmount, firstStep.originToken.decimals),
             ) *
-            firstStep.originToken.priceUsd *
+            (firstStep.originToken.prices["USD"] || 0) *
             100,
           amountWei: quote.originAmount.toString(),
           token: {
             chainId: firstStep.originToken.chainId,
             decimals: firstStep.originToken.decimals,
             name: firstStep.originToken.name,
-            priceUSDCents: firstStep.originToken.priceUsd * 100,
+            priceUSDCents: (firstStep.originToken.prices["USD"] || 0) * 100,
             symbol: firstStep.originToken.symbol,
             tokenAddress: firstStep.originToken.address,
           },
@@ -323,7 +323,7 @@ export async function getBuyWithCryptoQuote(
             chainId: firstStep.originToken.chainId,
             decimals: firstStep.originToken.decimals,
             name: firstStep.originToken.name,
-            priceUSDCents: firstStep.originToken.priceUsd * 100,
+            priceUSDCents: (firstStep.originToken.prices["USD"] || 0) * 100,
             symbol: firstStep.originToken.symbol,
             tokenAddress: firstStep.originToken.address,
           },
@@ -337,7 +337,7 @@ export async function getBuyWithCryptoQuote(
             Number(
               Value.format(quote.originAmount, firstStep.originToken.decimals),
             ) *
-            firstStep.originToken.priceUsd *
+            (firstStep.originToken.prices["USD"] || 0) *
             100,
           gasCostUSDCents: 0,
           slippageBPS: 0,
@@ -348,7 +348,7 @@ export async function getBuyWithCryptoQuote(
                 firstStep.destinationToken.decimals,
               ),
             ) *
-            firstStep.destinationToken.priceUsd *
+            (firstStep.destinationToken.prices["USD"] || 0) *
             100,
           toAmountUSDCents:
             Number(
@@ -357,7 +357,7 @@ export async function getBuyWithCryptoQuote(
                 firstStep.destinationToken.decimals,
               ),
             ) *
-            firstStep.destinationToken.priceUsd *
+            (firstStep.destinationToken.prices["USD"] || 0) *
             100,
         },
         fromAddress: quote.intent.sender,
@@ -372,7 +372,7 @@ export async function getBuyWithCryptoQuote(
           chainId: firstStep.originToken.chainId,
           decimals: firstStep.originToken.decimals,
           name: firstStep.originToken.name,
-          priceUSDCents: firstStep.originToken.priceUsd * 100,
+          priceUSDCents: (firstStep.originToken.prices["USD"] || 0) * 100,
           symbol: firstStep.originToken.symbol,
           tokenAddress: firstStep.originToken.address,
         },
@@ -395,7 +395,7 @@ export async function getBuyWithCryptoQuote(
           chainId: firstStep.destinationToken.chainId,
           decimals: firstStep.destinationToken.decimals,
           name: firstStep.destinationToken.name,
-          priceUSDCents: firstStep.destinationToken.priceUsd * 100,
+          priceUSDCents: (firstStep.destinationToken.prices["USD"] || 0) * 100,
           symbol: firstStep.destinationToken.symbol,
           tokenAddress: firstStep.destinationToken.address,
         },

packages/thirdweb/src/pay/buyWithCrypto/getTransfer.ts

@@ -198,14 +198,14 @@ export async function getBuyWithCryptoTransfer(
           Number(
             Value.format(quote.originAmount, firstStep.originToken.decimals),
           ) *
-          firstStep.originToken.priceUsd *
+          (firstStep.originToken.prices["USD"] || 0) *
           100,
         amountWei: quote.originAmount.toString(),
         token: {
           chainId: firstStep.originToken.chainId,
           decimals: firstStep.originToken.decimals,
           name: firstStep.originToken.name,
-          priceUSDCents: firstStep.originToken.priceUsd * 100,
+          priceUSDCents: (firstStep.originToken.prices["USD"] || 0) * 100,
           symbol: firstStep.originToken.symbol,
           tokenAddress: firstStep.originToken.address,
         },
@@ -226,7 +226,7 @@ export async function getBuyWithCryptoTransfer(
                   firstStep.originToken.decimals,
                 ),
               ) *
-              firstStep.originToken.priceUsd *
+              (firstStep.originToken.prices["USD"] || 0) *
               100
             : 0,
         amountWei:
@@ -237,7 +237,7 @@ export async function getBuyWithCryptoTransfer(
           chainId: firstStep.originToken.chainId,
           decimals: firstStep.originToken.decimals,
           name: firstStep.originToken.name,
-          priceUSDCents: firstStep.originToken.priceUsd * 100,
+          priceUSDCents: (firstStep.originToken.prices["USD"] || 0) * 100,
           symbol: firstStep.originToken.symbol,
           tokenAddress: firstStep.originToken.address,
         },

packages/thirdweb/src/pay/buyWithFiat/getQuote.ts

@@ -367,12 +367,12 @@ export async function getBuyWithFiatQuote(
       decimals: number;
       symbol: string;
       name: string;
-      priceUsd: number;
+      prices: Record<string, number>;
     }): PayTokenInfo => ({
       chainId: token.chainId,
       decimals: token.decimals,
       name: token.name,
-      priceUSDCents: Math.round(token.priceUsd * 100),
+      priceUSDCents: Math.round((token.prices["USD"] || 0) * 100),
       symbol: token.symbol,
       tokenAddress: token.address,
     });
@@ -408,7 +408,7 @@ export async function getBuyWithFiatQuote(
     const onRampTokenObject = {
       amount: onRampTokenAmount,
       amountUSDCents: Math.round(
-        Number(onRampTokenAmount) * onRampTokenRaw.priceUsd * 100,
+        Number(onRampTokenAmount) * (onRampTokenRaw.prices["USD"] || 0) * 100,
       ),
       amountWei: onRampTokenAmountWei.toString(),
       token: tokenToPayTokenInfo(onRampTokenRaw),
@@ -434,7 +434,7 @@ export async function getBuyWithFiatQuote(
       routingTokenObject = {
         amount: routingAmount,
         amountUSDCents: Math.round(
-          Number(routingAmount) * routingTokenRaw.priceUsd * 100,
+          Number(routingAmount) * (routingTokenRaw.prices["USD"] || 0) * 100,
         ),
         amountWei: routingAmountWei.toString(),
         token: tokenToPayTokenInfo(routingTokenRaw),

packages/thirdweb/src/pay/convert/cryptoToFiat.ts

@@ -26,7 +26,6 @@ export type ConvertCryptoToFiatParams = {
   chain: Chain;
   /**
    * The fiat symbol. e.g "USD"
-   * Only USD is supported at the moment.
    */
   to: SupportedFiatCurrency;
 };
@@ -56,7 +55,7 @@ export type ConvertCryptoToFiatParams = {
 export async function convertCryptoToFiat(
   options: ConvertCryptoToFiatParams,
 ): Promise<{ result: number }> {
-  const { client, fromTokenAddress, chain, fromAmount } = options;
+  const { client, fromTokenAddress, chain, fromAmount, to } = options;
   if (Number(fromAmount) === 0) {
     return { result: 0 };
   }
@@ -74,10 +73,11 @@ export async function convertCryptoToFiat(
     );
   }
   const token = await getToken(client, fromTokenAddress, chain.id);
-  if (token.priceUsd === 0) {
+  const price = token?.prices[to] || 0;
+  if (!token || price === 0) {
     throw new Error(
       `Error: Failed to fetch price for token ${fromTokenAddress} on chainId: ${chain.id}`,
     );
   }
-  return { result: token.priceUsd * fromAmount };
+  return { result: price * fromAmount };
 }

packages/thirdweb/src/pay/convert/fiatToCrypto.ts

@@ -13,7 +13,6 @@ export type ConvertFiatToCryptoParams = {
   client: ThirdwebClient;
   /**
    * The fiat symbol. e.g: "USD"
-   * Currently only USD is supported.
    */
   from: SupportedFiatCurrency;
   /**
@@ -57,7 +56,7 @@ export type ConvertFiatToCryptoParams = {
 export async function convertFiatToCrypto(
   options: ConvertFiatToCryptoParams,
 ): Promise<{ result: number }> {
-  const { client, to, chain, fromAmount } = options;
+  const { client, to, chain, fromAmount, from } = options;
   if (Number(fromAmount) === 0) {
     return { result: 0 };
   }
@@ -73,10 +72,11 @@ export async function convertFiatToCrypto(
     throw new Error("Invalid `to`. Expected a valid EVM contract address");
   }
   const token = await getToken(client, to, chain.id);
-  if (!token || token.priceUsd === 0) {
+  const price = token?.prices[from] || 0;
+  if (!token || price === 0) {
     throw new Error(
       `Error: Failed to fetch price for token ${to} on chainId: ${chain.id}`,
     );
   }
-  return { result: fromAmount / token.priceUsd };
+  return { result: fromAmount / price };
 }

packages/thirdweb/src/pay/convert/type.ts

@@ -1,16 +1,30 @@
-const SUPPORTED_FIAT_CURRENCIES = [
+const CURRENCIES = [
   "USD",
-  "CAD",
-  "GBP",
   "EUR",
+  "GBP",
   "JPY",
+  "KRW",
+  "CNY",
+  "INR",
+  "NOK",
+  "SEK",
+  "CHF",
   "AUD",
+  "CAD",
   "NZD",
+  "MXN",
+  "BRL",
+  "CLP",
+  "CZK",
+  "DKK",
+  "HKD",
+  "HUF",
+  "IDR",
+  "ILS",
+  "ISK",
 ] as const;
-/**
- * @internal
- */
-export type SupportedFiatCurrency = (typeof SUPPORTED_FIAT_CURRENCIES)[number];
+
+export type SupportedFiatCurrency = (typeof CURRENCIES)[number] | (string & {});
 
 export function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
   switch (showBalanceInFiat) {

packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts

@@ -106,7 +106,9 @@ export function usePaymentMethods(options: {
               decimals: b.decimals,
               iconUri: "",
               name: b.name,
-              priceUsd: 0,
+              prices: {
+                USD: 0,
+              },
               symbol: b.symbol,
             } as Token,
           }));
@@ -183,10 +185,10 @@ export function usePaymentMethods(options: {
       validOwnedTokens.sort((a, b) => {
         const aDollarBalance =
           Number.parseFloat(toTokens(a.balance, a.originToken.decimals)) *
-          a.originToken.priceUsd;
+          (a.originToken.prices["USD"] || 0);
         const bDollarBalance =
           Number.parseFloat(toTokens(b.balance, b.originToken.decimals)) *
-          b.originToken.priceUsd;
+          (b.originToken.prices["USD"] || 0);
         return bDollarBalance - aDollarBalance;
       });