fix: improve asset list components (#129)

* feat: add Skeleton component * fix: incorrect implementation of ShowMore and rename to Reveal * fix: improve
hyperweb-io · Nov 27, 2023 · cacb6b5 · cacb6b5
1 parent cd4f9c4
commit cacb6b5
Show file tree

Hide file tree

Showing 39 changed files with 623 additions and 391 deletions.
diff --git a/packages/react/stories/Reveal.stories.tsx b/packages/react/stories/Reveal.stories.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Reveal from "../src/ui/reveal";
+import Stack from "../src/ui/stack";
+import Skeleton from "../src/ui/skeleton";
+
+const meta: Meta<typeof Reveal> = {
+  component: Reveal,
+  title: "Reveal",
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: (
+      <Stack
+        direction="vertical"
+        space="$5"
+        attributes={{
+          p: "$4",
+          borderRadius: "$md",
+          borderColor: "$divider",
+          borderWidth: "1px",
+          borderStyle: "solid",
+        }}
+      >
+        {Array.from(Array(20).keys()).map((item, i) => (
+          <Skeleton
+            key={`${item}`}
+            borderRadius="$sm"
+            width="$full"
+            height="$10"
+          />
+        ))}
+      </Stack>
+    ),
+    showMoreLabel: "Show more",
+    showLessLabel: "Show less",
+    hideThresholdHeight: 400,
+  },
+};
diff --git a/packages/react/stories/ShowMore.stories.tsx b/packages/react/stories/ShowMore.stories.tsx
diff --git a/packages/react/stories/Skeleton.stories.tsx b/packages/react/stories/Skeleton.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Box from "../src/ui/box";
+import Skeleton from "../src/ui/skeleton";
+
+const meta: Meta<typeof Box> = {
+  component: Box,
+  title: "Skeleton",
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+  render: (props) => {
+    return (
+      <Box display="flex" flexDirection="column" gap="$4">
+        <Skeleton borderRadius="$sm" width="$26" height="$10" />
+        <Skeleton borderRadius="$sm" width="$30" height="$10" />
+        <Skeleton borderRadius="$sm" width="$20" height="$10" />
+      </Box>
+    );
+  },
+};
diff --git a/packages/react/stories/TransferItem.stories.tsx b/packages/react/stories/TransferItem.stories.tsx
@@ -31,7 +31,7 @@ export const Primary: Story = {
     return (
       <TransferItem
         {...props}
-        dropDownList={dropdownList}
+        dropdownList={dropdownList}
         amount={amountStaked}
         onChange={(item, amount) => {
           setAmountStaked(amount);

diff --git a/packages/react/stories/asset/OverviewTransfer.stories.tsx b/packages/react/stories/asset/OverviewTransfer.stories.tsx
@@ -5,6 +5,7 @@ import Button from "../../src/ui/button";
 import BasicModal from "../../src/ui/basic-modal";
 import Stack from "../../src/ui/stack";
 import OverviewTransfer from "../../src/ui/overview-transfer";
+import type { AvailableItem } from "../../src/ui/transfer-item/transfer-item.types";
 import { getTransferList } from "../stub/assetData";
 
 const meta: Meta<typeof OverviewTransfer> = {
@@ -18,24 +19,31 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const dropdownList = getTransferList();
+const stride = dropdownList.find((item) => item.name === "Stride");
+
 export const Primary: Story = {
   args: {
-    type: "withdraw",
-    dropDownList: getTransferList(),
+    dropdownList: dropdownList,
+    timeEstimateLabel: "~ 20 seconds",
     onTransfer() {
       console.log("onTransfer");
     },
     onCancel() {
       console.log("onCancel");
     },
-    onChange(selectedItem, value) {
-      console.log("onChange", selectedItem, value);
-    },
   },
   render: (props) => {
     const [isDepositOpen, setIsDepositOpen] = useState(false);
     const [isWithdrawOpen, setIsWithdrawOpen] = useState(false);
 
+    const [selected, setSelected] = useState<AvailableItem>(dropdownList[1]);
+
+    const onChange = (selectedItem, value) => {
+      console.log("onChange", selectedItem, value);
+      setSelected(selectedItem);
+    };
+
     return (
       <Stack space="$10">
         <BasicModal
@@ -48,7 +56,13 @@ export const Primary: Story = {
           title="Deposit"
           onClose={() => setIsDepositOpen(false)}
         >
-          <OverviewTransfer {...props} />
+          <OverviewTransfer
+            {...props}
+            selectedItem={selected}
+            fromChainLogoUrl={selected.imgSrc}
+            toChainLogoUrl={stride.imgSrc}
+            onChange={onChange}
+          />
         </BasicModal>
         <BasicModal
           renderTrigger={(triggerProps) => (

diff --git a/packages/react/stories/asset/SingleChain.stories.tsx b/packages/react/stories/asset/SingleChain.stories.tsx
@@ -15,6 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
+    isLoading: false,
     title: "Your asset",
     listTitle: "On Osmosis",
     onDeposit: () => {

diff --git a/packages/react/stories/staking/LiquidStaking.stories.tsx b/packages/react/stories/staking/LiquidStaking.stories.tsx
@@ -30,13 +30,13 @@ export const Primary: Story = {
   args: {},
   render: (props) => {
     const [isOpen, setIsOpen] = useState(false);
-    const dropDownList = useMemo(() => getTransferList(), []);
-    const stride = dropDownList.find((item) => item.symbol === "STRD");
+    const dropdownList = useMemo(() => getTransferList(), []);
+    const stride = dropdownList.find((item) => item.symbol === "STRD");
     console.log("stride", stride);
 
     const [stakeToken, setStakeToken] = useState<
       LiquidStakingProps["stakeToken"] | null
-    >(dropDownList[0]);
+    >(dropdownList[0]);
 
     const [reward, setReward] = useState<LiquidStakingProps["reward"]>({
       ...stride,
@@ -54,7 +54,7 @@ export const Primary: Story = {
           stakeAmount={stakedAmount}
           stakeToken={stakeToken}
           reward={reward}
-          options={dropDownList}
+          options={dropdownList}
           precision={2}
           bottomLink={{
             href: "https://cosmology.tech/",
@@ -150,13 +150,13 @@ export const WithModal: Story = {
   args: {},
   render: (props) => {
     const [isOpen, setIsOpen] = useState(false);
-    const dropDownList = useMemo(() => getTransferList(), []);
-    const stride = dropDownList.find((item) => item.symbol === "STRD");
+    const dropdownList = useMemo(() => getTransferList(), []);
+    const stride = dropdownList.find((item) => item.symbol === "STRD");
     console.log("stride", stride);
 
     const [stakeToken, setStakeToken] = useState<
       LiquidStakingProps["stakeToken"] | null
-    >(dropDownList[0]);
+    >(dropdownList[0]);
 
     const [reward, setReward] = useState<LiquidStakingProps["reward"]>({
       ...stride,
@@ -198,7 +198,7 @@ export const WithModal: Story = {
               stakeAmount={stakedAmount}
               stakeToken={stakeToken}
               reward={reward}
-              options={dropDownList}
+              options={dropdownList}
               precision={2}
               bottomLink={{
                 href: "https://cosmology.tech/",

diff --git a/packages/react/stories/swap/SwapToken.stories.tsx b/packages/react/stories/swap/SwapToken.stories.tsx
@@ -29,7 +29,7 @@ export const Primary: Story = {
         value: "< $0.01",
       },
     },
-    // dropDownList: [
+    // dropdownList: [
     //   {
     //     available: 57.61,
     //     symbol: "OSMO",
@@ -83,7 +83,7 @@ export const Primary: Story = {
   },
   render: (props) => {
     const [isOpen, setIsOpen] = useState(false);
-    const dropDownList = useMemo(() => getTransferList(), []);
+    const dropdownList = useMemo(() => getTransferList(), []);
 
     return (
       <BasicModal
@@ -96,7 +96,7 @@ export const Primary: Story = {
         title="Swap"
         onClose={() => setIsOpen(false)}
       >
-        <SwapToken {...props} dropDownList={dropDownList} />
+        <SwapToken {...props} dropdownList={dropdownList} />
       </BasicModal>
     );
   },

diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,9 @@ export type {
   NumberFormatProps,
   NumberFormatter,
 } from "./models/system.model";
-export type { Sprinkles } from './styles/rainbow-sprinkles.css';
+export type { Sprinkles } from "./styles/rainbow-sprinkles.css";
+
+export { skeleton as skeletonClass } from "./ui/shared/shared.css";
 
 // Init Components
 export { default as Box } from "./ui/box";
@@ -21,6 +23,7 @@ export { default as Text } from "./ui/text";
 export type { TextProps } from "./ui/text/text.types";
 export { default as Button } from "./ui/button";
 export type { ButtonProps } from "./ui/button/button.types";
+export { default as Skeleton } from "./ui/skeleton";
 export { default as ClipboardCopyText } from "./ui/clipboard-copy-text";
 export type { ClipboardCopyTextProps } from "./ui/clipboard-copy-text/clipboard-copy-text.types";
 export { default as ThemeProvider } from "./ui/theme-provider";
@@ -51,7 +54,7 @@ export { default as ConnectModalWalletButton } from "./ui/connect-modal-wallet-b
 export type { ConnectModalWalletButtonProps } from "./ui/connect-modal-wallet-button/connect-modal-wallet-button.types";
 export { default as ConnectModalWalletList } from "./ui/connect-modal-wallet-list";
 export type { ConnectModalWalletListProps } from "./ui/connect-modal-wallet-list/connect-modal-wallet-list.types";
-export { default as ShowMore } from "./ui/show-more";
+export { default as Reveal } from "./ui/reveal";
 export { default as I18nProvider } from "./ui/i18n-provider";
 export { default as PoolInfoHeader } from "./ui/pool-info-header";
 export type { PoolInfoHeaderProps } from "./ui/pool-info-header/pool-info-header.types";

diff --git a/src/ui/asset-list-header/asset-list-header.lite.tsx b/src/ui/asset-list-header/asset-list-header.lite.tsx
@@ -11,11 +11,14 @@ useMetadata({
   },
 });
 
-export default function AssetListHeader(props: AssetListHeaderProps) {
-  useDefaultProps({
-    isSingle: false,
-  });
+useDefaultProps<Partial<AssetListHeaderProps>>({
+  showDeposit: true,
+  showWithdraw: true,
+  withdrawButtonLabel: "Withdraw",
+  depositButtonLabel: "Deposit",
+});
 
+export default function AssetListHeader(props: AssetListHeaderProps) {
   return (
     <Box
       display="flex"
@@ -178,7 +181,11 @@ export default function AssetListHeader(props: AssetListHeaderProps) {
               desktop: "$12",
             }}
           >
-            <Show when={!!props.onWithdraw}>
+            <Show
+              when={
+                typeof props.onWithdraw === "function" && props.showWithdraw
+              }
+            >
               <Box
                 flex={{
                   mobile: "1",
@@ -196,12 +203,14 @@ export default function AssetListHeader(props: AssetListHeaderProps) {
                   intent="secondary"
                   onClick={() => props.onWithdraw?.()}
                 >
-                  {props.withdrawButtonLabel ?? "Withdraw"}
+                  {props.withdrawButtonLabel}
                 </Button>
               </Box>
             </Show>
 
-            <Show when={!!props.onDeposit}>
+            <Show
+              when={typeof props.onDeposit === "function" && props.showDeposit}
+            >
               <Box
                 flex={{
                   mobile: "1",
@@ -218,7 +227,7 @@ export default function AssetListHeader(props: AssetListHeaderProps) {
                   intent="tertiary"
                   onClick={() => props.onDeposit?.()}
                 >
-                  {props.depositButtonLabel ?? "Deposit"}
+                  {props.depositButtonLabel}
                 </Button>
               </Box>
             </Show>

diff --git a/src/ui/asset-list-header/asset-list-header.types.tsx b/src/ui/asset-list-header/asset-list-header.types.tsx
@@ -15,6 +15,9 @@ export interface AssetListHeaderProps extends BaseComponentProps {
   singleChainHeader?: SingleChainHeader;
   depositButtonLabel?: string;
   withdrawButtonLabel?: string;
+  // ==== Action props
+  showDeposit?: boolean;
+  showWithdraw?: boolean;
   onDeposit?: (event?: any) => void;
   onWithdraw?: (event?: any) => void;
   attributes?: any;