diff --git a/src/components/AppContainer.tsx b/src/components/AppContainer.tsx index 454261b..7eda595 100644 --- a/src/components/AppContainer.tsx +++ b/src/components/AppContainer.tsx @@ -6,10 +6,16 @@ import { getReadProvider, initRpcUrls } from '@pooltogether/wallet-connection' +import { + RainbowKitProvider, + lightTheme, + darkTheme, + DisclaimerComponent +} from '@rainbow-me/rainbowkit' import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc' import { publicProvider } from '@wagmi/core/providers/public' -import { Trans } from 'next-i18next' 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' @@ -23,15 +29,9 @@ import { InjectedConnector } from 'wagmi/connectors/injected' import { MetaMaskConnector } from 'wagmi/connectors/metaMask' import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' import { RPC_URLS, SUPPORTED_CHAINS } from '../constants' -import { CustomErrorBoundary } from './CustomErrorBoundary' -import { - RainbowKitProvider, - lightTheme, - darkTheme, - DisclaimerComponent -} from '@rainbow-me/rainbowkit' -import { getSupportedChains } from '../utils/getSupportedChains' import { getWalletConnectors } from '../services/walletConnection' +import { getSupportedChains } from '../utils/getSupportedChains' +import { CustomErrorBoundary } from './CustomErrorBoundary' // Initialize react-query Query Client const queryClient = new QueryClient({ diff --git a/src/components/Layout/FullWalletConnectionButtonWrapper.tsx b/src/components/Layout/FullWalletConnectionButtonWrapper.tsx index 6751000..29a53f7 100644 --- a/src/components/Layout/FullWalletConnectionButtonWrapper.tsx +++ b/src/components/Layout/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 bfd0d4f..2f438d7 100644 --- a/src/components/Layout/PageHeader.tsx +++ b/src/components/Layout/PageHeader.tsx @@ -11,6 +11,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/useSelectedCurrency' import { SUPPORTED_LANGUAGES } from '../../languages' import { FullWalletConnectionButtonWrapper } from './FullWalletConnectionButtonWrapper' @@ -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/components/ProposalCreation/ProposalCreationUI.tsx b/src/components/ProposalCreation/ProposalCreationUI.tsx index 1739ac9..fae1f2f 100644 --- a/src/components/ProposalCreation/ProposalCreationUI.tsx +++ b/src/components/ProposalCreation/ProposalCreationUI.tsx @@ -6,6 +6,7 @@ import { } from '@pooltogether/react-components' import { numberWithCommas } from '@pooltogether/utilities' import { useUsersAddress } from '@pooltogether/wallet-connection' +import { useConnectModal } from '@rainbow-me/rainbowkit' import classnames from 'classnames' import { ethers } from 'ethers' import { useTranslation } from 'next-i18next' @@ -16,7 +17,6 @@ import { ProposalCreationForm } from '../../components/ProposalCreation/Proposal import { DEFAULT_TOKEN_PRECISION } from '../../constants' import { useGovernorAlpha } from '../../hooks/useGovernorAlpha' import { useUserCanCreateProposal } from '../../hooks/useUserCanCreateProposal' -import { useConnectModal } from '@rainbow-me/rainbowkit' export const ProposalCreationUI = (props) => { const { t } = useTranslation() 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/useSelectedCurrency.ts b/src/hooks/useSelectedCurrency.ts new file mode 100644 index 0000000..8b07924 --- /dev/null +++ b/src/hooks/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) + } + } +)