diff --git a/src/components/account-details-popup.js b/src/components/account-details-popup.js
index 0936d09..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,12 +7,14 @@ import { VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 import ETHAddress from "./eth-address";
 import ETHAmount from "./eth-amount";
 import Identicon from "./identicon";
-import { AutoDetectedTokenSymbol } 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,
@@ -51,11 +53,7 @@ export default function AccountDetailsPopup({ trigger, pinakion, className }) {
                 <List.Item>
                   <List.Item.Meta
                     description={<ETHAmount amount={PNK} tokenSymbol="PNK" />}
-                    title={
-                      <>
-                        <AutoDetectedTokenSymbol token="PNK" /> Balance
-                      </>
-                    }
+                    title={<>{pnkTokenSymbol} Balance</>}
                   />
                 </List.Item>
               </Spin>
diff --git a/src/components/claim-modal.js b/src/components/claim-modal.js
index f047a7e..e5d6dc9 100644
--- a/src/components/claim-modal.js
+++ b/src/components/claim-modal.js
@@ -8,7 +8,6 @@ import { ReactComponent as Kleros } from "../assets/images/kleros.svg";
 import { ReactComponent as RightArrow } from "../assets/images/right-arrow.svg";
 import useChainId from "../hooks/use-chain-id";
 import ETHAmount from "./eth-amount";
-import TokenSymbol from "./token-symbol";
 
 const chainIdToParams = {
   1: {
@@ -265,11 +264,7 @@ const ClaimModal = ({ visible, onOk, onCancel, displayButton, apyCallback }) =>
       }}
       centered
       keyboard
-      okText={
-        <>
-          Claim Your <TokenSymbol token="PNK" /> Tokens
-        </>
-      }
+      okText={<>Claim Your PNK Tokens</>}
       onOk={onOk}
       onCancel={handleCancel}
       visible={visible}
@@ -309,7 +304,7 @@ const ClaimModal = ({ visible, onOk, onCancel, displayButton, apyCallback }) =>
             </span>
           </div>
           <div style={{ fontSize: "24px", fontWeight: "500", marginTop: "8px" }}>
-            As a Kleros Juror, you will earn <TokenSymbol token="PNK" /> for staking in Court.
+            As a Kleros Juror, you will earn PNK for staking in Court.
           </div>
 
           <div
@@ -325,9 +320,7 @@ const ClaimModal = ({ visible, onOk, onCancel, displayButton, apyCallback }) =>
             }}
           >
             <div style={{ display: "flex", justifyContent: "space-between" }}>
-              <div>
-                Total Rewarded <TokenSymbol token="PNK" />:
-              </div>
+              <div>Total Rewarded PNK:</div>
               <div style={{ fontWeight: "500", textAlign: "right" }}>
                 <ETHAmount amount={claims && getTotalRewarded(claims)} decimals={0} tokenSymbol="PNK" />
               </div>
@@ -413,9 +406,7 @@ const ClaimModal = ({ visible, onOk, onCancel, displayButton, apyCallback }) =>
           }
           disabled={!claims || Number(drizzle.web3.utils.fromWei(getTotalClaimable(claims))).toFixed(0) < 1}
         >
-          <span>
-            Claim Your <TokenSymbol token="PNK" /> Tokens
-          </span>
+          <span>Claim Your PNK Tokens</span>
         </Button>
       )}
     </Modal>
diff --git a/src/components/eth-amount.js b/src/components/eth-amount.js
index b84dce7..1b6ce9c 100644
--- a/src/components/eth-amount.js
+++ b/src/components/eth-amount.js
@@ -1,13 +1,25 @@
-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 { AutoDetectedTokenSymbol } from "./token-symbol";
+import { getTokenSymbol } from "../helpers/get-token-symbol";
+import { drizzleReactHooks } from "@drizzle/react-plugin";
 
