Skip to content

Commit

Permalink
Brands icons and stk template (#37)
Browse files Browse the repository at this point in the history
* feat: added brands logic

* feat: added brand icons for lido and etherfi

* feat: added stk logic

* fix: added usds asset
  • Loading branch information
Argeare5 authored Oct 1, 2024
1 parent 04db6fb commit e92a81c
Show file tree
Hide file tree
Showing 73 changed files with 717 additions and 288 deletions.
12 changes: 12 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,18 @@ Package with some of web3 assets, chains and web3 wallets icons for easy use in
"identityFlag": "isMetaMask"
}
```
### Adding new brand icon
1. Add new `svg` icon files to `src/assets` folder
2. Naming convention is `[brandName.toLowerCase()].svg`
3. Prepare a metadata file in `src/assets` folder with the same name as the icon file, but with `.json` extension:

```json
{
"type": ["brand"],
"brandName": "Lido",
"addressAliases": ["0x4e033931ad43597d96D6bcc25c280717730B58B1"]
}
```
### Adding new combine asset and chain icon
1. Add new `svg` icon files to `src/assets` folder
2. Naming convention is `[symbol]_mono.svg` and `[symbol]_full.svg`
Expand Down
91 changes: 32 additions & 59 deletions apps/docs/src/app/icons/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import Fuse from "fuse.js";
import React, { useMemo } from "react";

import { AssetIconCard } from "@/components/AssetIconCard";
import { BrandIconCard } from "@/components/BrandIconCard";
import { Branding } from "@/components/Branding";
import { ChainIconCard } from "@/components/ChainIconCard";
import { Search } from "@/components/Search";
import { WalletIconCard } from "@/components/WalletIconCard";

import icons from "../../../../../icons/icons.json";
import { IconInfo, IconType } from "../../../../../src/scripts/types";
import {
IconFormat,
IconInfo,
IconType,
} from "../../../../../src/scripts/types";

async function IconsPage({
searchParams,
Expand All @@ -23,7 +28,7 @@ async function IconsPage({
const filteredIcons = useMemo(
() =>
new Fuse(icons as IconInfo[], {
keys: ["chainId", "symbol", "identityFlag", "walletName"],
keys: ["chainId", "symbol", "identityFlag", "walletName", "brandName"],
threshold: 0.3,
distance: 1000,
})
Expand All @@ -42,16 +47,16 @@ async function IconsPage({
.map((item) => {
const asset = item;
if (asset.type.includes(IconType.asset)) {
if (asset.icons.aToken && !asset.icons.stataToken) {
return (
<React.Fragment key={asset?.symbol ?? asset?.chainId}>
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
/>
return (
<React.Fragment key={asset?.symbol ?? asset?.chainId}>
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
/>
{asset.icons[IconFormat.aToken] && (
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
Expand All @@ -60,18 +65,8 @@ async function IconsPage({
icons={asset.icons}
assetTag={AssetTag.AToken}
/>
</React.Fragment>
);
} else if (!asset.icons.aToken && asset.icons.stataToken) {
return (
<React.Fragment key={asset?.symbol ?? asset?.chainId}>
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
/>
)}
{asset.icons[IconFormat.stataToken] && (
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
Expand All @@ -80,48 +75,19 @@ async function IconsPage({
icons={asset.icons}
assetTag={AssetTag.StataToken}
/>
</React.Fragment>
);
} else if (asset.icons.aToken && asset.icons.stataToken) {
return (
<React.Fragment key={asset?.symbol ?? asset?.chainId}>
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
/>
)}
{asset.icons[IconFormat.stkToken] && (
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
assetTag={AssetTag.AToken}
/>
<AssetIconCard
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
assetTag={AssetTag.StataToken}
assetTag={AssetTag.STKToken}
/>
</React.Fragment>
);
} else {
return (
<AssetIconCard
key={asset?.symbol ?? asset?.chainId}
name={asset.name ?? ""}
symbol={asset?.symbol ?? ""}
chainId={asset.chainId}
chainName={asset.chainName}
icons={asset.icons}
/>
);
}
)}
</React.Fragment>
);
} else if (asset.type.includes(IconType.chain)) {
return (
<ChainIconCard
Expand All @@ -138,6 +104,13 @@ async function IconsPage({
name={asset?.walletName ?? "Unknown"}
/>
);
} else if (asset.type.includes(IconType.brand)) {
return (
<BrandIconCard
icons={asset.icons}
name={asset?.brandName ?? "Unknown"}
/>
);
}
})}
{!filteredIcons.length && searchString !== "" && (
Expand Down
33 changes: 33 additions & 0 deletions apps/docs/src/components/BrandIconCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
"use client";

import { githubIconsPath } from "@bgd-labs/react-web3-icons/dist/constants";
import {
IconInfoIcons,
IconVariant,
} from "@bgd-labs/react-web3-icons/dist/utils";
import { useState } from "react";

import { IconCard } from "@/components/IconCard";
import { BrandIcon } from "@/components/Web3Icons/BrandIcon";

export const BrandIconCard = ({
name,
icons,
}: {
name: string;
icons: IconInfoIcons;
}) => {
const [variant, setVariant] = useState(IconVariant.Full);
return (
<IconCard
svgPath={`${githubIconsPath}/${icons[variant]}`}
name={name}
subName={""}
fileName={name}
setActiveType={setVariant}
activeType={variant}
>
<BrandIcon addressOrName={name} mono={variant === IconVariant.Mono} />
</IconCard>
);
};
34 changes: 34 additions & 0 deletions apps/docs/src/components/Web3Icons/BrandIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
"use client";

import { BrandIcon as BI } from "@bgd-labs/react-web3-icons";
import { ExternalComponentBaseProps } from "@bgd-labs/react-web3-icons/dist/utils/index";

import { cn } from "@/utils/cn";

interface BrandIconProps extends ExternalComponentBaseProps {
addressOrName: string;
}
/**
* Renders a wallet icon specified by walletName.
*/
export const BrandIcon = ({
addressOrName,
className,
...props
}: BrandIconProps) => {
return (
<BI
addressOrName={addressOrName}
className={cn("size-[70px]", className)}
loader={
<div
className={cn(
"size-[70px] animate-pulse rounded-full bg-brand-300",
className,
)}
/>
}
{...props}
/>
);
};
2 changes: 1 addition & 1 deletion icons/full/aldo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions icons/full/ausds.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions icons/full/etherfi.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion icons/full/ldo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions icons/full/lido.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e92a81c

Please sign in to comment.