Skip to content

Commit

Permalink
[FRE-951, FRE-952]refactor(widget-v2): remove chain registry usage fo…
Browse files Browse the repository at this point in the history 
…r chain data (#191)
  • Loading branch information
@codingki
codingki authored Aug 28, 2024
1 parent 8262df8 commit 8beda36
Show file tree
Hide file tree
Showing 15 changed files with 188 additions and 165 deletions.
1 change: 1 addition & 0 deletions packages/widget-v2/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"jotai": "^2.9.1",
"jotai-tanstack-query": "^0.8.6",
"lodash.debounce": "^4.0.8",
"match-sorter": "^6.3.4",
"pluralize": "^8.0.0",
"rc-virtual-list": "^3.14.5",
"react-error-boundary": "^4.0.13",
Expand Down
13 changes: 9 additions & 4 deletions packages/widget-v2/src/components/AssetChainInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useTheme } from "styled-components";
import { CogIcon } from "@/icons/CogIcon";
import { Button, GhostButton } from "@/components/Button";
import { useAtom } from "jotai";
import { skipAssets } from "@/state/skipClient";
import { skipAssetsAtom, skipChainsAtom } from "@/state/skipClient";
import { useUsdValue } from "@/utils/useUsdValue";
import { formatUSD } from "@/utils/intl";

