a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Push token decoration into DecoratedAddressLink component

This commit is contained in:
Willian Mitsuda 2021-07-19 14:56:36 -03:00
parent 2aa6298fdf
commit 83af14259b
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/TokenTransferItem.tsx
View File

@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons"; import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
import AddressHighlighter from "./components/AddressHighlighter"; import AddressHighlighter from "./components/AddressHighlighter";
import DecoratedAddressLink from "./components/DecoratedAddressLink"; import DecoratedAddressLink from "./components/DecoratedAddressLink";
import TokenLogo from "./components/TokenLogo";
import FormattedBalance from "./components/FormattedBalance"; import FormattedBalance from "./components/FormattedBalance";
import { import {
AddressContext, AddressContext,
@ -58,23 +57,15 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
decimals={tokenMetas[t.token].decimals} decimals={tokenMetas[t.token].decimals}
/> />
</span> </span>
<span className="flex space-x-1 items-baseline truncate">
{tokenMetas[t.token] ? (
<>
<div className="self-center">
<TokenLogo address={t.token} name={tokenMetas[t.token].name} />
</div>
<DecoratedAddressLink <DecoratedAddressLink
address={t.token} address={t.token}
text={`${tokenMetas[t.token].name} (${ text={
tokenMetas[t.token].symbol tokenMetas[t.token]
})`} ? `${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`
: ""
}
tokenMeta={tokenMetas[t.token]}
/> />
</>
) : (
<DecoratedAddressLink address={t.token} />
)}
</span>
</div> </div>
</div> </div>
</div> </div>

10
src/components/DecoratedAddressLink.tsx
View File

@ -5,8 +5,9 @@ import {
faBurn, faBurn,
faCoins, faCoins,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import TokenLogo from "./TokenLogo";
import AddressOrENSName from "./AddressOrENSName"; import AddressOrENSName from "./AddressOrENSName";
import { AddressContext, ZERO_ADDRESS } from "../types"; import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types";
type DecoratedAddressLinkProps = { type DecoratedAddressLinkProps = {
address: string; address: string;
@ -18,6 +19,7 @@ type DecoratedAddressLinkProps = {
selfDestruct?: boolean; selfDestruct?: boolean;
txFrom?: boolean; txFrom?: boolean;
txTo?: boolean; txTo?: boolean;
tokenMeta?: TokenMeta;
}; };
const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
@ -30,6 +32,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
selfDestruct, selfDestruct,
txFrom, txFrom,
txTo, txTo,
tokenMeta,
}) => { }) => {
const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS; const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS; const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@ -57,6 +60,11 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
<FontAwesomeIcon icon={faCoins} size="1x" /> <FontAwesomeIcon icon={faCoins} size="1x" />
</span> </span>
)} )}
{tokenMeta && (
<div className="self-center">
<TokenLogo address={address} name={tokenMeta.name} />
</div>
)}
<AddressOrENSName <AddressOrENSName
address={address} address={address}
ensName={ensName} ensName={ensName}