Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDK] Feature: miscellaneous chain icon changes #5718

Closed
wants to merge 1 commit into from
Closed

[SDK] Feature: miscellaneous chain icon changes #5718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/metal-mails-ring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"thirdweb": patch
---
- Small fix for ChainIcon: Always resolve IPFS URI

- Improve test coverage
248 changes: 151 additions & 97 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@ import {
TextAlignJustifyIcon,
} from "@radix-ui/react-icons";
import { useQuery } from "@tanstack/react-query";
import { type JSX, useCallback, useContext, useEffect, useState } from "react";
import {
type Dispatch,
type JSX,
type SetStateAction,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { trackPayEvent } from "../../../../analytics/track/pay.js";
import type { Chain } from "../../../../chains/types.js";
import type { ThirdwebClient } from "../../../../client/client.js";
Expand Down Expand Up @@ -51,11 +59,7 @@ import type {
ConnectButton_detailsModalOptions,
PayUIOptions,
} from "../../../core/hooks/connection/ConnectButtonProps.js";
import {
useChainFaucets,
useChainIconUrl,
useChainName,
} from "../../../core/hooks/others/useChainQuery.js";
import { useChainFaucets } from "../../../core/hooks/others/useChainQuery.js";
import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
Expand All @@ -70,7 +74,7 @@ import type {
import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
import { useWalletInfo } from "../../../core/utils/wallet.js";
import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
import { ChainIcon } from "../components/ChainIcon.js";
import { ChainActiveDot } from "../components/ChainActiveDot.js";
import { CopyIcon } from "../components/CopyIcon.js";
import { IconContainer } from "../components/IconContainer.js";
import { Modal } from "../components/Modal.js";
Expand All @@ -81,6 +85,7 @@ import { ToolTip } from "../components/Tooltip.js";
import { WalletImage } from "../components/WalletImage.js";
import { Container, Line } from "../components/basic.js";
import { Button, IconButton } from "../components/buttons.js";
import { fallbackChainIcon } from "../components/fallbackChainIcon.js";
import { Link, Text } from "../components/text.js";
import { fadeInAnimation } from "../design-system/animations.js";
import { StyledButton } from "../design-system/elements.js";
Expand All @@ -95,6 +100,9 @@ import {
import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
import { AccountName } from "../prebuilt/Account/name.js";
import { AccountProvider } from "../prebuilt/Account/provider.js";
import { ChainIcon } from "../prebuilt/Chain/icon.js";
import { ChainName } from "../prebuilt/Chain/name.js";
import { ChainProvider } from "../prebuilt/Chain/provider.js";
import type { LocaleId } from "../types.js";
import { MenuButton, MenuLink } from "./MenuButton.js";
import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
Expand Down Expand Up @@ -386,8 +394,6 @@ export function DetailsModal(props: {
const theme = parseTheme(props.theme);

const activeWallet = useActiveWallet();
const chainIconQuery = useChainIconUrl(walletChain);
const chainNameQuery = useChainName(walletChain);
const chainFaucetsQuery = useChainFaucets(walletChain);

const disableSwitchChain = !activeWallet?.switchChain;
Expand Down Expand Up @@ -417,93 +423,6 @@ export function DetailsModal(props: {
}
}, [activeAccount, closeModal]);

const networkSwitcherButton = (
<MenuButton
type="button"
disabled={disableSwitchChain}
onClick={() => {
setScreen("network-switcher");
}}
data-variant="primary"
>
<div
style={{
display: "flex",
alignItems: "center",
position: "relative",
}}
>
{!chainIconQuery.isLoading ? (
<ChainIcon
chainIconUrl={chainIconQuery.url}
size={iconSize.md}
active
client={client}
/>
) : (
<Skeleton height={`${iconSize.md}px`} width={`${iconSize.md}px`} />
)}
</div>

{chainNameQuery.isLoading ? (
<Skeleton height="16px" width="150px" />
) : (
<Text color="primaryText" size="md" multiline>
{chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
<Text color="secondaryText" size="xs">
{props.showBalanceInFiat ? (
<>
<AccountBalance
fallbackComponent={<Skeleton height="1em" width="70px" />}
loadingComponent={<Skeleton height="1em" width="70px" />}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
formatFn={(props: AccountBalanceInfo) =>
formatAccountTokenBalance({ ...props, decimals: 7 })
}
/>{" "}
<AccountBalance
loadingComponent={<Skeleton height="1em" width="30px" />}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
formatFn={(props: AccountBalanceInfo) =>
` (${formatAccountFiatBalance({ ...props, decimals: 3 })})`
}
showBalanceInFiat="USD"
/>
</>
) : (
<AccountBalance
fallbackComponent={<Skeleton height="1em" width="100px" />}
loadingComponent={<Skeleton height="1em" width="100px" />}
formatFn={(props: AccountBalanceInfo) =>
formatAccountTokenBalance({ ...props, decimals: 7 })
}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
/>
)}
</Text>
</Text>
)}

<StyledChevronRightIcon
width={iconSize.sm}
height={iconSize.sm}
style={{
flexShrink: 0,
marginLeft: "auto",
}}
/>
</MenuButton>
);

const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
props.detailsModal || {};

Expand Down Expand Up @@ -749,7 +668,13 @@ export function DetailsModal(props: {
}}
>
{/* Network Switcher */}
{networkSwitcherButton}
<NetworkSwitcherButton
client={props.client}
setScreen={() => setScreen("network-switcher")}
disableSwitchChain={disableSwitchChain}
showBalanceInFiat={props.detailsModal?.showBalanceInFiat}
displayBalanceToken={props.displayBalanceToken}
/>

{/* Transactions */}
<MenuButton
Expand Down Expand Up @@ -1099,6 +1024,135 @@ export function DetailsModal(props: {
);
}

/**
* When this button is clicked, it will switch to the screen where users
* can select a chain to switch to.
* @internal
*/
function NetworkSwitcherButton(props: {
setScreen: Dispatch<SetStateAction<"network-switcher">>;
disableSwitchChain: boolean;
displayBalanceToken: Record<number, string> | undefined;
client: ThirdwebClient;
showBalanceInFiat?: SupportedFiatCurrency;
}) {
const { disableSwitchChain, setScreen, showBalanceInFiat, client } = props;
const walletChain = useActiveWalletChain();
if (!walletChain) {
return null;
}
return (
<MenuButton
type="button"
disabled={disableSwitchChain}
onClick={() => {
setScreen("network-switcher");
}}
data-variant="primary"
>
<ChainProvider chain={walletChain}>
<div
style={{
display: "flex",
alignItems: "center",
position: "relative",
}}
>
<Container
style={{
position: "relative",
display: "flex",
flexShrink: 0,
alignItems: "center",
}}
>
<ChainIcon
client={client}
loadingComponent={
<Skeleton
height={`${iconSize.md}px`}
width={`${iconSize.md}px`}
/>
}
fallbackComponent={
<img
src={fallbackChainIcon}
alt=""
style={{
width: `${iconSize.md}px`,
height: `${iconSize.md}px`,
}}
/>
}
style={{
width: `${iconSize.md}px`,
height: `${iconSize.md}px`,
}}
/>
<ChainActiveDot />
</Container>
</div>

<Text color="primaryText" size="md" multiline>
<ChainName
loadingComponent={<Skeleton height="16px" width="150px" />}
fallbackComponent={<span>Unknown chain #{walletChain?.id}</span>}
/>
<Text color="secondaryText" size="xs">
{showBalanceInFiat ? (
<>
<AccountBalance
fallbackComponent={<Skeleton height="1em" width="70px" />}
loadingComponent={<Skeleton height="1em" width="70px" />}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
formatFn={(props: AccountBalanceInfo) =>
formatAccountTokenBalance({ ...props, decimals: 7 })
}
/>{" "}
<AccountBalance
loadingComponent={<Skeleton height="1em" width="30px" />}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
formatFn={(props: AccountBalanceInfo) =>
` (${formatAccountFiatBalance({ ...props, decimals: 3 })})`
}
showBalanceInFiat="USD"
/>
</>
) : (
<AccountBalance
fallbackComponent={<Skeleton height="1em" width="100px" />}
loadingComponent={<Skeleton height="1em" width="100px" />}
formatFn={(props: AccountBalanceInfo) =>
formatAccountTokenBalance({ ...props, decimals: 7 })
}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
/>
)}
</Text>
</Text>
</ChainProvider>

<StyledChevronRightIcon
width={iconSize.sm}
height={iconSize.sm}
style={{
flexShrink: 0,
marginLeft: "auto",
}}
/>
</MenuButton>
);
}

const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
const theme = useCustomTheme();
return {
Expand Down
Loading
Loading