feat: [GSFE-70] Implementation Token Description component (#62)

packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts

@@ -2,11 +2,10 @@ import { css, Theme } from "@emotion/react";
 import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
-  ${mixins.flexbox("row", "center", "center", false)}
+  ${mixins.flexbox("row", "center", "flex-start", false)}
   ${theme.fonts.body11};
   color: ${theme.colors.gray40};
   gap: 4px;
-  width: 96px;
   .icon-load {
     width: 16px;
     height: 16px;

packages/web/src/components/token/token-description-content/TokenDescriptionContent.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import TokenDescriptionContent from "./TokenDescriptionContent";
+import { descriptionInit } from "@containers/token-description-container/TokenDescriptionContainer";
+
+export default {
+  title: "token/TokenDescriptionContent",
+  component: TokenDescriptionContent,
+} as ComponentMeta<typeof TokenDescriptionContent>;
+
+const Template: ComponentStory<typeof TokenDescriptionContent> = args => (
+  <TokenDescriptionContent {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  content: descriptionInit.desc,
+};

packages/web/src/components/token/token-description-content/TokenDescriptionContent.styles.ts

@@ -0,0 +1,19 @@
+import { css, type Theme } from "@emotion/react";
+import mixins from "@styles/mixins";
+
+export const wrapper = (theme: Theme) => css`
+  ${mixins.flexbox("column", "flex-start", "center")};
+  color: ${theme.colors.colorWhite};
+  p {
+    ${theme.fonts.body12};
+    color: ${theme.colors.gray40};
+    width: 100%;
+    max-height: 180px;
+    overflow: hidden;
+    margin-bottom: 16px;
+    &.auto-height {
+      max-height: fit-content;
+      overflow-y: visible;
+    }
+  }
+`;

packages/web/src/components/token/token-description-content/TokenDescriptionContent.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import LoadMoreButton, {
+  TEXT_TYPE,
+} from "@components/common/load-more-button/LoadMoreButton";
+import { cx } from "@emotion/css";
+import { wrapper } from "./TokenDescriptionContent.styles";
+
+interface TokenDescriptionContentProps {
+  content: string;
+}
+
+const TokenDescriptionContent: React.FC<TokenDescriptionContentProps> = ({
+  content,
+}) => {
+  const [isMaxHeightOver, setIsMaxHeightOver] = useState(false);
+  const [showMore, setShowMore] = useState(true);
+  const contentRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+    contentRef.current.clientHeight >= 180
+      ? setIsMaxHeightOver(true)
+      : setIsMaxHeightOver(false);
+  }, [contentRef]);
+
+  const onClickShowMore = () => {
+    return setShowMore((prev: boolean) => !prev);
+  };
+
+  return (
+    <div css={wrapper}>
+      <p ref={contentRef} className={cx({ "auto-height": !showMore })}>
+        {content}
+      </p>
+      {isMaxHeightOver && (
+        <LoadMoreButton
+          show={showMore}
+          onClick={onClickShowMore}
+          text={TEXT_TYPE.SHOW}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TokenDescriptionContent;

packages/web/src/components/token/token-description-links/TokenDescriptionLinks.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import TokenDescriptionLinks from "./TokenDescriptionLinks";
+import { descriptionInit } from "@containers/token-description-container/TokenDescriptionContainer";
+
+export default {
+  title: "token/TokenDescriptionLinks",
+  component: TokenDescriptionLinks,
+} as ComponentMeta<typeof TokenDescriptionLinks>;
+
+const Template: ComponentStory<typeof TokenDescriptionLinks> = args => (
+  <TokenDescriptionLinks {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  links: descriptionInit.links,
+};

packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts

@@ -0,0 +1,36 @@
+import { css, type Theme } from "@emotion/react";
+import mixins from "@styles/mixins";
+
+export const wrapper = (theme: Theme) => css`
+  ${mixins.flexbox("row", "center", "flex-start")};
+  h3 {
+    color: ${theme.colors.colorWhite};
+    ${theme.fonts.body11};
+    margin-right: 12px;
+  }
+  button {
+    ${mixins.flexbox("row", "center", "center")};
+    ${theme.fonts.p4};
+    gap: 4px;
+    height: 24px;
+    background-color: ${theme.colors.gray60};
+    border-radius: 4px;
+    padding: 0px 8px;
+    color: ${theme.colors.gray30};
+    margin-left: 4px;
+    .link-icon {
+      width: 16px;
+      height: 16px;
+      * {
+        fill: ${theme.colors.gray40};
+      }
+    }
+  }
+  button:hover {
+    color: ${theme.colors.gray20};
+    transition: all 0.3s ease;
+    .link-icon * {
+      fill: ${theme.colors.gray20};
+    }
+  }
+`;

packages/web/src/components/token/token-description-links/TokenDescriptionLinks.tsx

@@ -0,0 +1,28 @@
+import IconOpenLink from "@components/common/icons/IconOpenLink";
+import React from "react";
+import { wrapper } from "./TokenDescriptionLinks.styles";
+
+interface TokenDescriptionLinksProps {
+  links: { [key: string]: string };
+}
+
+const TokenDescriptionLinks: React.FC<TokenDescriptionLinksProps> = ({
+  links,
+}) => {
+  const onClickLink = (link: string) => {
+    return window.open(link, "_blank");
+  };
+  return (
+    <div css={wrapper}>
+      <h3>Links</h3>
+      {Object.keys(links)?.map((link, idx) => (
+        <button key={idx} onClick={() => onClickLink(links[link])}>
+          <span>{link}</span>
+          <IconOpenLink className="link-icon" />
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TokenDescriptionLinks;

packages/web/src/components/token/token-description/TokenDescription.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import TokenDescription from "./TokenDescription";
+import { descriptionInit } from "@containers/token-description-container/TokenDescriptionContainer";
+
+export default {
+  title: "token/TokenDescription",
+  component: TokenDescription,
+} as ComponentMeta<typeof TokenDescription>;
+
+const Template: ComponentStory<typeof TokenDescription> = args => (
+  <TokenDescription {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tokenName: descriptionInit.token.name,
+  tokenSymbol: descriptionInit.token.symbol,
+  content: descriptionInit.desc,
+  links: descriptionInit.links,
+};

packages/web/src/components/token/token-description/TokenDescription.styles.ts

@@ -1,7 +1,16 @@
 import { css, type Theme } from "@emotion/react";
+import mixins from "@styles/mixins";
 
 export const wrapper = (theme: Theme) => css`
+  ${mixins.flexbox("column", "flex-box", "center")};
+  width: 100%;
+  background-color: ${theme.colors.colorBlack};
+  border: 1px solid ${theme.colors.gray50};
+  border-radius: 8px;
   color: ${theme.colors.colorWhite};
-
-  height: 100px;
+  padding: 24px;
+  gap: 24px;
+  h2 {
+    ${theme.fonts.body7};
+  }
 `;

packages/web/src/components/token/token-description/TokenDescription.tsx

@@ -1,8 +1,27 @@
 import React from "react";
+import TokenDescriptionContent from "@components/token/token-description-content/TokenDescriptionContent";
+import TokenDescriptionLinks from "@components/token/token-description-links/TokenDescriptionLinks";
 import { wrapper } from "./TokenDescription.styles";
+interface TokenDescriptionProps {
+  tokenName: string;
+  tokenSymbol: string;
+  content: string;
+  links: any;
+}
 
-const TokenDescription: React.FC = () => {
-  return <div css={wrapper}>TokenDescription</div>;
+const TokenDescription: React.FC<TokenDescriptionProps> = ({
+  tokenName,
+  tokenSymbol,
+  content,
+  links,
+}) => {
+  return (
+    <div css={wrapper}>
+      <h2>{`About ${tokenName} (${tokenSymbol})`}</h2>
+      <TokenDescriptionContent content={content} />
+      <TokenDescriptionLinks links={links} />
+    </div>
+  );
 };
 
 export default TokenDescription;

packages/web/src/containers/token-description-container/TokenDescriptionContainer.tsx

@@ -1,8 +1,30 @@
 import React from "react";
 import TokenDescription from "@components/token/token-description/TokenDescription";
 
+export const descriptionInit = {
+  token: {
+    tokenId: "1",
+    name: "Bitcoin",
+    symbol: "BTC",
+    tokenLogo: "https://s2.coinmarketcap.com/static/img/coins/64x64/1.png",
+  },
+  desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque eu, fringilla sit amet sapien. Proin ut semper risus. Vivamus fringilla eget lectus ut faucibus. Proin vitae mollis massa. Sed bibendum tortor eget aliquam commodo. Etiam et eleifend augue. Donec molestie placerat elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque eu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque euetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque euetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque euetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque eu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque euetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus. In sit amet mattis nisl. Mauris libero quam, hendrerit dapibus scelerisque euetur adipiscing elit. Phasellus nisi orci, ultrices sit amet mi eget, efficitur elementum tellus. Integer augue purus, rutrum eu pretium sit amet, varius in quam. In auctor gravida pretium. Maecenas est ante, pulvinar id accumsan eget, aliquam ac turpis. Donec vulputate nunc tellus.",
+  links: {
+    Gnoscan: "gnoscan.io/tokens/r_demo_grc20_GNOS",
+    Analytics: "info.gnoswap.io/tokens/r_demo_grc20_GNOS",
+    Website: "gnoswap.io",
+  },
+};
+
 const TokenDescriptionContainer: React.FC = () => {
-  return <TokenDescription />;
+  return (
+    <TokenDescription
+      tokenName={descriptionInit.token.name}
+      tokenSymbol={descriptionInit.token.symbol}
+      content={descriptionInit.desc}
+      links={descriptionInit.links}
+    />
+  );
 };
 
 export default TokenDescriptionContainer;