+const { useDrizzleState } = drizzleReactHooks;
 const { fromWei } = Web3.utils;
 
 export default function ETHAmount({ amount, decimals, tokenSymbol }) {
+  const chainId = useDrizzleState((ds) => ds.web3.networkId);
+
+  let finalDecimals = decimals;
+  const chainTokenSymbol = useMemo(() => getTokenSymbol(chainId), [chainId]);
+  const calculatedTokenSymbol = useMemo(() => getTokenSymbol(chainId, tokenSymbol), [chainId, tokenSymbol]);
+
+  if (chainTokenSymbol === "xDAI" && tokenSymbol === true) {
+    finalDecimals = 2;
+  }
+
   if (amount === null) {
     return <StyledSkeleton active paragraph={false} title={SkeletonTitleProps} />;
   }
@@ -15,11 +27,14 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {
   const numericValue = Number(
     fromWei(typeof amount === "number" ? formatNumber(amount, { decimals: 0 }) : String(amount))
   );
-  const value = formatNumber(decimals === 0 ? Math.trunc(numericValue) : numericValue, { decimals, useGrouping: true });
+  const value = formatNumber(finalDecimals === 0 ? Math.trunc(numericValue) : numericValue, {
+    decimals: finalDecimals,
+    useGrouping: true,
+  });
 
   return tokenSymbol === true ? (
     <>
-      {value} <AutoDetectedTokenSymbol />
+      {value} {chainTokenSymbol}
     </>
   ) : tokenSymbol === false ? (
     value
@@ -29,7 +44,7 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {
     </>
   ) : (
     <>
-      {value} <AutoDetectedTokenSymbol token={tokenSymbol} />
+      {value} {calculatedTokenSymbol}
     </>
   );
 }
diff --git a/src/components/multi-balance.js b/src/components/multi-balance.js
index 918beab..3200cbc 100644
--- a/src/components/multi-balance.js
+++ b/src/components/multi-balance.js
@@ -1,19 +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 TokenSymbol, { AutoDetectedTokenSymbol } from "./token-symbol";
+import { getTokenSymbol } from "../helpers/get-token-symbol";
 
 const { BN } = Web3.utils;
 
 export default function MultiBalance({ title, chainId, errors, balance, rawBalance, rowClassNames }) {
-  const TokenSymbolComponent = chainId ? TokenSymbol : AutoDetectedTokenSymbol;
-  const tokenSymbolProps = chainId ? { chainId } : {};
-  const balanceTokenSymbol = <TokenSymbolComponent {...tokenSymbolProps} token="PNK" />;
-  const rawBalanceTokenSymbol = <TokenSymbolComponent {...tokenSymbolProps} token="xPNK" />;
+  const [balanceTokenSymbol, rawBalanceTokenSymbol] = useMemo(
+    () => (chainId ? [getTokenSymbol(chainId, "PNK"), getTokenSymbol(chainId, "xPNK")] : ["PNK", "xPNK"]),
+    [chainId]
+  );
 
   return (
     <StyledMultiBalance>
diff --git a/src/components/pnk-balance-card.js b/src/components/pnk-balance-card.js
index d277e8a..14f9808 100644
--- a/src/components/pnk-balance-card.js
+++ b/src/components/pnk-balance-card.js
@@ -7,7 +7,6 @@ import { ReactComponent as PurpleArrowBackground } from "../assets/images/purple
 import { VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 import ETHAmount from "./eth-amount";
 import Hint from "./hint";
-import TokenSymbol from "./token-symbol";
 
 const { useDrizzle, useDrizzleState } = drizzleReactHooks;
 
@@ -174,11 +173,7 @@ const PNKBalanceCard = () => {
               <StyledBottomDiv>
                 Locked{" "}
                 <Hint
-                  description={
-                    <>
-                      These <TokenSymbol token="PNK" /> are locked in active disputes for potential redistribution.
-                    </>
-                  }
+                  description={<>These PNK are locked in active disputes for potential redistribution.</>}
                   title={
                     <>
                       <ETHAmount amount={juror && juror.lockedTokens} tokenSymbol="PNK" />
diff --git a/src/components/side-chain/pnk-actions.js b/src/components/side-chain/pnk-actions.js
index 77fc66f..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 TokenSymbol from "../token-symbol";
+import { getTokenSymbol } from "../../helpers/get-token-symbol";
 import MultiBalance from "../multi-balance";
 import MultiTransactionStatus from "../multi-transaction-status";
 
@@ -117,6 +117,9 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
   const showTriggerButton = ["click", "both"].includes(triggerCondition);
   const showAutomatically = ["auto", "both"].includes(triggerCondition);
 
+  const xPnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "xPNK"), [chainId]);
+  const pnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
+
   const [visible, setVisible] = React.useState(false);
   React.useEffect(() => {
     setVisible(showAutomatically);
@@ -150,9 +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 <TokenSymbol chainId={chainId} token="xPNK" />
-            </span>
+            <span>Deposit {xPnkTokenSymbol}</span>
           </StyledPulseButton>
         </Affix>
       ) : null}
@@ -160,11 +161,7 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
         visible={visible}
         centered
         width={586}
-        title={
-          <>
-            Deposit your <TokenSymbol chainId={chainId} token="xPNK" />
-          </>
-        }
+        title={<>Deposit your {xPnkTokenSymbol}</>}
         cancelText="Ignore"
         onCancel={handleCancel}
         cancelButtonProps={{
@@ -178,11 +175,10 @@ function UnwrappedSideChainPnkModal({ triggerCondition, account, balance, rawBal
         onOk={handleOk}
       >
         <StyledExplainer>
-          To be able to stake on Kleros Court, you need to deposit your <TokenSymbol chainId={chainId} token="xPNK" />{" "}
-          to convert it to <TokenSymbol chainId={chainId} token="PNK" /> (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 <TokenSymbol chainId={chainId} token="PNK" /> for every 1{" "}
-            <TokenSymbol chainId={chainId} token="xPNK" /> you deposit.
+            You will receive 1 {pnkTokenSymbol} for every 1 {xPnkTokenSymbol} you deposit.
           </strong>
         </StyledExplainer>
         <MultiBalance errors={errors} balance={balance} rawBalance={rawBalance} />
@@ -216,6 +212,7 @@ UnwrappedSideChainPnkModal.defaultProps = {
 
 function GetSideChainPnkModal({ defaultVisible }) {
   const chainId = useChainId();
+  const xPnkTokenSymbol = useMemo(() => getTokenSymbol(chainId, "xPNK"), [chainId]);
 
   const [visible, setVisible] = React.useState(defaultVisible);
   const handleCancel = () => setVisible(false);
@@ -225,16 +222,12 @@ function GetSideChainPnkModal({ defaultVisible }) {
       visible={visible}
       centered
       width={586}
-      title={
-        <>
-          You have no <TokenSymbol chainId={chainId} token="xPNK" />
-        </>
-      }
+      title={<>You have no {xPnkTokenSymbol}</>}
       onCancel={handleCancel}
       footer={null}
     >
       <StyledExplainer>
-        To be able to stake on Kleros Court, first you need to get some <TokenSymbol chainId={chainId} token="xPNK" />.
+        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 c34c762..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 TokenSymbol 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 <TokenSymbol chainId={chainId} token="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 <TokenSymbol chainId={destinationChainId} token="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{" "}
-          <TokenSymbol chainId={destinationChainId} token="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 be5cadb..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 { AutoDetectedTokenSymbol } 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";
@@ -47,6 +47,7 @@ StakeModal.propTypes = {
 const RECOMMENDED_UNSTAKED_BUFFER = toBN("2000000000000000000000");
 
 const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max }) => {
+  const chainId = useDrizzleState((ds) => ds.web3.networkId);
   const { useCacheCall, useCacheSend } = useDrizzle();
   const drizzleState = useDrizzleState((drizzleState) => ({
     account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
@@ -68,6 +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 = useMemo(() => getTokenSymbol(chainId, "PNK"), [chainId]);
 
   const loading = !min || !max;
   const { send, status } = useCacheSend("KlerosLiquid", "setStake");
@@ -102,7 +104,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
       )}
       title={
         <>
-          Stake <AutoDetectedTokenSymbol token="PNK" /> in {name || "-"}
+          Stake {pnkTokenSymbol} in {name || "-"}
         </>
       }
       visible
@@ -115,8 +117,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
             <ETHAmount amount={max} tokenSymbol="PNK" />
           </StyledAmountDiv>
           <div>
-            (<AutoDetectedTokenSymbol token="PNK" /> in your wallet - <AutoDetectedTokenSymbol token="PNK" /> already
-            staked)
+            ({pnkTokenSymbol} in your wallet - {pnkTokenSymbol} already staked)
           </div>
         </AvailableStake>
       </StyledRow>
@@ -151,7 +152,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
                   </div>
                 }
                 hasFeedback
-                label={<AutoDetectedTokenSymbol token="PNK" />}
+                label={pnkTokenSymbol}
               >
                 {form.getFieldDecorator("PNK", {
                   initialValue: fromWei(String(maxRecommendedStake)),
diff --git a/src/containers/cases.js b/src/containers/cases.js
index d11eb8b..8ed2281 100644
--- a/src/containers/cases.js
+++ b/src/containers/cases.js
@@ -52,8 +52,7 @@ export default function Cases() {
 
             if (dispute.period === "1") {
               const vote = call("KlerosLiquid", "getVote", d.disputeID, d.appeal, d.voteID);
-              const isVoteCommitted =
-                vote?.commit !== "0x0000000000000000000000000000000000000000000000000000000000000000";
+              const isVoteCommitted = parseInt(vote?.commit, 16) !== 0;
               acc[vote?.voted ? "active" : "votePending"].push({
                 ID: d.disputeID,
                 draws: numberOfVotes,
diff --git a/src/containers/convert-pnk/convert-pnk-card.js b/src/containers/convert-pnk/convert-pnk-card.js
index 39aef7c..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 TokenSymbol 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,6 +20,9 @@ export default function ConvertPnkCard() {
   const originChainId = isSupportedMainChain(counterPartyChainId) ? currentChainId : counterPartyChainId;
   const targetChainId = isSupportedMainChain(counterPartyChainId) ? counterPartyChainId : currentChainId;
 
+  const pnkTokenSymbolOriginChainId = useMemo(() => getTokenSymbol(originChainId, "PNK"), [originChainId]);
+  const pnkTokenSymbolTargetChainId = useMemo(() => getTokenSymbol(targetChainId, "PNK"), [targetChainId]);
+
   const { step, next, first } = useStep();
 
   const handleFormDone = React.useCallback(() => {
@@ -42,7 +45,7 @@ export default function ConvertPnkCard() {
     <StyledCard
       title={
         <>
-          Send <TokenSymbol chainId={originChainId} token="PNK" /> to {chainIdToNetworkShortName[targetChainId]}
+          Send {pnkTokenSymbolOriginChainId} to {chainIdToNetworkShortName[targetChainId]}
         </>
       }
     >
@@ -51,8 +54,8 @@ export default function ConvertPnkCard() {
           margin-top: -1rem;
         `}
       >
-        Keep in mind that <TokenSymbol chainId={originChainId} token="PNK" /> that are staked or locked cannot be sent
-        to {chainIdToNetworkShortName[targetChainId]}. To just get xPNK, use the form below.
+        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 />
       <SteppedContent
@@ -68,7 +71,7 @@ export default function ConvertPnkCard() {
               <span role="img" aria-label="Party popper emoji">
                 🎉
               </span>{" "}
-              You have successfully sent your <TokenSymbol chainId={originChainId} token="PNK" /> to{" "}
+              You have successfully sent your {pnkTokenSymbolOriginChainId} to{" "}
               {chainIdToNetworkShortName[targetChainId]}!{" "}
               <span role="img" aria-label="Party popper emoji">
                 🎉
@@ -81,11 +84,7 @@ export default function ConvertPnkCard() {
         )}
         steps={[
           {
-            title: (
-              <>
-                Convert <TokenSymbol chainId={originChainId} token="PNK" />
-              </>
-            ),
+            title: <>Convert {pnkTokenSymbolOriginChainId}</>,
             children() {
               return isSupportedSideChain(currentChainId) ? (
                 <ConvertPnkForm onDone={handleFormDone} />
@@ -101,11 +100,7 @@ export default function ConvertPnkCard() {
             },
           },
           {
-            title: (
-              <>
-                Claim <TokenSymbol chainId={targetChainId} token="PNK" />
-              </>
-            ),
+            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 2201aa5..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,11 +7,14 @@ import Web3 from "web3";
 import { useSideChainApi } from "../../api/side-chain";
 import BalanceTable from "../../components/balance-table";
 import MultiTransactionStatus from "../../components/multi-transaction-status";
-import TokenSymbol, { AutoDetectedTokenSymbol } 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";
 import usePromise from "../../hooks/use-promise";
+import { drizzleReactHooks } from "@drizzle/react-plugin";
+
+const { useDrizzleState } = drizzleReactHooks;
 
 const { fromWei, toWei, toBN } = Web3.utils;
 
@@ -97,24 +100,25 @@ function useWithdrawTokens(withdrawTokens) {
 }
 
 function PnkBalanceTable({ balance, locked, pendingStake, staked, available, error }) {
-  const tokenSymbol = <AutoDetectedTokenSymbol token="PNK" />;
+  const chainId = useDrizzleState((ds) => ds.web3.networkId);
+  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 ? (
@@ -122,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}
@@ -131,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>
@@ -150,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>
               </>
             }
@@ -177,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;
@@ -266,7 +273,7 @@ const ConvertPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, disabl
               hasFeedback
               label={
                 <StyledCompositeLabel>
-                  <TokenSymbol chainId={chainId} token="PNK" />
+                  {pnkTokenSymbol}
                   <StyledButtonLink onClick={handleUseMaxClick}>use max.</StyledButtonLink>
                 </StyledCompositeLabel>
               }
@@ -286,7 +293,7 @@ const ConvertPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, disabl
             <Icon type="right-circle" theme="filled" />
           </StyledSeparatorCol>
           <StyledFieldCol>
-            <StyledFormItem hasFeedback label={<TokenSymbol chainId={destinationChainId} token="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 de2f7d4..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 TokenSymbol 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,14 +59,17 @@ 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 <TokenSymbol chainId={originChainId} token="PNK" /> to get{" "}
-            <TokenSymbol chainId={targetChainId} token="PNK" /> back on {chainIdToNetworkName[targetChainId]}
+            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 7bb801f..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 TokenSymbol 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: [
@@ -149,7 +150,7 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
         }
       });
     },
-    [validateFieldsAndScroll, account, drizzle.web3.eth.Contract]
+    [validateFieldsAndScroll, account, drizzle.web3.eth.Contract, chainId]
   );
 
   return (
@@ -160,14 +161,12 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
             hasFeedback
             label={
               <StyledCompositeLabel>
-                <TokenSymbol chainId={chainId} token="PNK" />
+                {pnkTokenSymbol}
                 <StyledButtonLink onClick={handleUseMaxClick}>use max.</StyledButtonLink>
               </StyledCompositeLabel>
             }
           >
-            {amountDecorator(
-              <Input placeholder="Amount to convert" size="large" />
-            )}
+            {amountDecorator(<Input placeholder="Amount to convert" size="large" />)}
           </StyledFormItem>
 
           <StyledButton
diff --git a/src/containers/courts.js b/src/containers/courts.js
index 3ad4945..c5b8afd 100644
--- a/src/containers/courts.js
+++ b/src/containers/courts.js
@@ -12,7 +12,6 @@ import PNKBalanceCard from "../components/pnk-balance-card";
 import RequiredChainIdGateway from "../components/required-chain-id-gateway";
 import RequiredChainIdModal from "../components/required-chain-id-modal";
 import StakeModal from "../components/stake-modal";
-import TokenSymbol from "../components/token-symbol";
 import TopBanner from "../components/top-banner";
 import SideChainPnkActions from "../components/side-chain/pnk-actions";
 import useChainId from "../hooks/use-chain-id";
@@ -37,11 +36,7 @@ export default function Courts() {
   const content = (
     <>
       <TopBanner
-        description={
-          <>
-            Select courts and stake <TokenSymbol token="PNK" />
-          </>
-        }
+        description={<>Select courts and stake PNK</>}
         extra={
           <StyledButtonBar>
             <Link
diff --git a/src/containers/home.js b/src/containers/home.js
index 7543f11..31cdfe0 100644
--- a/src/containers/home.js
+++ b/src/containers/home.js
@@ -13,7 +13,6 @@ import PerformanceCard from "../components/performance-card";
 import RewardCard from "../components/reward-card";
 import ClaimModal from "../components/claim-modal";
 import TopBanner from "../components/top-banner";
-import TokenSymbol from "../components/token-symbol";
 import RequiredChainIdGateway from "../components/required-chain-id-gateway";
 import RequiredChainIdModal from "../components/required-chain-id-modal";
 import SideChainPnkActions from "../components/side-chain/pnk-actions";
@@ -90,9 +89,7 @@ export default function Home() {
               type="primary"
             >
               <Present style={{ marginRight: "8px", verticalAlign: "text-top" }} />
-              <span>
-                Claim <TokenSymbol token="PNK" />
-              </span>
+              <span>Claim PNK</span>
             </StyledClaimButton>
             <Link
               to="/tokens"
diff --git a/src/containers/tokens.js b/src/containers/tokens.js
index 146520f..650e723 100644
--- a/src/containers/tokens.js
+++ b/src/containers/tokens.js
@@ -8,7 +8,6 @@ import PNKMainnetExchangesCard from "../components/pnk-exchanges-card";
 import PNKXdaiExchangesCard from "../components/pnk-xdai-exchanges-card";
 import TopBanner from "../components/top-banner";
 import useChainId from "../hooks/use-chain-id";
-import TokenSymbol from "../components/token-symbol";
 import { VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 
 const { useDrizzle, useDrizzleState } = drizzleReactHooks;
@@ -48,9 +47,7 @@ export default function Tokens() {
               ) : hasOldKlerosAtStake ? (
                 "Looks like you have some PNK locked in the old Kleros. Come back later when the periods have passed to withdraw."
               ) : (
-                <>
-                  The more <TokenSymbol token="PNK" /> you stake, the higher your chances of being drawn as a juror.
-                </>
+                <>The more PNK you stake, the higher your chances of being drawn as a juror.</>
               )}
             </Skeleton>
           }
@@ -96,9 +93,7 @@ export default function Tokens() {
               ) : hasOldKlerosAtStake ? (
                 "Looks like you have some PNK locked in the old Kleros. Come back later when the periods have passed to withdraw."
               ) : (
-                <>
-                  The more <TokenSymbol token="PNK" /> you stake, the higher your chances of being drawn as a juror.
-                </>
+                <>The more PNK you stake, the higher your chances of being drawn as a juror.</>
               )}
             </Skeleton>
           }
diff --git a/src/components/token-symbol.js b/src/helpers/get-token-symbol.js
similarity index 55%
rename from src/components/token-symbol.js
rename to src/helpers/get-token-symbol.js
index 489c833..16de6ff 100644
--- a/src/components/token-symbol.js
+++ b/src/helpers/get-token-symbol.js
@@ -1,10 +1,6 @@
-import React from "react";
-import t from "prop-types";
-import { drizzleReactHooks } from "@drizzle/react-plugin";
+import t, { PropTypes } from "prop-types";
 
-const { useDrizzleState } = drizzleReactHooks;
-
-export default function TokenSymbol({ chainId, token }) {
+export function getTokenSymbol(chainId, token) {
   if (token) {
     return chainIdToTokenSuffix[chainId] && chainIdToTokenSuffix[chainId][token]
       ? chainIdToTokenSuffix[chainId][token]
@@ -15,17 +11,8 @@ export default function TokenSymbol({ chainId, token }) {
   return suffix;
 }
 
-TokenSymbol.propTypes = {
-  token: t.string,
-};
-
-export function AutoDetectedTokenSymbol({ token }) {
-  const chainId = useDrizzleState((ds) => ds.web3.networkId);
-
-  return <TokenSymbol chainId={chainId} token={token} />;
-}
-
-AutoDetectedTokenSymbol.propTypes = {
+getTokenSymbol.propTypes = {
+  chainId: PropTypes.number.isRequired,
   token: t.string,
 };