From 2a83c5df304037d5dd0d25c054a0f70e59299540 Mon Sep 17 00:00:00 2001
From: marino <102478601+kemuru@users.noreply.github.com>
Date: Tue, 5 Dec 2023 03:04:32 +0100
Subject: [PATCH] refactor(web): usememos, move gettokensymbol to helpers
 folder, camelcases

---
 src/components/account-details-popup.js       |  7 +++--
 src/components/eth-amount.js                  | 11 +++----
 src/components/multi-balance.js               | 17 ++++-------
 src/components/side-chain/pnk-actions.js      | 24 +++++++--------
 .../side-chain/switch-court-chain.js          | 15 ++++++----
 src/components/stake-modal.js                 | 10 +++----
 .../convert-pnk/convert-pnk-card.js           | 19 ++++++------
 .../convert-pnk/convert-pnk-form.js           | 29 ++++++++++---------
 src/containers/convert-pnk/convert-pnk.js     |  9 ++++--
 .../convert-pnk/wihdraw-stpnk-card.js         |  7 +++--
 .../get-token-symbol.js}                      |  0
 11 files changed, 79 insertions(+), 69 deletions(-)
 rename src/{components/token-symbol.js => helpers/get-token-symbol.js} (100%)

diff --git a/src/components/account-details-popup.js b/src/components/account-details-popup.js
index 85c838e..89129a2 100644
--- a/src/components/account-details-popup.js
+++ b/src/components/account-details-popup.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import t from "prop-types";
 import styled from "styled-components/macro";
 import { List, Popover, Spin, Divider } from "antd";
