TokenIcon + TokenIcon.Group

frontend/uikit-gallery/src/TokenIcon/1. Single.fixture.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { TokenIconFixture } from "./shared";
+
+export default function Fixture() {
+ return <TokenIconFixture defaultMode="single" />;
+}

frontend/uikit-gallery/src/TokenIcon/2. Group.fixture.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { TokenIconFixture } from "./shared";
+
+export default function Fixture() {
+ return <TokenIconFixture defaultMode="group" />;
+}

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<typeof value, typeof emptyOption> {
+ 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 (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ }}
+ >
+ <TokenIcon.Group>
+ {validSymbols.map((symbol, index) => (
+ <TokenIcon
+ key={symbol + index}
+ symbol={symbol}
+ />
+ ))}
+ </TokenIcon.Group>
+ </div>
+ );
+}

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 (
+ <img
+ title={symbol}
+ alt={symbol}
+ height={24}
+ src={srcFromName(symbol)}
+ width={24}
+ />
+ );
+}
+
+TokenIcon.Group = function TokenIconGroup<
+ C extends ReactElement<ComponentProps<typeof TokenIcon>>,
+>({
+ children,
+}: {
+ children: C | C[];
+}) {
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ gap: -8,
+ }}
+ >
+ {Children.map(children, (child) => (
+ <div
+ className={css({
+ marginLeft: -4,
+ _firstOfType: {
+ marginLeft: 0,
+ },
+ })}
+ >
+ {child}
+ </div>
+ ))}
+ </div>
+ );
+};