Expand All @@ -26,12 +26,17 @@ export const AssetChainInput = ({
handleChangeChain,
}: AssetChainInputProps) => {
const theme = useTheme();
const [{ data: assets }] = useAtom(skipAssets);
const [{ data: assets }] = useAtom(skipAssetsAtom);
const [{ data: chains }] = useAtom(skipChainsAtom)

const selectedAsset = assets?.find(
(asset) => asset.denom === selectedAssetDenom
);

const selectedChain = chains?.find(
(chain) => chain.chainID === selectedAsset?.chainID
);

const usdValue = useUsdValue({ ...selectedAsset, value });

return (
Expand All @@ -50,7 +55,7 @@ export const AssetChainInput = ({
{selectedAsset ? (
<StyledAssetLabel align="center" justify="center" gap={7}>
<img src={selectedAsset?.logoURI} width={23} />
<Text>{selectedAsset?.name}</Text>
<Text>{selectedAsset?.recommendedSymbol}</Text>
</StyledAssetLabel>
) : (
<StyledSelectTokenLabel>
Expand All @@ -73,7 +78,7 @@ export const AssetChainInput = ({
secondary
gap={4}
>
<SmallText>on {selectedAsset?.chainName}</SmallText>
<SmallText>on {selectedChain?.prettyName}</SmallText>
<CogIcon color={theme.primary.text.normal} />
</GhostButton>
) : (
Expand Down
18 changes: 9 additions & 9 deletions packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@ import { WALLET_LIST } from "@/modals/WalletSelectorModal/WalletSelectorFlow";
import { Button } from "@/components/Button";
import { SmallText, Text } from "@/components/Typography";
import { destinationAssetAtom, destinationWalletAtom } from "@/state/swapPage";
import { useAtom } from "jotai";
import { getChain } from "@/state/skipClient";
import { useAtom, useAtomValue } from "jotai";
import { skipChainsAtom } from "@/state/skipClient";

export const ManualAddressModal = createModal((modalProps: ModalProps) => {
const { theme } = modalProps;
const modal = useModal();
const [destinationAsset] = useAtom(destinationAssetAtom);
const [, setDestinationWallet] = useAtom(destinationWalletAtom);
const chain = getChain(destinationAsset?.chainID ?? "");
const chainName = destinationAsset?.chainName;
const chainImage = chain.images?.find((image) => image.svg ?? image.png);
const chainLogo = chainImage?.svg ?? chainImage?.png;
const { data: chains } = useAtomValue(skipChainsAtom);
const chain = chains?.find(c => c.chainID === destinationAsset?.chainID)
const chainName = chain?.prettyName
const chainLogo = chain?.logoURI
const [showManualAddressInput, setShowManualAddressInput] = useState(false);
const [manualWalletAddress, setManualWalletAddress] = useState("");

Expand Down Expand Up @@ -63,7 +63,7 @@ export const ManualAddressModal = createModal((modalProps: ModalProps) => {
{showManualAddressInput ? (
<StyledContainer gap={15}>
<RenderWalletListHeader
title={`Enter a ${chainName} wallet address`}
title={`Enter a ${chainName} address`}
onClickBackButton={() => setShowManualAddressInput(false)}
rightContent={() => (
<StyledChainLogoContainerRow align="center" justify="center">
Expand Down Expand Up @@ -155,8 +155,8 @@ const StyledAddressValidatorDot = styled.div<{ validAddress?: boolean }>`
validAddress === true
? `background-color: ${theme.success.text}`
: validAddress === false
? `background-color: ${theme.error.text}`
: ""};
? `background-color: ${theme.error.text}`
: ""};
top: calc(50% - 11px / 2);
right: 20px;
Expand Down
48 changes: 24 additions & 24 deletions packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { createModal, ModalProps, useModal } from "@/components/Modal";
import { Column } from "@/components/Layout";
import { styled } from "styled-components";
import { useAtom } from "jotai";
import { ChainWithAsset, ClientAsset, skipAssets } from "@/state/skipClient";
import { useAtomValue } from "jotai";
import { ChainWithAsset, ClientAsset, skipAssetsAtom, skipChainsAtom } from "@/state/skipClient";
import { useCallback, useEffect, useMemo, useState } from "react";
import { VirtualList } from "@/components/VirtualList";
import {
isChainWithAsset,
TokenAndChainSelectorModalRowItem,
Skeleton,
isClientAsset,
} from "./TokenAndChainSelectorModalRowItem";
import { TokenAndChainSelectorModalSearchInput } from "./TokenAndChainSelectorModalSearchInput";
import { matchSorter } from "match-sorter";

export type TokenAndChainSelectorModalProps = ModalProps & {
onSelect: (token: ClientAsset | null) => void;
Expand All @@ -22,37 +23,36 @@ export const TokenAndChainSelectorModal = createModal(
(modalProps: TokenAndChainSelectorModalProps) => {
const modal = useModal();
const { onSelect, chainsContainingAsset, asset } = modalProps;
const [{ data: assets, isPending }] = useAtom(skipAssets);
const { data: assets, isLoading: isAssetsLoading } = useAtomValue(skipAssetsAtom);
const { isLoading: isChainsLoading } = useAtomValue(skipChainsAtom)
const isLoading = isAssetsLoading || isChainsLoading

const [showSkeleton, setShowSkeleton] = useState(true);
const [searchQuery, setSearchQuery] = useState<string>("");

const filteredAssets = useMemo(() => {
if (!assets) return;
const filtered = assets.filter((asset) =>
asset.symbol?.toLowerCase().includes(searchQuery.toLowerCase())
);
return filtered;
}, [searchQuery, assets]);
if (!assets) return
return matchSorter(assets, searchQuery, {
keys: ["recommendedSymbol", "symbol", "denom"],
});
}, [assets, searchQuery]);

const filteredChains = useMemo(() => {
if (!chainsContainingAsset) return;
const filtered = chainsContainingAsset.filter(
(chain) =>
chain.chain_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
chain.pretty_name?.toLowerCase().includes(searchQuery.toLowerCase())
);
return filtered;
}, [searchQuery, chainsContainingAsset]);
if (!chainsContainingAsset) return
return matchSorter(chainsContainingAsset, searchQuery, {
keys: ["chainID", "chainName", "prettyName"],
});
}, [chainsContainingAsset, searchQuery]);


useEffect(() => {
if (!isPending && assets) {
if (!isLoading && assets) {
const timer = setTimeout(() => {
setShowSkeleton(false);
}, 100);
return () => clearTimeout(timer);
}
}, [isPending, assets]);
}, [isLoading, assets]);

useEffect(() => {
setSearchQuery("");
Expand Down Expand Up @@ -93,13 +93,13 @@ export const TokenAndChainSelectorModal = createModal(
listItems={filteredChains ?? filteredAssets ?? []}
height={530}
itemHeight={70}
renderItem={renderItem}
itemKey={(item) => {
if (isChainWithAsset(item)) {
return `${item.chain_id}${item.chain_name}`;
if (isClientAsset(item)) {
return `${item.denom}-${item.chainID}-${item.recommendedSymbol}`
}
return `${item.chainID}${item.denom}`;
return `${item.chainID}-${item.asset?.denom}`
}}
renderItem={renderItem}
/>
)}
</StyledContainer>
Expand Down
26 changes: 16 additions & 10 deletions ...ges/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Row } from "@/components/Layout";
import { ModalRowItem } from "@/components/ModalRowItem";
import { SmallText, Text } from "@/components/Typography";
import { ChainWithAsset, ClientAsset } from "@/state/skipClient";
import { ChainWithAsset, ClientAsset, skipChainsAtom } from "@/state/skipClient";
import { CircleSkeletonElement, SkeletonElement } from "@/components/Skeleton";
import { styled } from "styled-components";
import { Chain } from "@chain-registry/types";
import { useAtomValue } from "jotai";
import { Chain } from "@skip-go/client";

export const isClientAsset = (
item: ClientAsset | ChainWithAsset
Expand All @@ -15,7 +16,7 @@ export const isClientAsset = (
export const isChainWithAsset = (
item: ClientAsset | ChainWithAsset
): item is ChainWithAsset => {
return (item as Chain).chain_id !== undefined;
return (item as Chain).chainID !== undefined;
};

export type TokenAndChainSelectorModalRowItemProps = {
Expand All @@ -31,9 +32,12 @@ export const TokenAndChainSelectorModalRowItem = ({
skeleton,
onSelect,
}: TokenAndChainSelectorModalRowItemProps) => {
if (!item) return skeleton;
const { isLoading: isChainsLoading, data: chains } = useAtomValue(skipChainsAtom)

if (!item || isChainsLoading) return skeleton;

if (isClientAsset(item)) {
const chain = chains?.find((chain) => chain.chainID === item.chainID)
return (
<ModalRowItem
key={`${index}${item.denom}`}
Expand All @@ -49,7 +53,7 @@ export const TokenAndChainSelectorModalRowItem = ({
/>
<Text>{item.symbol}</Text>
<SmallText>
{item.chainName ?? item.originChainID ?? item.chainID}
{chain?.prettyName}
</SmallText>
</Row>
}
Expand All @@ -58,21 +62,23 @@ export const TokenAndChainSelectorModalRowItem = ({
}

if (isChainWithAsset(item)) {

const chain = chains?.find((chain) => chain.chainID === item.chainID)
return (
<ModalRowItem
key={item.chain_id}
key={item.chainID}
onClick={() => onSelect(item?.asset || null)}
style={{ margin: "5px 0" }}
leftContent={
<Row align="center" gap={10}>
<StyledAssetImage
height={35}
width={35}
src={item?.images?.[0].svg ?? item?.images?.[0].png}
alt={`${item.chain_id} logo`}
src={item?.logoURI}
alt={`${item.chainID} logo`}
/>
<Text>{item.pretty_name}</Text>
<SmallText>{item.chain_name}</SmallText>
<Text>{chain?.prettyName}</Text>
<SmallText>{item.chainID}</SmallText>
</Row>
}
/>
Expand Down
29 changes: 13 additions & 16 deletions packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModalItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { RouteResponse } from "@skip-go/client";
import { SmallText } from "@/components/Typography";
import { useAtom } from "jotai";
import { skipAssets, getChain, ClientAsset } from "@/state/skipClient";
import { skipAssetsAtom, ClientAsset, skipChainsAtom } from "@/state/skipClient";
import { Column, Row } from "@/components/Layout";
import styled, { useTheme } from "styled-components";
import { getFormattedAssetAmount } from "@/utils/crypto";
Expand Down Expand Up @@ -56,25 +56,22 @@ export const TransactionHistoryModalItem = ({
timestamp,
status,
} = txHistoryItem;
const [{ data: assets }] = useAtom(skipAssets);
const sourceChain = getChain(sourceAssetChainID ?? "");
const sourceChainImage = sourceChain.images?.find(
(image) => image.svg ?? image.png
);
const [{ data: assets }] = useAtom(skipAssetsAtom);
const [{ data: chains }] = useAtom(skipChainsAtom)
const sourceChain = chains?.find(c => c.chainID === sourceAssetChainID)
const sourceChainImage = sourceChain?.logoURI
const source = {
amount: amountIn,
asset: assets?.find((asset) => asset.denom === sourceAssetDenom),
chainImage: sourceChainImage?.svg ?? sourceChainImage?.png ?? "",
chainImage: sourceChainImage ?? "",
};

const destinationChain = getChain(destAssetChainID ?? "");
const destinationChainImage = destinationChain.images?.find(
(image) => image.svg ?? image.png
);
const destinationChain = chains?.find(c => c.chainID === destAssetChainID)
const destinationChainImage = destinationChain?.logoURI
const destination = {
amount: amountOut,
asset: assets?.find((asset) => asset.denom === destAssetDenom),
chainImage: destinationChainImage?.svg ?? destinationChainImage?.png ?? "",
chainImage: destinationChainImage ?? "",
};

const renderStatus = useMemo(() => {
Expand Down Expand Up @@ -119,7 +116,7 @@ export const TransactionHistoryModalItem = ({
<HistoryArrowIcon color={theme.primary.text.lowContrast} />
<RenderAssetAmount {...destination} />
<SmallText normalTextColor>
on {destinationChain?.pretty_name ?? destinationChain?.chain_name}
on {destinationChain?.prettyName ?? destinationChain?.chainName}
</SmallText>
</Row>
<Row align="center" gap={10}>
Expand All @@ -130,9 +127,9 @@ export const TransactionHistoryModalItem = ({
{showDetails && (
<TransactionHistoryModalItemDetails
status={status}
sourceChainName={sourceChain?.pretty_name ?? sourceChain?.chain_name}
sourceChainName={sourceChain?.prettyName ?? sourceChain?.chainName ?? "--"}
destinationChainName={
destinationChain?.pretty_name ?? destinationChain?.chain_name
destinationChain?.prettyName ?? destinationChain?.chainName ?? "--"
}
absoluteTimeString={absoluteTimeString}
relativeTimeString={relativeTime}
Expand All @@ -144,7 +141,7 @@ export const TransactionHistoryModalItem = ({
);
};

const StyledHistoryContainer = styled(Column)<{ showDetails?: boolean }>`
const StyledHistoryContainer = styled(Column) <{ showDetails?: boolean }>`
background-color: ${({ theme, showDetails }) =>
showDetails && theme.secondary.background.normal};
&:hover {
Expand Down
Loading

0 comments on commit 8beda36

Please sign in to comment.