wip

Author: yyyyaaa

packages/react/showroom/ChainListItem.show.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import type { Story } from "@ladle/react";
+import Box from "../src/ui/box";
+import ChainListItem from "../src/ui/chain-list-item";
+import { ChainListItemProps } from "../src/ui/chain-list-item/chain-list-item.types";
+
+// @ts-ignore
+import ATOM_ICON from "../static/networks/Cosmos.png";
+
+const chainItem: Pick<
+  ChainListItemProps,
+  "iconUrl" | "name" | "tokenName" | "amount" | "notionalValue"
+> = {
+  iconUrl: ATOM_ICON,
+  name: "Cosmos",
+  tokenName: "ATOM",
+  amount: "0.00000000022",
+};
+
+export const DefaultChainListItem: Story<{
+  width: number;
+  size: ChainListItemProps["size"];
+}> = (props) => (
+  <Box>
+    <Box
+      backgroundColor="$background"
+      boxShadow="$sm"
+      p="$4"
+      borderRadius="$lg"
+      width={`${props.width}px`}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+      gap="$4"
+    >
+      <ChainListItem
+        size={props.size}
+        _css={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+        {...chainItem}
+      />
+
+      <ChainListItem
+        size={props.size}
+        isDisabled
+        _css={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+        {...chainItem}
+      />
+
+      <ChainListItem
+        size={props.size}
+        isSelected
+        _css={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+        {...chainItem}
+      />
+
+      <ChainListItem
+        size={props.size}
+        isActive
+        _css={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+        {...chainItem}
+      />
+    </Box>
+  </Box>
+);
+
+DefaultChainListItem.meta = {
+  component: "ListItem",
+};
+
+DefaultChainListItem.args = {
+  size: "sm",
+};
+
+DefaultChainListItem.argTypes = {
+  width: {
+    control: { type: "number" },
+    defaultValue: 200,
+  },
+  size: {
+    options: ["sm", "md"] satisfies ChainListItemProps["size"][],
+    control: { type: "select" },
+    defaultValue: "md",
+  },
+};

packages/react/showroom/ListItem.show.tsx

@@ -2,11 +2,15 @@ import * as React from "react";
 import type { Story } from "@ladle/react";
 import Box from "../src/ui/box";
 import ListItem from "../src/ui/list-item";
-import { ListItemSize } from "../src/ui/list-item/list-item.types";
+import {
+  ListItemSize,
+  ListItemShape,
+} from "../src/ui/list-item/list-item.types";
 
 export const DefaultListItem: Story<{
   width: number;
   size: ListItemSize;
+  shape: ListItemShape;
 }> = (props) => (
   <Box>
     <Box
@@ -85,6 +89,7 @@ DefaultListItem.meta = {
 
 DefaultListItem.args = {
   size: "sm",
+  shape: "default",
 };
 
 DefaultListItem.argTypes = {
@@ -97,4 +102,9 @@ DefaultListItem.argTypes = {
     control: { type: "select" },
     defaultValue: "md",
   },
+  shape: {
+    options: ["default", "rounded"] satisfies ListItemShape[],
+    control: { type: "select" },
+    defaultValue: "default",
+  },
 };

packages/react/showroom/WalletConnector.show.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import type { Story } from "@ladle/react";
+import Box from "../src/ui/box";
+import WalletConnectorInfo from "../src/ui/wallet-connector/wallet-connector-info";
+import WalletConnectorFrame from "../src/ui/wallet-connector/wallet-connector-frame";
+import WalletConnectorHead from "../src/ui/wallet-connector/wallet-connector-head";
+import WalletConnectorStatus from "../src/ui/wallet-connector/wallet-connector-status";
+
+// @ts-ignore
+import KEPLR_ICON from "../static/keplr.png";
+
+export const WalletConnectorInfoDefault: Story<{
+  address: string;
+}> = () => (
+  <Box>
+    <WalletConnectorInfo
+      iconSrc={KEPLR_ICON}
+      address="cosmos1veawurwraxw4kq30ygdpjn85jjxv67x3remaxu"
+    />
+  </Box>
+);
+
+WalletConnectorInfoDefault.storyName = "WalletConnectorInfo";
+
+type WalletConnectorStatusProps = React.ComponentProps<
+  typeof WalletConnectorStatus
+>;
+
+export const WalletConnectorStatusDefault: Story<{
+  status: WalletConnectorStatusProps["status"];
+  wallet: WalletConnectorStatusProps["wallet"];
+}> = (props) => (
+  <Box>
+    <WalletConnectorFrame>
+      <WalletConnectorHead
+        hasBackButton={true}
+        hasCloseButton={true}
+        title="Keplr"
+      />
+
+      <WalletConnectorStatus
+        status={props.status}
+        wallet={{
+          name: "Keplr",
+          prettyName: "Keplr",
+          logo: KEPLR_ICON,
+          subLogo: KEPLR_ICON,
+          btmLogo: KEPLR_ICON,
+          mobileDisabled: false,
+          downloadUrl:
+            "https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap",
+          rejectMessage: "Please install Keplr extension to connect",
+          originalWallet: {},
+          badge: "Keplr",
+          shape: "square",
+        }}
+        state={{
+          Connecting: {
+            title: "Requesting connection",
+            description: "Open the Keplr extension to connect",
+          },
+          NotExist: {
+            title: "Keplr not installed",
+            description:
+              "Please install the Keplr wallet first and refresh the page to connect your wallet.",
+            installButtonLabel: "Install Keplr",
+            popoverAction: {
+              type: "reload",
+              label: "Try Again",
+              onClick: () => {
+                console.log("Reload");
+              },
+            },
+          },
+        }}
+      />
+    </WalletConnectorFrame>
+  </Box>
+);
+
+WalletConnectorStatusDefault.storyName = "WalletConnectorStatus";
+
+WalletConnectorStatusDefault.args = {
+  status: "Connecting",
+};
+
+WalletConnectorStatusDefault.argTypes = {
+  status: {
+    control: {
+      type: "select",
+    },
+    options: [
+      "Connecting",
+      "NotExist",
+      "Connected",
+      "Disconnected",
+      "Error",
+      "Rejected",
+    ] as WalletConnectorStatusProps["status"][],
+    defaultValue: "Connecting",
+  },
+};