feat: Develop Earn Page Layout Component (#191)

gnoswap-labs · Aug 29, 2023 · 51bde07 · 51bde07
1 parent 86d775d
commit 51bde07
Show file tree

Hide file tree

Showing 66 changed files with 1,754 additions and 341 deletions.
diff --git a/packages/web/src/components/common/icons/IconSuccess.tsx b/packages/web/src/components/common/icons/IconSuccess.tsx
@@ -8,8 +8,8 @@ const IconSuccess = ({ className }: { className?: string }) => (
     className={className}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM52.9713 30.4713C54.1429 29.2997 54.1429 27.4003 52.9713 26.2287C51.7997 25.0571 49.9003 25.0571 48.7287 26.2287L32.4 42.5574L23.7213 33.8787C22.5497 32.7071 20.6503 32.7071 19.4787 33.8787C18.3071 35.0503 18.3071 36.9497 19.4787 38.1213L30.2787 48.9213C30.8413 49.4839 31.6044 49.8 32.4 49.8C33.1956 49.8 33.9587 49.4839 34.5213 48.9213L52.9713 30.4713Z"
       fill="#0059FF"
     />

diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.stories.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
 import MyPositionCardList from "./MyPositionCardList";
 import { dummyPositionList } from "@containers/my-position-card-list-container/MyPositionCardListContainer";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "common/MyPositionCardList",
@@ -22,4 +22,8 @@ const Template: ComponentStory<typeof MyPositionCardList> = args => (
 export const Default = Template.bind({});
 Default.args = {
   isFetched: true,
+  routeItem: action("routeItem"),
+  mobile: false,
+  loadMore: true,
+  onClickLoadMore: action("onClickLoadMore"),
 };
diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.tsx
@@ -9,23 +9,27 @@ interface MyPositionCardListProps {
   isFetched: boolean;
   onClickLoadMore?: () => void;
   list: any[];
-  windowSize: number;
   currentIndex: number;
+  routeItem: (id: number) => void;
+  mobile: boolean;
 }
 
 const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
   loadMore,
   isFetched,
   onClickLoadMore,
   list,
-  windowSize,
   currentIndex,
+  routeItem,
+  mobile,
 }) => (
   <CardListWrapper>
     <GridWrapper>
       {isFetched &&
         list.length > 0 &&
-        list.map((item, idx) => <MyPositionCard item={item} key={idx} />)}
+        list.map((item, idx) => (
+          <MyPositionCard item={item} key={idx} routeItem={routeItem} />
+        ))}
       {!isFetched &&
         Array.from({ length: 4 }).map((_, idx) => (
           <span
@@ -35,7 +39,7 @@ const MyPositionCardList: React.FC<MyPositionCardListProps> = ({
           />
         ))}
     </GridWrapper>
-    {windowSize > 1000 ? (
+    {!mobile ? (
       loadMore &&
       onClickLoadMore && (
         <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />

diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.stories.tsx b/packages/web/src/components/common/my-position-card/MyPositionCard.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import MyPositionCard from "./MyPositionCard";
 import { dummyPositionList } from "@containers/my-position-card-list-container/MyPositionCardListContainer";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "common/MyPositionCard",
@@ -21,4 +22,5 @@ Staked.args = {
 export const Unstaked = Template.bind({});
 Unstaked.args = {
   item: dummyPositionList[0],
+  routeItem: action("routeItem"),
 };
diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.tsx b/packages/web/src/components/common/my-position-card/MyPositionCard.tsx
@@ -8,12 +8,16 @@ import { MyPositionCardWrapper } from "./MyPositionCard.styles";
 
 interface MyPositionCardProps {
   item: any;
+  routeItem: (id: number) => void;
 }
 
-const MyPositionCard: React.FC<MyPositionCardProps> = ({ item }) => {
+const MyPositionCard: React.FC<MyPositionCardProps> = ({ item, routeItem }) => {
   const { tokenPair } = item;
   return (
-    <MyPositionCardWrapper stakeType={item.stakeType}>
+    <MyPositionCardWrapper
+      stakeType={item.stakeType}
+      onClick={() => routeItem(Math.floor(Math.random() * 100 + 1))}
+    >
       <div className="title-wrapper">
         <div className="box-header">
           <DoubleLogo

diff --git a/...ages/web/src/components/earn/earn-my-positions-content/EarnMyPositionsContent.stories.tsx b/...ages/web/src/components/earn/earn-my-positions-content/EarnMyPositionsContent.stories.tsx
@@ -7,6 +7,7 @@ import EarnMyPositionsUnconnected from "@components/earn/earn-my-positions-uncon
 import EarnMyPositionNoLiquidity from "@components/earn/earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity";
 import { dummyPositionList } from "@containers/my-position-card-list-container/MyPositionCardListContainer";
 import MyPositionCardList from "@components/common/my-position-card-list/MyPositionCardList";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "earn/EarnMyPositionsContent",
@@ -22,8 +23,9 @@ const Template: ComponentStory<typeof EarnMyPositionsContent> = args => (
       <MyPositionCardList
         list={dummyPositionList}
         isFetched={true}
-        windowSize={500}
         currentIndex={1}
+        routeItem={action("routeItem")}
+        mobile={false}
       />
     }
   />

diff --git a/.../web/src/components/earn/incentivized-pool-card-list/IncentivizedPoolCardList.stories.tsx b/.../web/src/components/earn/incentivized-pool-card-list/IncentivizedPoolCardList.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { css } from "@emotion/react";
 import IncentivizedPoolCardList from "./IncentivizedPoolCardList";
 import { poolDummy } from "@components/earn//incentivized-pool-card/incentivized-pool-dummy";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "earn/IncentivizedPoolCardList",
@@ -24,6 +25,8 @@ const Template: ComponentStory<typeof IncentivizedPoolCardList> = args => (
 export const Default = Template.bind({});
 Default.args = {
   isFetched: true,
+  routeItem: action("routeItem"),
+  mobile: false,
 };
 
 const wrapper = css`

diff --git a/packages/web/src/components/earn/incentivized-pool-card-list/IncentivizedPoolCardList.tsx b/packages/web/src/components/earn/incentivized-pool-card-list/IncentivizedPoolCardList.tsx
@@ -7,55 +7,54 @@ import { type PoolListProps } from "@containers/incentivized-pool-card-list-cont
 import IncentivizedPoolCard from "@components/earn/incentivized-pool-card/IncentivizedPoolCard";
 import { SHAPE_TYPES, skeletonStyle } from "@constants/skeleton.constant";
 import LoadMoreButton from "@components/common/load-more-button/LoadMoreButton";
-
 interface IncentivizedPoolCardListProps {
   list: Array<PoolListProps>;
   loadMore?: boolean;
   isFetched: boolean;
   onClickLoadMore?: () => void;
-  windowSize: number;
   currentIndex: number;
+  routeItem: (id: number) => void;
+  mobile: boolean;
 }
 
 const IncentivizedPoolCardList: React.FC<IncentivizedPoolCardListProps> = ({
   list,
   loadMore,
   isFetched,
   onClickLoadMore,
-  windowSize,
   currentIndex,
-}) => {
-  return (
-    <IncentivizedWrapper>
-      <PoolListWrapper>
-        {isFetched &&
-          list.length > 0 &&
-          list.map((item, idx) => (
-            <IncentivizedPoolCard item={item} key={idx} />
-          ))}
-        {!isFetched &&
-          Array.from({ length: 8 }).map((_, idx) => (
-            <span
-              key={idx}
-              className="card-skeleton"
-              css={skeletonStyle("100%", SHAPE_TYPES.ROUNDED_SQUARE)}
-            />
-          ))}
-      </PoolListWrapper>
-      {windowSize > 1000 ? (
-        loadMore &&
-        onClickLoadMore && (
-          <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />
-        )
-      ) : (
-        <div className="box-indicator">
-          <span className="current-page">{currentIndex}</span>
-          <span>/</span>
-          <span>{list.length}</span>
-        </div>
-      )}
-    </IncentivizedWrapper>
-  );
-};
+  routeItem,
+  mobile,
+}) => (
+  <IncentivizedWrapper>
+    <PoolListWrapper>
+      {isFetched &&
+        list.length > 0 &&
+        list.map((item, idx) => (
+          <IncentivizedPoolCard item={item} key={idx} routeItem={routeItem} />
+        ))}
+      {!isFetched &&
+        Array.from({ length: 8 }).map((_, idx) => (
+          <span
+            key={idx}
+            className="card-skeleton"
+            css={skeletonStyle("100%", SHAPE_TYPES.ROUNDED_SQUARE)}
+          />
+        ))}
+    </PoolListWrapper>
+    {!mobile ? (
+      loadMore &&
+      onClickLoadMore && (
+        <LoadMoreButton show={loadMore} onClick={onClickLoadMore} />
+      )
+    ) : (
+      <div className="box-indicator">
+        <span className="current-page">{currentIndex}</span>
+        <span>/</span>
+        <span>{list.length}</span>
+      </div>
+    )}
+  </IncentivizedWrapper>
+);
 
 export default IncentivizedPoolCardList;
diff --git a/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.stories.tsx b/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.stories.tsx
@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import IncentivizedPoolCard from "./IncentivizedPoolCard";
 import { poolDummy } from "./incentivized-pool-dummy";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "earn/IncentivizedPoolCard",
@@ -14,4 +15,7 @@ const Template: ComponentStory<typeof IncentivizedPoolCard> = args => {
 };
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  item: poolDummy[0],
+  routeItem: action("routeItem"),
+};
diff --git a/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx b/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx
@@ -8,13 +8,17 @@ import { PoolCardWrapper } from "./IncentivizedPoolCard.styles";
 
 interface IncentivizedPoolCardProps {
   item: PoolListProps;
+  routeItem: (id: number) => void;
 }
 
 const IncentivizedPoolCard: React.FC<IncentivizedPoolCardProps> = ({
   item,
+  routeItem,
 }) => {
   return (
-    <PoolCardWrapper>
+    <PoolCardWrapper
+      onClick={() => routeItem(Math.floor(Math.random() * 100 + 1))}
+    >
       <div className="pool-container">
         <div className="title-container">
           <div className="box-header">

diff --git a/packages/web/src/components/earn/pool-info/PoolInfo.stories.tsx b/packages/web/src/components/earn/pool-info/PoolInfo.stories.tsx
@@ -4,6 +4,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import PoolInfo from "./PoolInfo";
 import { css, Theme } from "@emotion/react";
 import { dummyPoolList } from "@containers/pool-list-container/PoolListContainer";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "earn/PoolList/PoolInfo",
@@ -17,7 +18,9 @@ const Template: ComponentStory<typeof PoolInfo> = args => (
 );
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  routeItem: action("routeItem"),
+};
 
 const wrapper = (theme: Theme) => css`
   color: ${theme.color.text02};

diff --git a/packages/web/src/components/earn/pool-info/PoolInfo.tsx b/packages/web/src/components/earn/pool-info/PoolInfo.tsx
@@ -7,9 +7,10 @@ import React from "react";
 import { PoolInfoWrapper, TableColumn } from "./PoolInfo.styles";
 interface PoolInfoProps {
   pool: Pool;
+  routeItem: (id: number) => void;
 }
 
-const PoolInfo: React.FC<PoolInfoProps> = ({ pool }) => {
+const PoolInfo: React.FC<PoolInfoProps> = ({ pool, routeItem }) => {
   const {
     poolId,
     tokenPair,
@@ -22,7 +23,9 @@ const PoolInfo: React.FC<PoolInfoProps> = ({ pool }) => {
     incentiveType,
   } = pool;
   return (
-    <PoolInfoWrapper>
+    <PoolInfoWrapper
+      onClick={() => routeItem(Math.floor(Math.random() * 100 + 1))}
+    >
       <TableColumn className="left" tdWidth={POOL_TD_WIDTH[0]}>
         <DoubleLogo
           left={tokenPair.token0.tokenLogo}

diff --git a/packages/web/src/components/earn/pool-list-header/PoolListHeader.spec.tsx b/packages/web/src/components/earn/pool-list-header/PoolListHeader.spec.tsx
@@ -3,14 +3,18 @@ import { Provider as JotaiProvider } from "jotai";
 import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
 import PoolListHeader from "./PoolListHeader";
 import { POOL_TYPE } from "@containers/pool-list-container/PoolListContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 describe("PoolListHeader Component", () => {
   it("PoolListHeader render", () => {
     const mockProps = {
       poolType: POOL_TYPE.ALL,
-      changePoolType: () => { },
-      search: () => { },
+      changePoolType: () => {},
+      search: () => {},
       keyword: "",
+      breakpoint: DEVICE_TYPE.WEB,
+      searchIcon: true,
+      onTogleSearch: () => null,
     };
 
     render(

diff --git a/packages/web/src/components/earn/pool-list-header/PoolListHeader.stories.tsx b/packages/web/src/components/earn/pool-list-header/PoolListHeader.stories.tsx
@@ -4,6 +4,7 @@ import { action } from "@storybook/addon-actions";
 
 import PoolListHeader from "./PoolListHeader";
 import { POOL_TYPE } from "@containers/pool-list-container/PoolListContainer";
+import { DEVICE_TYPE } from "@styles/media";
 
 export default {
   title: "earn/PoolList/PoolListHeader",
@@ -19,4 +20,8 @@ Default.args = {
   poolType: POOL_TYPE.ALL,
   changePoolType: action("changePoolType"),
   search: action("search"),
+  keyword: "",
+  breakpoint: DEVICE_TYPE.WEB,
+  searchIcon: true,
+  onTogleSearch: action("onTogleSearch"),
 };
diff --git a/packages/web/src/components/earn/pool-list-header/PoolListHeader.tsx b/packages/web/src/components/earn/pool-list-header/PoolListHeader.tsx
@@ -3,15 +3,15 @@ import SearchInput from "@components/common/search-input/SearchInput";
 import SelectTab from "@components/common/select-tab/SelectTab";
 import { POOL_TYPE } from "@containers/pool-list-container/PoolListContainer";
 import { PoolHeaderWrapper } from "./PoolListHeader.styles";
-import { DeviceSize } from "@styles/media";
+import { DEVICE_TYPE } from "@styles/media";
 import IconSearch from "@components/common/icons/IconSearch";
 
 interface PoolListHeaderProps {
   poolType: POOL_TYPE;
   changePoolType: (newType: string) => void;
   search: (e: React.ChangeEvent<HTMLInputElement>) => void;
   keyword: string;
-  windowSize: number;
+  breakpoint: DEVICE_TYPE;
   searchIcon: boolean;
   onTogleSearch: () => void;
 }
@@ -21,14 +21,14 @@ const PoolListHeader: React.FC<PoolListHeaderProps> = ({
   changePoolType,
   search,
   keyword,
-  windowSize,
+  breakpoint,
   searchIcon,
   onTogleSearch,
 }) => (
   <PoolHeaderWrapper>
     <div className="title-container">
       <h2>Pools</h2>
-      {windowSize > DeviceSize.mobile ? (
+      {breakpoint !== DEVICE_TYPE.MOBILE ? (
         <SelectTab
           selectType={poolType}
           list={Object.values(POOL_TYPE)}
@@ -48,9 +48,9 @@ const PoolListHeader: React.FC<PoolListHeaderProps> = ({
         </div>
       )}
     </div>
-    {windowSize > DeviceSize.mobile ? (
+    {breakpoint !== DEVICE_TYPE.MOBILE ? (
       <SearchInput
-        width={windowSize > DeviceSize.tablet ? 300 : 250}
+        width={breakpoint === DEVICE_TYPE.WEB ? 300 : 250}
         value={keyword}
         onChange={search}
         className="pools-search"