+
+ {({ height }: { height: number }) => (
+
+
+
+ data[index]?.countryCode}
+ >
+ {({ style, data, index }) => (
+ {
+ onSelectCountry(data[index])
+ closeModal()
+ }}
+ />
+ )}
+
+
+ )}
+
+
+
+
+`;
+
+exports[`CountryListRow should render selected country 1`] = `
+.c0 {
+ box-sizing: border-box;
+ margin: 0;
+ min-width: 0;
+}
+
+.c1 {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+
+.c3 {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ gap: 12px;
+}
+
+.c2 {
+ height: 60px;
+ padding: 0 20px;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ cursor: pointer;
+}
+
+.c2:hover {
+ background-color: #F9F9F9;
+}
+
+.c4 {
+ border-radius: 50%;
+}
+
+
+
+
+ 
+
+ United States
+
+
+
+
+ United States
+
+
+
+
+
+`;
diff --git a/apps/web/src/pages/Swap/Buy/hooks.ts b/apps/web/src/pages/Swap/Buy/hooks.ts
new file mode 100644
index 00000000000..616a2a90e5f
--- /dev/null
+++ b/apps/web/src/pages/Swap/Buy/hooks.ts
@@ -0,0 +1,57 @@
+import { useActiveLocalCurrency } from 'hooks/useActiveLocalCurrency'
+import { useActiveLocale } from 'hooks/useActiveLocale'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useFiatOnRampAggregatorSupportedFiatCurrenciesQuery } from 'uniswap/src/features/fiatOnRamp/api'
+import { FORCountry, FiatCurrencyInfo } from 'uniswap/src/features/fiatOnRamp/types'
+import { getFiatCurrencyComponents } from 'utilities/src/format/localeBased'
+import { getFiatCurrencyName } from 'utils/fiatCurrency'
+
+type FiatOnRampCurrencyInfo = {
+ meldSupportedFiatCurrency: FiatCurrencyInfo
+ notAvailableInThisRegion: boolean
+}
+
+const fallbackCurrencyInfo: FiatCurrencyInfo = {
+ ...getFiatCurrencyComponents('en-US', 'USD'),
+ symbol: '$',
+ name: 'United States Dollar',
+ shortName: 'USD',
+ code: 'USD',
+}
+
+/**
+ * Returns the meld-supported fiat currency info based on user-selected country,
+ * the local currency active in the user's app settings, with a fallback to USD.
+ */
+export function useMeldFiatCurrencyInfo(selectedCountry?: FORCountry): FiatOnRampCurrencyInfo {
+ const { data: supportedFiatCurrencies } = useFiatOnRampAggregatorSupportedFiatCurrenciesQuery({
+ countryCode: selectedCountry?.countryCode ?? 'US',
+ })
+
+ const activeLocale = useActiveLocale()
+ const activeLocalCurrency = useActiveLocalCurrency()
+ const { t } = useTranslation()
+
+ const appFiatCurrencySupported =
+ supportedFiatCurrencies &&
+ supportedFiatCurrencies.fiatCurrencies.some(
+ (currency): boolean => activeLocalCurrency.toLowerCase() === currency.fiatCurrencyCode.toLowerCase()
+ )
+ const meldSupportedFiatCurrency: FiatCurrencyInfo = useMemo(() => {
+ const activeLocalCurrencyComponents = getFiatCurrencyComponents(activeLocale, activeLocalCurrency)
+ const { name, shortName } = getFiatCurrencyName(t, activeLocalCurrency)
+ const activeLocalCurrencyFiatCurrencyInfo: FiatCurrencyInfo = {
+ ...activeLocalCurrencyComponents,
+ name,
+ shortName,
+ code: activeLocalCurrency,
+ }
+ return appFiatCurrencySupported ? activeLocalCurrencyFiatCurrencyInfo : fallbackCurrencyInfo
+ }, [activeLocalCurrency, activeLocale, appFiatCurrencySupported, t])
+
+ return {
+ meldSupportedFiatCurrency,
+ notAvailableInThisRegion: supportedFiatCurrencies?.fiatCurrencies?.length === 0,
+ }
+}
diff --git a/apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx b/apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx
index f9aa463f2db..3f78adbbf74 100644
--- a/apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx
+++ b/apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx
@@ -1,4 +1,4 @@
-import { ChainId, Currency } from '@uniswap/sdk-core'
+import { Currency } from '@uniswap/sdk-core'
import { ReactComponent as DropDown } from 'assets/images/dropdown.svg'
import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
import { ButtonLight } from 'components/Button'
@@ -29,6 +29,7 @@ import { CurrencyState } from 'state/swap/types'
import styled, { css } from 'styled-components'
import { ClickableStyle, ThemedText } from 'theme/components'
import { Text } from 'ui/src'
+import { UniverseChainId } from 'uniswap/src/types/chains'
import useResizeObserver from 'use-resize-observer'
import { NumberType, useFormatter } from 'utils/formatNumbers'
import { maxAmountSpend } from 'utils/maxAmountSpend'
@@ -331,7 +332,7 @@ export default function SendCurrencyInputForm({
+
+
+ United States
+
+
+
+
+
+ United States
+
+ 
{
const addresses = []
diff --git a/packages/wallet/src/components/QRCodeScanner/WalletQRCode.tsx b/packages/wallet/src/components/QRCodeScanner/WalletQRCode.tsx
index 2b4d0f6a957..02a5f0eedb7 100644
--- a/packages/wallet/src/components/QRCodeScanner/WalletQRCode.tsx
+++ b/packages/wallet/src/components/QRCodeScanner/WalletQRCode.tsx
@@ -2,11 +2,11 @@ import { useTranslation } from 'react-i18next'
import { Flex, Text, isWeb, useMedia, useSporeColors } from 'ui/src'
import { spacing } from 'ui/src/theme'
import { uniswapUrls } from 'uniswap/src/constants/urls'
+import { WALLET_SUPPORTED_CHAIN_IDS } from 'uniswap/src/types/chains'
import { QRCodeDisplay } from 'wallet/src/components/QRCodeScanner/QRCode'
import { AddressDisplay } from 'wallet/src/components/accounts/AddressDisplay'
import { NetworkLogos } from 'wallet/src/components/network/NetworkLogos'
import { LearnMoreLink } from 'wallet/src/components/text/LearnMoreLink'
-import { ALL_SUPPORTED_CHAIN_IDS } from 'wallet/src/constants/chains'
export function WalletQRCode({ address }: { address: Address }): JSX.Element | null {
const colors = useSporeColors()
@@ -50,7 +50,7 @@ export function WalletQRCode({ address }: { address: Address }): JSX.Element | n
showFirstChainLabel
backgroundColor="$surface2"
borderRadius="$roundedFull"
- chains={ALL_SUPPORTED_CHAIN_IDS}
+ chains={WALLET_SUPPORTED_CHAIN_IDS}
/>