@@ -7,13 +7,14 @@ import { VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 import ETHAddress from "./eth-address";
 import ETHAmount from "./eth-amount";
 import Identicon from "./identicon";
-import { getTokenSymbol } from "./token-symbol";
+import { getTokenSymbol } from "../helpers/get-token-symbol";
 
 const { useDrizzle, useDrizzleState } = drizzleReactHooks;
 
 export default function AccountDetailsPopup({ trigger, pinakion, className }) {
   const { useCacheCall } = useDrizzle();
   const chainId = useDrizzleState((ds) => ds.web3.networkId);
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
 
   const drizzleState = useDrizzleState((drizzleState) => ({
     account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
@@ -52,7 +53,7 @@ export default function AccountDetailsPopup({ trigger, pinakion, className }) {
                 <List.Item>
                   <List.Item.Meta
                     description={<ETHAmount amount={PNK} tokenSymbol="PNK" />}
-                    title={<>{getTokenSymbol(chainId, "PNK")} Balance</>}
+                    title={<>{pnkTokenSymbol} Balance</>}
                   />
                 </List.Item>
               </Spin>
diff --git a/src/components/eth-amount.js b/src/components/eth-amount.js
index a31e804..1b6ce9c 100644
--- a/src/components/eth-amount.js
+++ b/src/components/eth-amount.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useMemo } from "react";
 import t from "prop-types";
 import { Skeleton } from "antd";
 import styled from "styled-components/macro";
 import Web3 from "web3";
-import { getTokenSymbol } from "./token-symbol";
+import { getTokenSymbol } from "../helpers/get-token-symbol";
 import { drizzleReactHooks } from "@drizzle/react-plugin";
 
 const { useDrizzleState } = drizzleReactHooks;
@@ -13,7 +13,8 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {
   const chainId = useDrizzleState((ds) => ds.web3.networkId);
 
   let finalDecimals = decimals;
-  const chainTokenSymbol = getTokenSymbol(chainId);
+  const chainTokenSymbol = useMemo(() => getTokenSymbol(chainId), [chainId]);
+  const calculatedTokenSymbol = useMemo(() => getTokenSymbol(chainId, tokenSymbol), [chainId, tokenSymbol]);
 
   if (chainTokenSymbol === "xDAI" && tokenSymbol === true) {
     finalDecimals = 2;
@@ -33,7 +34,7 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {
 
   return tokenSymbol === true ? (
     <>
-      {value} {getTokenSymbol(chainId)}
+      {value} {chainTokenSymbol}
     </>
   ) : tokenSymbol === false ? (
     value
@@ -43,7 +44,7 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {
     </>
   ) : (
     <>
-      {value} {getTokenSymbol(chainId, tokenSymbol)}
+      {value} {calculatedTokenSymbol}
     </>
   );
 }
diff --git a/src/components/multi-balance.js b/src/components/multi-balance.js
index 692f9d9..3200cbc 100644
--- a/src/components/multi-balance.js
+++ b/src/components/multi-balance.js
@@ -1,24 +1,19 @@
-import React from "react";
+import React, { useMemo } from "react";
 import t from "prop-types";
 import clsx from "clsx";
 import { Typography } from "antd";
 import Web3 from "web3";
 import styled from "styled-components/macro";
 import EthAmount from "./eth-amount";
-import { getTokenSymbol } from "./token-symbol";
+import { getTokenSymbol } from "../helpers/get-token-symbol";
 
 const { BN } = Web3.utils;
 
 export default function MultiBalance({ title, chainId, errors, balance, rawBalance, rowClassNames }) {
-  let balanceTokenSymbol;
-  let rawBalanceTokenSymbol;
-  if (chainId) {
-    balanceTokenSymbol = getTokenSymbol(chainId, "PNK");
-    rawBalanceTokenSymbol = getTokenSymbol(chainId, "xPNK");
-  } else {
-    balanceTokenSymbol = "PNK";
-    rawBalanceTokenSymbol = "xPNK";
-  }
+  const [balanceTokenSymbol, rawBalanceTokenSymbol] = useMemo(
+    () => (chainId ? [getTokenSymbol(chainId, "PNK"), getTokenSymbol(chainId, "xPNK")] : ["PNK", "xPNK"]),
+    [chainId]
+  );
 
   return (
     <StyledMultiBalance>
diff --git a/src/components/side-chain/pnk-actions.js b/src/components/side-chain/pnk-actions.js
index b00b935..22e8861 100644
--- a/src/components/side-chain/pnk-actions.js
+++ b/src/components/side-chain/pnk-actions.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import t from "prop-types";
 import styled from "styled-components/macro";
 import { Link } from "react-router-dom";
@@ -17,7 +17,7 @@ import useAccount from "../../hooks/use-account";
 import usePromise from "../../hooks/use-promise";
 import useForceUpdate from "../../hooks/use-force-update";
 import { useAsyncGenerator } from "../../hooks/use-generators";
-import { getTokenSymbol } from "../token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 import MultiBalance from "../multi-balance";
 import MultiTransactionStatus from "../multi-transaction-status";
 
@@ -117,8 +117,8 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
   const showTriggerButton = ["click", "both"].includes(triggerCondition);
   const showAutomatically = ["auto", "both"].includes(triggerCondition);
 
-  const xPNKtokenSymbol = getTokenSymbol(chainId, "xPNK");
-  const PNKTokenSymbol = getTokenSymbol(chainId, "PNK");
+  const xPnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "xPNK"), [chainId]);
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
 
   const [visible, setVisible] = React.useState(false);
   React.useEffect(() => {
@@ -153,7 +153,7 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
       {showTriggerButton ? (
         <Affix style={{ position: "fixed", bottom: 24, left: 24 }}>
           <StyledPulseButton type="primary" shape="round" size="large" onClick={() => setVisible(true)}>
-            <span>Deposit {xPNKtokenSymbol}</span>
+            <span>Deposit {xPnkTokenSymbol}</span>
           </StyledPulseButton>
         </Affix>
       ) : null}
@@ -161,7 +161,7 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
         visible={visible}
         centered
         width={586}
-        title={<>Deposit your {xPNKtokenSymbol}</>}
+        title={<>Deposit your {xPnkTokenSymbol}</>}
         cancelText="Ignore"
         onCancel={handleCancel}
         cancelButtonProps={{
@@ -175,10 +175,10 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
         onOk={handleOk}
       >
         <StyledExplainer>
-          To be able to stake on Kleros Court, you need to deposit your {xPNKtokenSymbol} to convert it to{" "}
-          {PNKTokenSymbol}(Staking PNK).{" "}
+          To be able to stake on Kleros Court, you need to deposit your {xPnkTokenSymbol} to convert it to{" "}
+          {pnkTokenSymbol}(Staking PNK).{" "}
           <strong>
-            You will receive 1 {PNKTokenSymbol} for every 1 {xPNKtokenSymbol} you deposit.
+            You will receive 1 {pnkTokenSymbol} for every 1 {xPnkTokenSymbol} you deposit.
           </strong>
         </StyledExplainer>
         <MultiBalance errors={errors} balance={balance} rawBalance={rawBalance} />
@@ -212,7 +212,7 @@ UnwrappedSideChainPnkModal.defaultProps = {
 
 function GetSideChainPnkModal({ defaultVisible }) {
   const chainId = useChainId();
-  const xPNKtokenSymbol = getTokenSymbol(chainId, "xPNK");
+  const xPnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "xPNK"), [chainId]);
 
   const [visible, setVisible] = React.useState(defaultVisible);
   const handleCancel = () => setVisible(false);
@@ -222,12 +222,12 @@ function GetSideChainPnkModal({ defaultVisible }) {
       visible={visible}
       centered
       width={586}
-      title={<>You have no {xPNKtokenSymbol}</>}
+      title={<>You have no {xPnkTokenSymbol}</>}
       onCancel={handleCancel}
       footer={null}
     >
       <StyledExplainer>
-        To be able to stake on Kleros Court, first you need to get some {xPNKtokenSymbol}.
+        To be able to stake on Kleros Court, first you need to get some {xPnkTokenSymbol}.
       </StyledExplainer>
       <div
         css={`
diff --git a/src/components/side-chain/switch-court-chain.js b/src/components/side-chain/switch-court-chain.js
index a460a3a..bd8394b 100644
--- a/src/components/side-chain/switch-court-chain.js
+++ b/src/components/side-chain/switch-court-chain.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import t from "prop-types";
 import styled from "styled-components/macro";
 import { Button, Icon, Modal, Typography } from "antd";
@@ -25,7 +25,7 @@ import { chainIdToNetworkName, chainIdToNetworkShortName } from "../../helpers/n
 import { useSetRequiredChainId } from "../required-chain-id-gateway";
 import AnnouncementBanner from "./announcement-banner";
 import MultiBalance from "../multi-balance";
-import { getTokenSymbol } from "../token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 
 const { useDrizzle } = drizzleReactHooks;
 
@@ -36,6 +36,8 @@ export default function SwitchCourtChain() {
   const account = useAccount();
   const hasAccount = !!account;
 
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
+
   const destinationChainId = React.useMemo(() => {
     try {
       return getCounterPartyChainId(chainId);
@@ -64,7 +66,7 @@ export default function SwitchCourtChain() {
         <StyledButtonWrapper>
           <Link component={StyledButtonLink} to="/convert-pnk" icon="swap">
             <span>
-              Send {getTokenSymbol(chainId, "PNK")} to {chainIdToNetworkShortName[destinationChainId]}
+              Send {pnkTokenSymbol} to {chainIdToNetworkShortName[destinationChainId]}
             </span>
           </Link>
           <CustomButton
@@ -260,11 +262,12 @@ function GetSideChainPnkLink({ icon, as, ...additionalProps }) {
   const Component = as;
   const destinationChainId = useDestinationChainId();
   const { bridgeAppUrl } = getSideChainParams(destinationChainId);
+  const xPnkDestinationTokenSymbol = useMemo(() => getTokenSymbol(destinationChainId, "xPNK"), [destinationChainId]);
 
   return (
     <Component href={bridgeAppUrl} target="_blank" rel="noreferrer noopener" {...additionalProps}>
       <span>
-        Get {getTokenSymbol(destinationChainId, "xPNK")} for {chainIdToNetworkName[destinationChainId]}
+        Get {xPnkDestinationTokenSymbol} for {chainIdToNetworkName[destinationChainId]}
       </span>
       {icon}
     </Component>
@@ -320,6 +323,8 @@ function SideChainCourtModal({ balance, rawBalance, errors, trigger }) {
   const [visible, setVisible] = React.useState(false);
   const destinationChainId = useDestinationChainId();
 
+  const xPnkDestinationTokenSymbol = useMemo(() => getTokenSymbol(destinationChainId, "xPNK"), [destinationChainId]);
+
   const switchChain = useSwitchChain(destinationChainId);
 
   const [autoSwitchEnabled, setAutoSwitchEnabled] = React.useState(false);
@@ -380,7 +385,7 @@ function SideChainCourtModal({ balance, rawBalance, errors, trigger }) {
         <StyledSpacer style={{ "--size": "2rem" }} />
         <StyledExplainer>
           To be able to stake on Kleros Court on {chainIdToNetworkName[destinationChainId]}, first you need to get some{" "}
-          {getTokenSymbol(destinationChainId, "xPNK")} for that chain.
+          {xPnkDestinationTokenSymbol} for that chain.
         </StyledExplainer>
       </StyledModal>
     </>
diff --git a/src/components/stake-modal.js b/src/components/stake-modal.js
index 4312401..096ec8f 100644
--- a/src/components/stake-modal.js
+++ b/src/components/stake-modal.js
@@ -8,7 +8,7 @@ import infoImg from "../assets/images/info.png";
 import { useDataloader, VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 import useAccount from "../hooks/use-account";
 import useChainId from "../hooks/use-chain-id";
-import { getTokenSymbol } from "./token-symbol";
+import { getTokenSymbol } from "../helpers/get-token-symbol";
 import ETHAmount from "./eth-amount";
 import { isSupportedSideChain } from "../api/side-chain";
 import SideChainPnkActions from "./side-chain/pnk-actions";
@@ -69,7 +69,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
   const selectedStakeValue = Number.parseInt(String(form.getFieldValue("PNK")));
   const selectedStake = toBN(toWei(String(Number.isNaN(selectedStakeValue) ? 0 : selectedStakeValue)));
   const shouldShowMaxStakeAlert = selectedStake.gt(maxRecommendedStake) && selectedStake.lte(max);
-  const PNKTokenSymbol = getTokenSymbol(chainId, "PNK");
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
 
   const loading = !min || !max;
   const { send, status } = useCacheSend("KlerosLiquid", "setStake");
@@ -104,7 +104,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
       )}
       title={
         <>
-          Stake {PNKTokenSymbol} in {name || "-"}
+          Stake {pnkTokenSymbol} in {name || "-"}
         </>
       }
       visible
@@ -117,7 +117,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
             <ETHAmount amount={max} tokenSymbol="PNK" />
           </StyledAmountDiv>
           <div>
-            ({PNKTokenSymbol} in your wallet - {PNKTokenSymbol} already staked)
+            ({pnkTokenSymbol} in your wallet - {pnkTokenSymbol} already staked)
           </div>
         </AvailableStake>
       </StyledRow>
@@ -152,7 +152,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
                   </div>
                 }
                 hasFeedback
-                label={PNKTokenSymbol}
+                label={pnkTokenSymbol}
               >
                 {form.getFieldDecorator("PNK", {
                   initialValue: fromWei(String(maxRecommendedStake)),
diff --git a/src/containers/convert-pnk/convert-pnk-card.js b/src/containers/convert-pnk/convert-pnk-card.js
index 12d998d..3f66e4a 100644
--- a/src/containers/convert-pnk/convert-pnk-card.js
+++ b/src/containers/convert-pnk/convert-pnk-card.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { Card, Divider } from "antd";
 import { ButtonLink } from "../../adapters/antd";
-import { getTokenSymbol } from "../../components/token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 import SteppedContent from "../../components/stepped-content";
 import { getCounterPartyChainId, isSupportedMainChain, isSupportedSideChain } from "../../api/side-chain";
 import { chainIdToNetworkShortName } from "../../helpers/networks";
@@ -20,8 +20,8 @@ export default function ConvertPnkCard() {
   const originChainId = isSupportedMainChain(counterPartyChainId) ? currentChainId : counterPartyChainId;
   const targetChainId = isSupportedMainChain(counterPartyChainId) ? counterPartyChainId : currentChainId;
 
-  const tokenSymbolOriginChainId = getTokenSymbol(originChainId, "PNK");
-  const tokenSymbolTargetChainId = getTokenSymbol(targetChainId, "PNK");
+  const pnkTokenSymbolOriginChainId = useMemo(() => getTokenSymbol(originChainId, "PNK"), [originChainId]);
+  const pnkTokenSymbolTargetChainId = useMemo(() => getTokenSymbol(targetChainId, "PNK"), [targetChainId]);
 
   const { step, next, first } = useStep();
 
@@ -45,7 +45,7 @@ export default function ConvertPnkCard() {
     <StyledCard
       title={
         <>
-          Send {tokenSymbolOriginChainId} to {chainIdToNetworkShortName[targetChainId]}
+          Send {pnkTokenSymbolOriginChainId} to {chainIdToNetworkShortName[targetChainId]}
         </>
       }
     >
@@ -54,7 +54,7 @@ export default function ConvertPnkCard() {
           margin-top: -1rem;
         `}
       >
-        Keep in mind that {tokenSymbolOriginChainId} that are staked or locked cannot be sent to{" "}
+        Keep in mind that {pnkTokenSymbolOriginChainId} that are staked or locked cannot be sent to{" "}
         {chainIdToNetworkShortName[targetChainId]}. To just get xPNK, use the form below.
       </StyledExplainerText>
       <StyledDivider />
@@ -71,7 +71,8 @@ export default function ConvertPnkCard() {
               <span role="img" aria-label="Party popper emoji">
                 🎉
               </span>{" "}
-              You have successfully sent your {tokenSymbolOriginChainId} to {chainIdToNetworkShortName[targetChainId]}!{" "}
+              You have successfully sent your {pnkTokenSymbolOriginChainId} to{" "}
+              {chainIdToNetworkShortName[targetChainId]}!{" "}
               <span role="img" aria-label="Party popper emoji">
                 🎉
               </span>
@@ -83,7 +84,7 @@ export default function ConvertPnkCard() {
         )}
         steps={[
           {
-            title: <>Convert {tokenSymbolOriginChainId}</>,
+            title: <>Convert {pnkTokenSymbolOriginChainId}</>,
             children() {
               return isSupportedSideChain(currentChainId) ? (
                 <ConvertPnkForm onDone={handleFormDone} />
@@ -99,7 +100,7 @@ export default function ConvertPnkCard() {
             },
           },
           {
-            title: <>Claim {tokenSymbolTargetChainId}</>,
+            title: <>Claim {pnkTokenSymbolTargetChainId}</>,
             children() {
               return <ClaimTokensButton onDone={next} />;
             },
diff --git a/src/containers/convert-pnk/convert-pnk-form.js b/src/containers/convert-pnk/convert-pnk-form.js
index 7ae9e63..09c1902 100644
--- a/src/containers/convert-pnk/convert-pnk-form.js
+++ b/src/containers/convert-pnk/convert-pnk-form.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import t from "prop-types";
 import styled from "styled-components/macro";
 import { Alert, Button, Col, Form, Icon, InputNumber, Row, Skeleton } from "antd";
@@ -7,7 +7,7 @@ import Web3 from "web3";
 import { useSideChainApi } from "../../api/side-chain";
 import BalanceTable from "../../components/balance-table";
 import MultiTransactionStatus from "../../components/multi-transaction-status";
-import { getTokenSymbol } from "../../components/token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 import { chainIdToNetworkShortName } from "../../helpers/networks";
 import useAccount from "../../hooks/use-account";
 import { useAsyncGenerator } from "../../hooks/use-generators";
@@ -101,24 +101,24 @@ function useWithdrawTokens(withdrawTokens) {
 
 function PnkBalanceTable({ balance, locked, pendingStake, staked, available, error }) {
   const chainId = useDrizzleState((ds) => ds.web3.networkId);
-  const tokenSymbol = getTokenSymbol(chainId, "PNK");
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
 
   return (
     <>
       <BalanceTable title="Your Balance">
-        <BalanceTable.Row description="Total:" value={balance} error={error} tokenSymbol={tokenSymbol} />
+        <BalanceTable.Row description="Total:" value={balance} error={error} tokenSymbol={pnkTokenSymbol} />
         <BalanceTable.Row
           description="Locked in cases:"
           value={locked}
           error={error}
-          tokenSymbol={tokenSymbol}
+          tokenSymbol={pnkTokenSymbol}
           variant="warning"
         />
         <BalanceTable.Row
           description="Staked on courts:"
           value={staked}
           error={error}
-          tokenSymbol={tokenSymbol}
+          tokenSymbol={pnkTokenSymbol}
           variant="warning"
         />
         {pendingStake ? (
@@ -126,7 +126,7 @@ function PnkBalanceTable({ balance, locked, pendingStake, staked, available, err
             description="Pending stake*:"
             value={pendingStake}
             error={error}
-            tokenSymbol={tokenSymbol}
+            tokenSymbol={pnkTokenSymbol}
             variant="warning"
           />
         ) : null}
@@ -135,7 +135,7 @@ function PnkBalanceTable({ balance, locked, pendingStake, staked, available, err
           description="Available to convert:"
           value={available}
           error={error}
-          tokenSymbol={tokenSymbol}
+          tokenSymbol={pnkTokenSymbol}
           variant="primary"
         />
       </BalanceTable>
@@ -154,9 +154,9 @@ function PnkBalanceTable({ balance, locked, pendingStake, staked, available, err
                   your stake changes to be processed.
                 </p>
                 <p>
-                  This means that if you have just unstaked, you will not be able to convert those {tokenSymbol} right
-                  now. On the other hand, if you just staked, you can convert those {tokenSymbol} now, but the pending
-                  stake changes will be discarded.
+                  This means that if you have just unstaked, you will not be able to convert those {pnkTokenSymbol}{" "}
+                  right now. On the other hand, if you just staked, you can convert those {pnkTokenSymbol} now, but the
+                  pending stake changes will be discarded.
                 </p>
               </>
             }
@@ -181,6 +181,9 @@ const ConvertPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, disabl
 
   const { chainId, destinationChainId } = sideChainApi;
 
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
+  const pnkDestinationTokenSymbol = useMemo(() => getTokenSymbol(destinationChainId, "PNK"), [destinationChainId]);
+
   const feeRatio = usePromise(React.useCallback(() => sideChainApi.getFeeRatio(), [sideChainApi]));
 
   const { validateFieldsAndScroll, getFieldDecorator, getFieldsError, setFieldsValue } = form;
@@ -270,7 +273,7 @@ const ConvertPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, disabl
               hasFeedback
               label={
                 <StyledCompositeLabel>
-                  {getTokenSymbol(chainId, "PNK")}
+                  {pnkTokenSymbol}
                   <StyledButtonLink onClick={handleUseMaxClick}>use max.</StyledButtonLink>
                 </StyledCompositeLabel>
               }
@@ -290,7 +293,7 @@ const ConvertPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, disabl
             <Icon type="right-circle" theme="filled" />
           </StyledSeparatorCol>
           <StyledFieldCol>
-            <StyledFormItem hasFeedback label={getTokenSymbol(destinationChainId, "PNK")}>
+            <StyledFormItem hasFeedback label={pnkDestinationTokenSymbol}>
               {destinationDecorator(
                 <InputNumber
                   placeholder="Amount to receive"
diff --git a/src/containers/convert-pnk/convert-pnk.js b/src/containers/convert-pnk/convert-pnk.js
index 2819f56..8576130 100644
--- a/src/containers/convert-pnk/convert-pnk.js
+++ b/src/containers/convert-pnk/convert-pnk.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components/macro";
 import { drizzleReactHooks } from "@drizzle/react-plugin";
 import { Divider, Spin } from "antd";
 import { getCounterPartyChainId, isSupportedMainChain, SideChainApiProvider } from "../../api/side-chain";
 import { getReadOnlyWeb3 } from "../../bootstrap/web3";
-import { getTokenSymbol } from "../../components/token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 import TopBanner from "../../components/top-banner";
 import { chainIdToNetworkName } from "../../helpers/networks";
 import useChainId from "../../hooks/use-chain-id";
@@ -59,13 +59,16 @@ function ConvertPnk() {
   const originChainId = isSupportedMainChain(counterPartyChainId) ? currentChainId : counterPartyChainId;
   const targetChainId = isSupportedMainChain(counterPartyChainId) ? counterPartyChainId : currentChainId;
 
+  const originChainTokenSymbol = useMemo(() => getTokenSymbol(originChainId, "PNK"), [originChainId]);
+  const targetChainTokenSymbol = useMemo(() => getTokenSymbol(targetChainId, "PNK"), [targetChainId]);
+
   return (
     <>
       <TopBanner
         title="Convert to PNK"
         description={
           <>
-            Send your {getTokenSymbol(originChainId, "PNK")} to get {getTokenSymbol(targetChainId, "PNK")} back on{" "}
+            Send your {originChainTokenSymbol} to get {targetChainTokenSymbol} back on{" "}
             {chainIdToNetworkName[targetChainId]}
           </>
         }
diff --git a/src/containers/convert-pnk/wihdraw-stpnk-card.js b/src/containers/convert-pnk/wihdraw-stpnk-card.js
index 6dae689..9aa1a45 100644
--- a/src/containers/convert-pnk/wihdraw-stpnk-card.js
+++ b/src/containers/convert-pnk/wihdraw-stpnk-card.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import Web3 from "web3";
 import { useSideChainApi } from "../../api/side-chain";
 import { Card, Button, Form, Input } from "antd";
 import stPNKAbi from "../../assets/contracts/wrapped-pinakion.json";
-import { getTokenSymbol } from "../../components/token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 import { drizzleReactHooks } from "@drizzle/react-plugin";
 import { VIEW_ONLY_ADDRESS } from "../../bootstrap/dataloader";
 import usePromise from "../../hooks/use-promise";
@@ -112,6 +112,7 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
     account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
   }));
   const { validateFieldsAndScroll, getFieldDecorator, setFieldsValue, getFieldsError } = form;
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
 
   const amountDecorator = getFieldDecorator("amount", {
     rules: [
@@ -160,7 +161,7 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
             hasFeedback
             label={
               <StyledCompositeLabel>
-                {getTokenSymbol(chainId, "PNK")}
+                {pnkTokenSymbol}
                 <StyledButtonLink onClick={handleUseMaxClick}>use max.</StyledButtonLink>
               </StyledCompositeLabel>
             }
diff --git a/src/components/token-symbol.js b/src/helpers/get-token-symbol.js
similarity index 100%
rename from src/components/token-symbol.js
rename to src/helpers/get-token-symbol.js