Skip to content

Commit

Permalink
refactor(web): usememos, move gettokensymbol to helpers folder, camel…
Browse files Browse the repository at this point in the history
…cases
  • Loading branch information
kemuru committed Dec 5, 2023
1 parent f718562 commit 2a83c5d
Show file tree
Hide file tree
Showing 11 changed files with 79 additions and 69 deletions.
7 changes: 4 additions & 3 deletions src/components/account-details-popup.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions src/components/eth-amount.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -33,7 +34,7 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {

return tokenSymbol === true ? (
<>
{value} {getTokenSymbol(chainId)}
{value} {chainTokenSymbol}
</>
) : tokenSymbol === false ? (
value
Expand All @@ -43,7 +44,7 @@ export default function ETHAmount({ amount, decimals, tokenSymbol }) {
</>
) : (
<>
{value} {getTokenSymbol(chainId, tokenSymbol)}
{value} {calculatedTokenSymbol}
</>
);
}
Expand Down
17 changes: 6 additions & 11 deletions src/components/multi-balance.js
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
24 changes: 12 additions & 12 deletions src/components/side-chain/pnk-actions.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -153,15 +153,15 @@ 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}
<StyledModal
visible={visible}
centered
width={586}
title={<>Deposit your {xPNKtokenSymbol}</>}
title={<>Deposit your {xPnkTokenSymbol}</>}
cancelText="Ignore"
onCancel={handleCancel}
cancelButtonProps={{
Expand All @@ -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} />
Expand Down Expand Up @@ -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);
Expand All @@ -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={`
Expand Down
15 changes: 10 additions & 5 deletions src/components/side-chain/switch-court-chain.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;

Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
</>
Expand Down
10 changes: 5 additions & 5 deletions src/components/stake-modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -104,7 +104,7 @@ const StakeModalForm = Form.create()(({ ID, form, onCancel, stakedTokens, max })
)}
title={
<>
Stake {PNKTokenSymbol} in {name || "-"}
Stake {pnkTokenSymbol} in {name || "-"}
</>
}
visible
Expand All @@ -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>
Expand Down Expand Up @@ -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)),
Expand Down
19 changes: 10 additions & 9 deletions src/containers/convert-pnk/convert-pnk-card.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();

Expand All @@ -45,7 +45,7 @@ export default function ConvertPnkCard() {
<StyledCard
title={
<>
Send {tokenSymbolOriginChainId} to {chainIdToNetworkShortName[targetChainId]}
Send {pnkTokenSymbolOriginChainId} to {chainIdToNetworkShortName[targetChainId]}
</>
}
>
Expand All @@ -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 />
Expand All @@ -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>
Expand All @@ -83,7 +84,7 @@ export default function ConvertPnkCard() {
)}
steps={[
{
title: <>Convert {tokenSymbolOriginChainId}</>,
title: <>Convert {pnkTokenSymbolOriginChainId}</>,
children() {
return isSupportedSideChain(currentChainId) ? (
<ConvertPnkForm onDone={handleFormDone} />
Expand All @@ -99,7 +100,7 @@ export default function ConvertPnkCard() {
},
},
{
title: <>Claim {tokenSymbolTargetChainId}</>,
title: <>Claim {pnkTokenSymbolTargetChainId}</>,
children() {
return <ClaimTokensButton onDone={next} />;
},
Expand Down
Loading

0 comments on commit 2a83c5d

Please sign in to comment.