diff --git a/src/components/AppContainer.tsx b/src/components/AppContainer.tsx index 4e9b3db..6727506 100644 --- a/src/components/AppContainer.tsx +++ b/src/components/AppContainer.tsx @@ -1,18 +1,24 @@ import { RPC_URLS } from '@constants/config' import { CHAIN_ID } from '@constants/misc' -import { Trans } from 'next-i18next' import { useInitCookieOptions } from '@pooltogether/hooks' import { ScreenSize, useScreenSize, LoadingScreen } from '@pooltogether/react-components' -import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc' -import { publicProvider } from '@wagmi/core/providers/public' import { useUpdateStoredPendingTransactions, getReadProvider, initRpcUrls } from '@pooltogether/wallet-connection' +import { + RainbowKitProvider, + lightTheme, + darkTheme, + DisclaimerComponent +} from '@rainbow-me/rainbowkit' import { getSupportedChains } from '@utils/getSupportedChains' +import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc' +import { publicProvider } from '@wagmi/core/providers/public' import * as Fathom from 'fathom-client' import { Provider as JotaiProvider } from 'jotai' +import { Trans } from 'next-i18next' import { useTranslation } from 'next-i18next' import { ThemeProvider, useTheme } from 'next-themes' import { AppProps } from 'next/app' @@ -25,14 +31,8 @@ import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet' import { InjectedConnector } from 'wagmi/connectors/injected' import { MetaMaskConnector } from 'wagmi/connectors/metaMask' import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' -import { CustomErrorBoundary } from './CustomErrorBoundary' -import { - RainbowKitProvider, - lightTheme, - darkTheme, - DisclaimerComponent -} from '@rainbow-me/rainbowkit' import { getWalletConnectors } from '../services/walletConnection' +import { CustomErrorBoundary } from './CustomErrorBoundary' // Initialize react-query Query Client const queryClient = new QueryClient({ diff --git a/src/components/FullWalletConnectionButtonWrapper.tsx b/src/components/FullWalletConnectionButtonWrapper.tsx index 6751000..29a53f7 100644 --- a/src/components/FullWalletConnectionButtonWrapper.tsx +++ b/src/components/FullWalletConnectionButtonWrapper.tsx @@ -1,6 +1,6 @@ -import { getSupportedChains } from '@utils/getSupportedChains' import { ButtonRadius, ButtonTheme } from '@pooltogether/react-components' import { FullWalletConnectionButton } from '@pooltogether/wallet-connection' +import { getSupportedChains } from '@utils/getSupportedChains' import { Trans } from 'next-i18next' /** diff --git a/src/components/Layout/PageHeader.tsx b/src/components/Layout/PageHeader.tsx index 72a3c2a..6986d3c 100644 --- a/src/components/Layout/PageHeader.tsx +++ b/src/components/Layout/PageHeader.tsx @@ -13,6 +13,8 @@ import { useTranslation } from 'next-i18next' import Link from 'next/link' import { useRouter } from 'next/router' import React, { useState } from 'react' +import { SUPPORTED_CURRENCIES } from '../../constants/currencies' +import { useSelectedCurrency } from '../../hooks/app/useSelectedCurrency' export enum ContentPaneState { deposit = 'deposit', @@ -45,6 +47,7 @@ const Settings = () => { const walletChainId = useWalletChainId() const [currentLang, setCurrentLang] = useState(i18next.language) const router = useRouter() + const { currency, setCurrency } = useSelectedCurrency() return ( <> @@ -74,6 +77,9 @@ const Settings = () => { title: t('coreApp', 'Core App'), description: t('pooltogetherCoreApp', 'PoolTogether App') }} + currencies={SUPPORTED_CURRENCIES} + currentCurrency={currency} + changeCurrency={setCurrency} /> ) diff --git a/src/constants/currencies.ts b/src/constants/currencies.ts new file mode 100644 index 0000000..b11e5ce --- /dev/null +++ b/src/constants/currencies.ts @@ -0,0 +1,225 @@ +export type CURRENCY_ID = + | 'aed' + | 'ars' + | 'aud' + | 'bdt' + | 'bhd' + | 'brl' + | 'cad' + | 'chf' + | 'clp' + | 'cny' + | 'czk' + | 'dkk' + | 'eur' + | 'gbp' + | 'hkd' + | 'huf' + | 'idr' + | 'ils' + | 'inr' + | 'jpy' + | 'krw' + | 'kwd' + | 'lkr' + | 'mmk' + | 'mxn' + | 'myr' + | 'ngn' + | 'nok' + | 'nzd' + | 'php' + | 'pkr' + | 'pln' + | 'rub' + | 'sar' + | 'sek' + | 'sgd' + | 'thb' + | 'try' + | 'twd' + | 'uah' + | 'usd' + | 'vef' + | 'vnd' + | 'zar' + +export const SUPPORTED_CURRENCIES: Record = + Object.freeze({ + aed: { + name: 'United Arab Emirates Dirham', + symbol: 'DH' + }, + ars: { + name: 'Argentine Peso', + symbol: '$' + }, + aud: { + name: 'Australian Dollar', + symbol: 'A$' + }, + bdt: { + name: 'Bangladeshi Taka', + symbol: '৳' + }, + bhd: { + name: 'Bahraini Dinar', + symbol: 'BD' + }, + brl: { + name: 'Brazil Real', + symbol: 'R$' + }, + cad: { + name: 'Canadian Dollar', + symbol: 'CA$' + }, + chf: { + name: 'Swiss Franc', + symbol: 'Fr.' + }, + clp: { + name: 'Chilean Peso', + symbol: 'CLP$' + }, + cny: { + name: 'Chinese Yuan', + symbol: '¥' + }, + czk: { + name: 'Czech Koruna', + symbol: 'Kč' + }, + dkk: { + name: 'Danish Krone', + symbol: 'kr.' + }, + eur: { + name: 'Euro', + symbol: '€' + }, + gbp: { + name: 'British Pound Sterling', + symbol: '£' + }, + hkd: { + name: 'Hong Kong Dollar', + symbol: 'HK$' + }, + huf: { + name: 'Hungarian Forint', + symbol: 'Ft' + }, + idr: { + name: 'Indonesian Rupiah', + symbol: 'Rp' + }, + ils: { + name: 'Israeli New Shekel', + symbol: '₪' + }, + inr: { + name: 'Indian Rupee', + symbol: '₹' + }, + jpy: { + name: 'Japanese Yen', + symbol: '¥' + }, + krw: { + name: 'South Korean Won', + symbol: '₩' + }, + kwd: { + name: 'Kuwaiti Dinar', + symbol: 'KD' + }, + lkr: { + name: 'Sri Lankan Rupee', + symbol: 'Rs' + }, + mmk: { + name: 'Burmese Kyat', + symbol: 'K' + }, + mxn: { + name: 'Mexican Peso', + symbol: 'MX$' + }, + myr: { + name: 'Malaysian Ringgit', + symbol: 'RM' + }, + ngn: { + name: 'Nigerian Naira', + symbol: '₦' + }, + nok: { + name: 'Norwegian Krone', + symbol: 'kr' + }, + nzd: { + name: 'New Zealand Dollar', + symbol: 'NZ$' + }, + php: { + name: 'Philippine Peso', + symbol: '₱' + }, + pkr: { + name: 'Pakistani Rupee', + symbol: '₨' + }, + pln: { + name: 'Polish Zloty', + symbol: 'zł' + }, + rub: { + name: 'Russian Ruble', + symbol: '₽' + }, + sar: { + name: 'Saudi Riyal', + symbol: 'SR' + }, + sek: { + name: 'Swedish Krona', + symbol: 'kr' + }, + sgd: { + name: 'Singapore Dollar', + symbol: 'S$' + }, + thb: { + name: 'Thai Baht', + symbol: '฿' + }, + try: { + name: 'Turkish Lira', + symbol: '₺' + }, + twd: { + name: 'New Taiwan Dollar', + symbol: 'NT$' + }, + uah: { + name: 'Ukrainian hryvnia', + symbol: '₴' + }, + usd: { + name: 'US Dollar', + symbol: '$' + }, + vef: { + name: 'Venezuelan bolívar fuerte', + symbol: 'Bs.F' + }, + vnd: { + name: 'Vietnamese đồng', + symbol: '₫' + }, + zar: { + name: 'South African Rand', + symbol: 'R' + } + }) diff --git a/src/hooks/app/useSelectedCurrency.ts b/src/hooks/app/useSelectedCurrency.ts new file mode 100644 index 0000000..69b818b --- /dev/null +++ b/src/hooks/app/useSelectedCurrency.ts @@ -0,0 +1,35 @@ +import { atom, useAtom, useSetAtom } from 'jotai' +import { CURRENCY_ID, SUPPORTED_CURRENCIES } from '../../constants/currencies' + +const getInitialSelectedCurrencyId = () => { + if (typeof window === 'undefined') return 'usd' + const cachedCurrency = localStorage.getItem('selectedCurrency') as CURRENCY_ID + if (!!cachedCurrency && Object.keys(SUPPORTED_CURRENCIES).includes(cachedCurrency)) { + return cachedCurrency + } else { + return 'usd' + } +} + +export const selectedCurrencyIdAtom = atom(getInitialSelectedCurrencyId()) + +export const useSelectedCurrency = () => { + const [currency] = useAtom(selectedCurrencyIdAtom) + const setCurrency = useSetAtom(setSelectedCurrencyIdWriteAtom) + return { + currency, + setCurrency + } +} + +export const setSelectedCurrencyIdWriteAtom = atom( + null, + (get, set, currencyId) => { + if (typeof window !== 'undefined') { + // Set in atom + set(selectedCurrencyIdAtom, currencyId) + // Set in localstorage + localStorage.setItem('selectedCurrency', currencyId) + } + } +) diff --git a/src/tools/TwabDelegator/DelegationList/NoDelegatorState.tsx b/src/tools/TwabDelegator/DelegationList/NoDelegatorState.tsx index 0cb7d3c..bccfcf1 100644 --- a/src/tools/TwabDelegator/DelegationList/NoDelegatorState.tsx +++ b/src/tools/TwabDelegator/DelegationList/NoDelegatorState.tsx @@ -1,12 +1,12 @@ import { StyledInput } from '@components/Input' import { Button, ButtonSize } from '@pooltogether/react-components' +import { useConnectModal } from '@rainbow-me/rainbowkit' import classNames from 'classnames' import { isAddress } from 'ethers/lib/utils' import { useTranslation } from 'next-i18next' import React from 'react' import { useForm } from 'react-hook-form' import { DelegationListProps } from '.' -import { useConnectModal } from '@rainbow-me/rainbowkit' /** *