Fix build

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({

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'
 
 /**

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}
       />
     </>
   )

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<CURRENCY_ID, { name: string; symbol: string }> =
+  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'
+    }
+  })

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<CURRENCY_ID>(getInitialSelectedCurrencyId())
+
+export const useSelectedCurrency = () => {
+  const [currency] = useAtom(selectedCurrencyIdAtom)
+  const setCurrency = useSetAtom(setSelectedCurrencyIdWriteAtom)
+  return {
+    currency,
+    setCurrency
+  }
+}
+
+export const setSelectedCurrencyIdWriteAtom = atom<null, CURRENCY_ID>(
+  null,
+  (get, set, currencyId) => {
+    if (typeof window !== 'undefined') {
+      // Set in atom
+      set(selectedCurrencyIdAtom, currencyId)
+      // Set in localstorage
+      localStorage.setItem('selectedCurrency', currencyId)
+    }
+  }
+)

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'
 
 /**
  *