From d3dff5f0a905e8b698ef77946c4cd69fc9284dc1 Mon Sep 17 00:00:00 2001 From: Pierre Bertet Date: Fri, 26 Apr 2024 10:58:24 +0100 Subject: [PATCH] TokenIcon + TokenIcon.Group --- .../src/TokenIcon/1. Single.fixture.tsx | 7 ++ .../src/TokenIcon/2. Group.fixture.tsx | 7 ++ .../uikit-gallery/src/TokenIcon/shared.tsx | 54 +++++++++++++++ frontend/uikit/src/TokenIcon/TokenIcon.tsx | 65 +++++++++++++++++++ frontend/uikit/src/TokenIcon/icons/BOLD.svg | 1 + frontend/uikit/src/TokenIcon/icons/ETH.svg | 1 + frontend/uikit/src/TokenIcon/icons/OSETH.svg | 1 + frontend/uikit/src/TokenIcon/icons/RETH.svg | 1 + frontend/uikit/src/TokenIcon/icons/SWETH.svg | 1 + frontend/uikit/src/TokenIcon/icons/WSTETH.svg | 1 + frontend/uikit/src/index.ts | 1 + 11 files changed, 140 insertions(+) create mode 100644 frontend/uikit-gallery/src/TokenIcon/1. Single.fixture.tsx create mode 100644 frontend/uikit-gallery/src/TokenIcon/2. Group.fixture.tsx create mode 100644 frontend/uikit-gallery/src/TokenIcon/shared.tsx create mode 100644 frontend/uikit/src/TokenIcon/TokenIcon.tsx create mode 100644 frontend/uikit/src/TokenIcon/icons/BOLD.svg create mode 100644 frontend/uikit/src/TokenIcon/icons/ETH.svg create mode 100644 frontend/uikit/src/TokenIcon/icons/OSETH.svg create mode 100644 frontend/uikit/src/TokenIcon/icons/RETH.svg create mode 100644 frontend/uikit/src/TokenIcon/icons/SWETH.svg create mode 100644 frontend/uikit/src/TokenIcon/icons/WSTETH.svg diff --git a/frontend/uikit-gallery/src/TokenIcon/1. Single.fixture.tsx b/frontend/uikit-gallery/src/TokenIcon/1. Single.fixture.tsx new file mode 100644 index 00000000..9d19ea52 --- /dev/null +++ b/frontend/uikit-gallery/src/TokenIcon/1. Single.fixture.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { TokenIconFixture } from "./shared"; + +export default function Fixture() { + return ; +} diff --git a/frontend/uikit-gallery/src/TokenIcon/2. Group.fixture.tsx b/frontend/uikit-gallery/src/TokenIcon/2. Group.fixture.tsx new file mode 100644 index 00000000..8f7c0e2e --- /dev/null +++ b/frontend/uikit-gallery/src/TokenIcon/2. Group.fixture.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { TokenIconFixture } from "./shared"; + +export default function Fixture() { + return ; +} diff --git a/frontend/uikit-gallery/src/TokenIcon/shared.tsx b/frontend/uikit-gallery/src/TokenIcon/shared.tsx new file mode 100644 index 00000000..6f493164 --- /dev/null +++ b/frontend/uikit-gallery/src/TokenIcon/shared.tsx @@ -0,0 +1,54 @@ +"use client"; + +import { TokenIcon } from "@liquity2/uikit"; +import { useFixtureSelect } from "react-cosmos/client"; + +const options = [ + "BOLD" as const, + "ETH" as const, + "OSETH" as const, + "RETH" as const, + "SWETH" as const, + "WSTETH" as const, +]; + +const emptyOption = "−"; + +function isNotEmptyOption( + value: (typeof options)[number] | typeof emptyOption, +): value is Exclude { + return value !== emptyOption; +} + +export function TokenIconFixture({ + defaultMode, +}: { + defaultMode: "single" | "group"; +}) { + const symbols = options.map((name, index) => { + return useFixtureSelect(`token ${index + 1}`, { + options: [emptyOption, ...options], + defaultValue: defaultMode === "single" && index > 0 ? emptyOption : name, + })[0]; + }); + + const validSymbols = symbols.filter(isNotEmptyOption); + + return ( +
+ + {validSymbols.map((symbol, index) => ( + + ))} + +
+ ); +} diff --git a/frontend/uikit/src/TokenIcon/TokenIcon.tsx b/frontend/uikit/src/TokenIcon/TokenIcon.tsx new file mode 100644 index 00000000..64f5d7c9 --- /dev/null +++ b/frontend/uikit/src/TokenIcon/TokenIcon.tsx @@ -0,0 +1,65 @@ +import type { ComponentProps, ReactElement, ReactNode } from "react"; + +import { Children } from "react"; +import { css } from "../../styled-system/css"; +import tokenBold from "./icons/BOLD.svg"; +import tokenEth from "./icons/ETH.svg"; +import tokenOseth from "./icons/OSETH.svg"; +import tokenReth from "./icons/RETH.svg"; +import tokenSweth from "./icons/SWETH.svg"; +import tokenWsteth from "./icons/WSTETH.svg"; + +export type IconName = "BOLD" | "ETH" | "OSETH" | "RETH" | "SWETH" | "WSTETH"; + +function srcFromName(name: IconName) { + if (name === "BOLD") return tokenBold; + if (name === "ETH") return tokenEth; + if (name === "OSETH") return tokenOseth; + if (name === "RETH") return tokenReth; + if (name === "SWETH") return tokenSweth; + if (name === "WSTETH") return tokenWsteth; + throw new Error(`Unsupported token icon: ${name}`); +} + +export function TokenIcon({ symbol }: { symbol: IconName }) { + return ( + {symbol} + ); +} + +TokenIcon.Group = function TokenIconGroup< + C extends ReactElement>, +>({ + children, +}: { + children: C | C[]; +}) { + return ( +
+ {Children.map(children, (child) => ( +
+ {child} +
+ ))} +
+ ); +}; diff --git a/frontend/uikit/src/TokenIcon/icons/BOLD.svg b/frontend/uikit/src/TokenIcon/icons/BOLD.svg new file mode 100644 index 00000000..73546759 --- /dev/null +++ b/frontend/uikit/src/TokenIcon/icons/BOLD.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/uikit/src/TokenIcon/icons/ETH.svg b/frontend/uikit/src/TokenIcon/icons/ETH.svg new file mode 100644 index 00000000..b1b82c71 --- /dev/null +++ b/frontend/uikit/src/TokenIcon/icons/ETH.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/uikit/src/TokenIcon/icons/OSETH.svg b/frontend/uikit/src/TokenIcon/icons/OSETH.svg new file mode 100644 index 00000000..031c8cae --- /dev/null +++ b/frontend/uikit/src/TokenIcon/icons/OSETH.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/uikit/src/TokenIcon/icons/RETH.svg b/frontend/uikit/src/TokenIcon/icons/RETH.svg new file mode 100644 index 00000000..e2cbf12c --- /dev/null +++ b/frontend/uikit/src/TokenIcon/icons/RETH.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/uikit/src/TokenIcon/icons/SWETH.svg b/frontend/uikit/src/TokenIcon/icons/SWETH.svg new file mode 100644 index 00000000..1510ae89 --- /dev/null +++ b/frontend/uikit/src/TokenIcon/icons/SWETH.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/uikit/src/TokenIcon/icons/WSTETH.svg b/frontend/uikit/src/TokenIcon/icons/WSTETH.svg new file mode 100644 index 00000000..f45b0e65 --- /dev/null +++ b/frontend/uikit/src/TokenIcon/icons/WSTETH.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/uikit/src/index.ts b/frontend/uikit/src/index.ts index 8986d914..28b79276 100644 --- a/frontend/uikit/src/index.ts +++ b/frontend/uikit/src/index.ts @@ -10,4 +10,5 @@ export { Root, RootEntryPoint } from "./Root/Root"; export { Tabs } from "./Tabs/Tabs"; export { TextButton } from "./TextButton/TextButton"; export { brand, colors, lightTheme, Theme, themeColor, useTheme } from "./Theme/Theme"; +export { TokenIcon } from "./TokenIcon/TokenIcon"; export { UiKit } from "./UiKit/UiKit";