Hide cEUR on Mainnet

Fix two minor bugs

Author: jmrossy

src/components/buttons/ClickToCopy.tsx

@@ -7,15 +7,16 @@ import { trimToLength } from 'src/utils/string'
 
 interface ButtonProps {
   text: string
+  copyText?: string
   maxLength?: number
   styles?: Styles
 }
 
 export function ClickToCopy(props: ButtonProps) {
-  const { text, maxLength, styles } = props
+  const { text, copyText, maxLength, styles } = props
 
   const onClick = async () => {
-    await tryClipboardSet(text)
+    await tryClipboardSet(copyText ?? text)
   }
 
   const displayText = maxLength ? trimToLength(text, maxLength) : text

src/components/buttons/CopiableAddress.tsx

@@ -13,5 +13,5 @@ export function CopiableAddress(props: ButtonProps) {
   const text =
     length === 'full' ? address.toUpperCase() : shortenAddress(address, true).toUpperCase()
 
-  return <ClickToCopy text={text} styles={styles} />
+  return <ClickToCopy text={text} copyText={address} styles={styles} />
 }

src/components/header/BalanceSummary.tsx

@@ -1,11 +1,11 @@
 import { BigNumber } from 'ethers'
 import { useMemo } from 'react'
-import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
-import { RootState } from 'src/app/rootReducer'
 import { transparentButtonStyles } from 'src/components/buttons/Button'
 import { Box } from 'src/components/layout/Box'
 import { MoneyValue } from 'src/components/MoneyValue'
+import { config } from 'src/config'
+import { useTokens } from 'src/features/wallet/utils'
 import { Color } from 'src/styles/Color'
 import { Font } from 'src/styles/fonts'
 import { mq, useWindowSize } from 'src/styles/mediaQueries'
@@ -17,7 +17,15 @@ export function BalanceSummary() {
   if (windowWidth && windowWidth > 550) numItems = 3
   if (windowWidth && windowWidth > 1024) numItems = 4
 
-  const tokens = useSelector((s: RootState) => s.wallet.balances.tokens)
+  let tokens = useTokens()
+  // TODO-cEUR remove when activated
+  if (config.chainId === 42220) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { cEUR, ...rest } = tokens
+    // @ts-ignore
+    tokens = rest
+  }
+
   const { tokensToShow, hiddenTokens } = useMemo(() => {
     const sortedTokens = Object.values(tokens).sort((t1, t2) => {
       const t1Value = BigNumber.from(t1.value)

src/components/input/AmountAndCurrencyInput.tsx

@@ -1,13 +1,13 @@
 import { ChangeEvent, useMemo } from 'react'
-import { useSelector } from 'react-redux'
-import { RootState } from 'src/app/rootReducer'
 import { TokenIcon } from 'src/components/icons/tokens/TokenIcon'
 import { NumberInput } from 'src/components/input/NumberInput'
 import { SelectInput, SelectOption } from 'src/components/input/SelectInput'
 import { Box } from 'src/components/layout/Box'
+import { config } from 'src/config'
+import { useTokens } from 'src/features/wallet/utils'
 import { Font } from 'src/styles/fonts'
 import { Stylesheet } from 'src/styles/types'
-import { isNativeToken } from 'src/tokens'
+import { cEUR, isNativeToken } from 'src/tokens'
 import { ErrorState } from 'src/utils/validation'
 
 interface Props {
@@ -37,12 +37,14 @@ export const AmountAndCurrencyInput = (props: Props) => {
     nativeTokensOnly,
   } = props
 
-  const tokens = useSelector((state: RootState) => state.wallet.balances.tokens)
+  const tokens = useTokens()
 
   const selectOptions = useMemo(
     () =>
       Object.values(tokens)
         .filter((t) => (nativeTokensOnly ? isNativeToken(t.id) : true))
+        // TODO-cEUR remove when activated
+        .filter((t) => t.id !== cEUR.id || config.chainId === 44787)
         .map((t) => ({
           display: t.symbol,
           value: t.id,

src/features/pincode/ChangePincodeForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useLayoutEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router'
 import { Button } from 'src/components/buttons/Button'
@@ -61,6 +61,10 @@ export function ChangePincodeForm() {
     navigate(-1)
   }
 
+  useLayoutEffect(() => {
+    dispatch(pincodeActions.reset())
+  }, [])
+
   const { showModalAsync } = useModal()
   const onSuccess = async () => {
     await showModalAsync(

src/features/settings/SettingsScreen.tsx

@@ -12,6 +12,7 @@ import PlusIcon from 'src/components/icons/plus.svg'
 import { Box } from 'src/components/layout/Box'
 import { ScreenContentFrame } from 'src/components/layout/ScreenContentFrame'
 import { MAX_SEND_TOKEN_SIZE, MAX_SEND_TOKEN_SIZE_LEDGER } from 'src/consts'
+import { pincodeActions } from 'src/features/pincode/pincode'
 import { setTxSizeLimitEnabled } from 'src/features/settings/settingsSlice'
 import { Color } from 'src/styles/Color'
 import { Font } from 'src/styles/fonts'
@@ -23,6 +24,11 @@ export function SettingsScreen() {
   const dispatch = useDispatch()
   const navigate = useNavigate()
 
+  const onClickChangePassword = () => {
+    dispatch(pincodeActions.reset())
+    navigate('/change-pin')
+  }
+
   const onClickAddToken = () => {
     navigate('/balances')
   }
@@ -56,18 +62,16 @@ export function SettingsScreen() {
               </Box>
             </Link>
           </div>
-          <div css={style.pageLinkBox}>
-            <Link to="/change-pin">
-              <Box direction="row" align="center">
-                <img src={LockIcon} alt="change pin" css={style.pageLinkIcon} />
-                <div>
-                  <h3 css={style.h3}>Change Password</h3>
-                  <div css={style.description}>
-                    Set the password used to unlock your account on this device.
-                  </div>
+          <div css={style.pageLinkBox} onClick={onClickChangePassword}>
+            <Box direction="row" align="center">
+              <img src={LockIcon} alt="change pin" css={style.pageLinkIcon} />
+              <div>
+                <h3 css={style.h3}>Change Password</h3>
+                <div css={style.description}>
+                  Set the password used to unlock your account on this device.
                 </div>
-              </Box>
-            </Link>
+              </div>
+            </Box>
           </div>
         </Box>
         <HrDivider styles={style.divider} />
@@ -158,6 +162,7 @@ const style: Stylesheet = {
     margin: '2em 0',
   },
   pageLinkBox: {
+    cursor: 'pointer',
     marginTop: '1em',
     width: '20em',
     padding: '1em',

src/features/wallet/BalanceDetailsScreen.tsx

@@ -21,7 +21,7 @@ import { Color } from 'src/styles/Color'
 import { Font } from 'src/styles/fonts'
 import { useIsMobile } from 'src/styles/mediaQueries'
 import { Stylesheet } from 'src/styles/types'
-import { isNativeToken, LockedCELO } from 'src/tokens'
+import { cEUR, isNativeToken, LockedCELO } from 'src/tokens'
 import { fromWeiRounded } from 'src/utils/amount'
 import { SagaStatus } from 'src/utils/saga'
 
@@ -164,6 +164,8 @@ function balancesToTableData(balances: Balances): BalanceTableRow[] {
     : balances.tokens
 
   for (const token of Object.values(tokens)) {
+    // TODO-cEUR remove when activated
+    if (config.chainId === 42220 && token.id === cEUR.id) continue
     tableRows.push({
       id: token.id,
       label: token.symbol,

src/features/wallet/fetchBalances.ts

@@ -68,8 +68,8 @@ async function fetchTokenBalances(
     if (t.id === CELO.id) {
       fetchPromises.push(fetchCeloBalance(address))
     } else {
-      // TODO remove when cEUR is live
-      if (t.id === cEUR.id && config.chainId !== 44787) continue
+      // TODO-cEUR remove when activated
+      if (t.id === cEUR.id && config.chainId === 42220) continue
       fetchPromises.push(fetchTokenBalance(address, t))
     }
   }