Skip to content

Commit 28899a4

Browse files
Argeare5Argeare5
authored
fix: update components in package (#43)
* fix: initialize package components refactoring * fix: combine StaticIcon and DynamicIcon to one Web3Icon * fix: mono props for web3icon * fix: update address book * fix: update pnpm lock
1 parent 50274f7 commit 28899a4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+515
-663
lines changed

‎apps/docs/src/app/icons/page.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { AssetTag } from "@bgd-labs/react-web3-icons/dist/utils/index";
21
import Fuse from "fuse.js";
32
import React, { useMemo } from "react";
43

@@ -63,7 +62,7 @@ async function IconsPage({
6362
chainId={asset.chainId}
6463
chainName={asset.chainName}
6564
icons={asset.icons}
66-
assetTag={AssetTag.AToken}
65+
assetTag="a"
6766
/>
6867
)}
6968
{asset.icons[IconFormat.stataToken] && (
@@ -73,7 +72,7 @@ async function IconsPage({
7372
chainId={asset.chainId}
7473
chainName={asset.chainName}
7574
icons={asset.icons}
76-
assetTag={AssetTag.StataToken}
75+
assetTag="stata"
7776
/>
7877
)}
7978
{asset.icons[IconFormat.stkToken] && (
@@ -83,7 +82,7 @@ async function IconsPage({
8382
chainId={asset.chainId}
8483
chainName={asset.chainName}
8584
icons={asset.icons}
86-
assetTag={AssetTag.STKToken}
85+
assetTag="stk"
8786
/>
8887
)}
8988
</React.Fragment>

‎apps/docs/src/components/AssetIconCard.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use client";
22

3+
import { Web3Icon } from "@bgd-labs/react-web3-icons";
34
import { githubIconsPath } from "@bgd-labs/react-web3-icons/dist/constants";
4-
import { AssetTag, IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
5+
import { IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
56
import { useState } from "react";
67

7-
import { IconCard } from "@/components/IconCard";
8-
import { AssetIcon } from "@/components/Web3Icons/AssetIcon";
8+
import { IconCard, IconLoader } from "@/components/IconCard";
99

1010
import { IconInfoIcons } from "../../../../src/scripts/types";
1111

@@ -22,18 +22,20 @@ export const AssetIconCard = ({
2222
icons: IconInfoIcons;
2323
chainId?: number;
2424
chainName?: string;
25-
assetTag?: AssetTag;
25+
assetTag?: "a" | "stata" | "stk";
2626
}) => {
2727
const [variant, setVariant] = useState(IconVariant.Full);
2828
const iconPath = assetTag
2929
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3030
// @ts-ignore
3131
icons[
32-
assetTag === AssetTag.AToken
32+
assetTag === "a"
3333
? "aToken"
34-
: assetTag === AssetTag.StataToken
34+
: assetTag === "stata"
3535
? "stataToken"
36-
: "aToken"
36+
: assetTag === "stk"
37+
? "stkToken"
38+
: "aToken"
3739
][variant]
3840
: icons[variant];
3941

@@ -52,10 +54,12 @@ export const AssetIconCard = ({
5254
setActiveType={setVariant}
5355
activeType={variant}
5456
>
55-
<AssetIcon
57+
<Web3Icon
58+
className="size-[70px]"
5659
symbol={symbol}
5760
assetTag={assetTag}
5861
mono={variant === IconVariant.Mono}
62+
loader={<IconLoader />}
5963
/>
6064
</IconCard>
6165
);

‎apps/docs/src/components/BrandIconCard.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
"use client";
22

3+
import { Web3Icon } from "@bgd-labs/react-web3-icons";
34
import { githubIconsPath } from "@bgd-labs/react-web3-icons/dist/constants";
4-
import {
5-
IconInfoIcons,
6-
IconVariant,
7-
} from "@bgd-labs/react-web3-icons/dist/utils";
5+
import { brandsIconsPack } from "@bgd-labs/react-web3-icons/dist/iconsPacks/brandsIconsPack";
6+
import { IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
87
import { useState } from "react";
98

10-
import { IconCard } from "@/components/IconCard";
11-
import { BrandIcon } from "@/components/Web3Icons/BrandIcon";
9+
import { IconCard, IconLoader } from "@/components/IconCard";
10+
11+
import { IconInfoIcons } from "../../../../src/scripts/types";
1212

1313
export const BrandIconCard = ({
1414
name,
@@ -27,7 +27,13 @@ export const BrandIconCard = ({
2727
setActiveType={setVariant}
2828
activeType={variant}
2929
>
30-
<BrandIcon addressOrName={name} mono={variant === IconVariant.Mono} />
30+
<Web3Icon
31+
className="size-[70px]"
32+
brandKey={name}
33+
mono={variant === IconVariant.Mono}
34+
loader={<IconLoader />}
35+
iconsPack={brandsIconsPack}
36+
/>
3137
</IconCard>
3238
);
3339
};

‎apps/docs/src/components/ChainIconCard.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
"use client";
22

3+
import { Web3Icon } from "@bgd-labs/react-web3-icons";
34
import { githubIconsPath } from "@bgd-labs/react-web3-icons/dist/constants";
4-
import {
5-
IconInfoIcons,
6-
IconVariant,
7-
} from "@bgd-labs/react-web3-icons/dist/utils";
5+
import { chainsIconsPack } from "@bgd-labs/react-web3-icons/dist/iconsPacks/chainsIconsPack";
6+
import { IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
87
import { useState } from "react";
98

10-
import { IconCard } from "@/components/IconCard";
11-
import { ChainIcon } from "@/components/Web3Icons/ChainIcon";
9+
import { IconCard, IconLoader } from "@/components/IconCard";
10+
11+
import { IconInfoIcons } from "../../../../src/scripts/types";
1212

1313
export const ChainIconCard = ({
1414
name,
@@ -29,7 +29,13 @@ export const ChainIconCard = ({
2929
setActiveType={setVariant}
3030
activeType={variant}
3131
>
32-
<ChainIcon chainId={chainId} mono={variant === IconVariant.Mono} />
32+
<Web3Icon
33+
className="size-[70px]"
34+
chainId={chainId}
35+
mono={variant === IconVariant.Mono}
36+
loader={<IconLoader />}
37+
iconsPack={chainsIconsPack}
38+
/>
3339
</IconCard>
3440
);
3541
};

‎apps/docs/src/components/IconCard.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
11
"use client";
22

33
import { IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
4-
import { ReactNode } from "react";
4+
import { ComponentProps, ReactNode } from "react";
55

66
import { Box } from "@/components/Box";
77
import { CopyToClipboard } from "@/components/CopyToClipboard";
88
import { DownloadButton } from "@/components/DownloadButton";
99
import { cn } from "@/utils/cn";
1010

11+
export const IconLoader = ({
12+
className,
13+
}: Pick<ComponentProps<"img">, "className">) => {
14+
return (
15+
<div
16+
className={cn(
17+
"size-[70px] animate-pulse rounded-full bg-brand-300",
18+
className,
19+
)}
20+
/>
21+
);
22+
};
23+
1124
export const IconCard = ({
1225
children,
1326
name,

‎apps/docs/src/components/InstalledWalletIcon.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
"use client";
22

3+
import { Web3Icon } from "@bgd-labs/react-web3-icons";
34
import { getWeb3WalletName } from "@bgd-labs/react-web3-icons/dist/utils";
45
import dynamic from "next/dynamic";
56

6-
import { WalletIcon } from "@/components/Web3Icons/WalletIcon";
7+
import { IconLoader } from "@/components/IconCard";
78

89
const InstalledBrowserWalletWallet = () => {
910
const walletName = getWeb3WalletName();
1011
return (
1112
<div>
1213
{walletName}
13-
<WalletIcon walletName={walletName} />
14+
<Web3Icon
15+
className="size-[70px]"
16+
walletKey={walletName}
17+
loader={<IconLoader />}
18+
/>
1419
</div>
1520
);
1621
};

‎apps/docs/src/components/WalletIconCard.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
"use client";
22

3+
import { Web3Icon } from "@bgd-labs/react-web3-icons";
34
import { githubIconsPath } from "@bgd-labs/react-web3-icons/dist/constants";
4-
import {
5-
IconInfoIcons,
6-
IconVariant,
7-
} from "@bgd-labs/react-web3-icons/dist/utils";
5+
import { IconVariant } from "@bgd-labs/react-web3-icons/dist/utils";
86
import { useState } from "react";
97

10-
import { IconCard } from "@/components/IconCard";
11-
import { WalletIcon } from "@/components/Web3Icons/WalletIcon";
8+
import { IconCard, IconLoader } from "@/components/IconCard";
9+
10+
import { IconInfoIcons } from "../../../../src/scripts/types";
1211

1312
export const WalletIconCard = ({
1413
name,
@@ -27,7 +26,12 @@ export const WalletIconCard = ({
2726
setActiveType={setVariant}
2827
activeType={variant}
2928
>
30-
<WalletIcon walletName={name} mono={variant === IconVariant.Mono} />
29+
<Web3Icon
30+
className="size-[70px]"
31+
walletKey={name}
32+
mono={variant === IconVariant.Mono}
33+
loader={<IconLoader />}
34+
/>
3135
</IconCard>
3236
);
3337
};

‎apps/docs/src/components/Web3Icons/AssetIcon.tsx‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎apps/docs/src/components/Web3Icons/BrandIcon.tsx‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎apps/docs/src/components/Web3Icons/ChainIcon.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

0 commit comments

Comments
 (0)