Merge remote-tracking branch 'origin/develop' into GSW-31_token-detai…

…l-ui

packages/web/.env.example

@@ -1 +1,6 @@
-NEXT_PUBLIC_API_URL="https://mock-api.gnoswap.io/v3/testnet"
+NEXT_PUBLIC_DEFAULT_CHAIN_ID="dev.gnoswap"
+NEXT_PUBLIC_API_URL="https://dev-api.gnoswap.io/v3/testnet"
+NEXT_PUBLIC_PACKAGE_POOL_PATH="gno.land/r/pool"
+NEXT_PUBLIC_PACKAGE_POOL_ADDRESS="g1ee305k8yk0pjz443xpwtqdyep522f9g5r7d63w"
+NEXT_PUBLIC_PACKAGE_POSITION_PATH="gno.land/r/position"
+NEXT_PUBLIC_PACKAGE_POSITION_ADDRESS="g1htpxzv2dkplvzg50nd8fswrneaxmdpwn459thx"

packages/web/.storybook/main.js

@@ -21,6 +21,9 @@ module.exports = {
       },
     });
     return merge(config, {
+      experiments: {
+        topLevelAwait: true,
+      },
       resolve: {
         plugins: [new TsconfigPathsPlugin()],
       },

packages/web/package.json

@@ -19,6 +19,7 @@
     "@emotion/styled": "11.10.6",
     "@floating-ui/react": "0.21.1",
     "@gnolang/gno-js-client": "1.1.6",
+    "@hookform/resolvers": "^3.3.2",
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",
     "bignumber.js": "9.1.1",
@@ -27,10 +28,12 @@
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.47.0",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "utility-types": "3.10.0",
-    "ws": "8.14.2"
+    "ws": "8.14.2",
+    "yup": "^1.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.21.0",

packages/web/src/common/clients/wallet-client/adena/adena-client.ts

@@ -73,6 +73,9 @@ export class AdenaClient implements WalletClient {
   };
 
   public static createAdenaClient() {
+    if (typeof window === "undefined" || typeof window.adena === "undefined") {
+      return null;
+    }
     return new AdenaClient();
   }
 }

packages/web/src/common/errors/common/common-error.ts

@@ -5,6 +5,14 @@ const ERROR_VALUE = {
     status: 400,
     type: "Failed to initialize Provider",
   },
+  FAILED_INITIALIZE_GNO_PROVIDER: {
+    status: 401,
+    type: "Failed to initialize Gno Provider",
+  },
+  FAILED_INITIALIZE_WALLET: {
+    status: 402,
+    type: "Failed to initialize Wallet",
+  },
 };
 
 type ErrorType = keyof typeof ERROR_VALUE;

packages/web/src/common/errors/swap/swap-error.ts

@@ -1,21 +1,13 @@
 import { BaseError } from "@common/errors";
 
 const ERROR_VALUE = {
-  SYMBOL_TYPE_CHECK_ERROR: {
-    status: 1000,
-    type: "Token Symbol Data check Error",
-  },
   AMOUNT_TYPE_CHECK_ERROR: {
-    status: 1001,
-    type: "Amount Data check Error",
-  },
-  SWAP_RATE_LOOKUP_FAILED: {
     status: 4000,
-    type: "Swap rate lookup failed",
+    type: "Amount Data check Error",
   },
-  EXPECTED_RESULT_LOOKUP_FAILED: {
+  NOT_FOUND_SWAP_POOL: {
     status: 4001,
-    type: "Expected result lookup failed",
+    type: "Swap Pool not found",
   },
   SWAP_FAILED: {
     status: 4002,
@@ -29,6 +21,14 @@ const ERROR_VALUE = {
     status: 4004,
     type: "Get slippage failed",
   },
+  INVALID_PARAMS: {
+    status: 5000,
+    type: "Invalid request parameters",
+  },
+  INSUFFICIENT_BALANCE: {
+    status: 5001,
+    type: "Insufficient Balance",
+  },
 };
 
 type ErrorType = keyof typeof ERROR_VALUE;

packages/web/src/common/utils/data-check-util.ts

@@ -21,3 +21,8 @@ export const notNullNumberType = (v: any) => {
 export const notEmptyStringType = (v: string) => {
   return notNullStringType(v) && emptyStrCheckAfterTrim(v);
 };
+
+export function isAmount(str: string) {
+  const regex = /^\d+(\.\d*)?$/;
+  return regex.test(str);
+}

packages/web/src/common/values/data-constant.ts

@@ -8,7 +8,7 @@ export type IncentivizedOptions =
 export type StatusOptions = "SUCCESS" | "PENDING" | "FAILED";
 export type ActiveStatusOptions = "ACTIVE" | "IN_ACTIVE" | "NONE";
 export type TokenTableSelectType = "NATIVE" | "GRC20" | "ALL";
-export type ExactTypeOption = "EXACT_IN" | "EXACT_OUT";
+export type SwapDirectionType = "EXACT_IN" | "EXACT_OUT";
 export enum NotificationType {
   "Approve" = 0,
   "CreatePool" = 1,

packages/web/src/common/values/storage-constant.ts

@@ -4,4 +4,4 @@ export type StorageKeyType =
   | "language"
   | "search-token-logs";
 
-export type SessionStorageKeyType = "connectedWallet";
+export type SessionStorageKeyType = "connected-wallet";

packages/web/src/components/common/badge/Badge.tsx

@@ -5,6 +5,7 @@ interface BadgeProps {
   type: BADGE_TYPE;
   leftIcon?: React.ReactNode;
   text: string;
+  className?: string;
 }
 
 export const BADGE_TYPE = {
@@ -15,9 +16,9 @@ export const BADGE_TYPE = {
 } as const;
 export type BADGE_TYPE = ValuesType<typeof BADGE_TYPE>;
 
-const Badge: React.FC<BadgeProps> = ({ type, leftIcon, text }) => {
+const Badge: React.FC<BadgeProps> = ({ type, leftIcon, text, className }) => {
   return (
-    <BadgeWrapper type={type}>
+    <BadgeWrapper className={className} type={type}>
       {leftIcon && <div className="badge-icon">{leftIcon}</div>}
       <span>{text}</span>
     </BadgeWrapper>

packages/web/src/components/common/button/Button.styles.ts

@@ -18,6 +18,7 @@ export interface ButtonStyleProps {
   radius?: CSSProperties["borderRadius"];
   justify?: CSSProperties["justifyContent"];
   padding?: CSSProperties["padding"];
+  minWidth?: CSSProperties["minWidth"];
 }
 
 export const ButtonWrapper = styled.button<ButtonStyleProps>`
@@ -31,6 +32,11 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
     if (fullWidth) return "100%";
     return "auto";
   }};
+  min-width: ${({ minWidth }) => {
+    if (minWidth)
+      return typeof minWidth === "number" ? minWidth + "px" : minWidth;
+    return "auto";
+  }};
   height: ${({ height }) => {
     if (height) return typeof height === "number" ? height + "px" : height;
     return "auto";

packages/web/src/components/common/form-input/FormInput.styles.ts

@@ -0,0 +1,37 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const FormInputWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  gap: 6px;
+  .error-text {
+    color: ${({ theme }) => theme.color.red02};
+    ${fonts.p4}
+    ${media.mobile} {
+      ${fonts.p6}
+    }
+  }
+`;
+
+export const FormInputStyle = styled.input`
+  width: 100%;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.color.backgroundOpacity2};
+  color: ${({ theme }) => theme.color.text01};
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  ${fonts.body9}
+  ${media.mobile} {
+    ${fonts.body11}
+  }
+  &::placeholder {
+    color: ${({ theme }) => theme.color.text04};
+    ${fonts.body9}
+    ${media.mobile} {
+      ${fonts.body11}
+    }
+  }
+`;

packages/web/src/components/common/form-input/FormInput.tsx

@@ -0,0 +1,30 @@
+import React, { FC, memo } from "react";
+import { FormInputStyle, FormInputWrapper } from "./FormInput.styles";
+
+interface ParentProps {
+  className?: string;
+}
+
+type Props = {
+  placeholder?: string;
+  name: string;
+  type?: string;
+  errorText?: any;
+  parentProps?: ParentProps;
+};
+
+const FormInput: FC<Props> = React.forwardRef<HTMLInputElement, Props>(
+  (props, ref) => {
+    const { errorText, parentProps } = props;
+    return (
+      <FormInputWrapper {...parentProps}>
+        <FormInputStyle {...props} ref={ref} />
+        {errorText && <div className="error-text">{errorText}</div>}
+      </FormInputWrapper>
+    );
+  },
+);
+
+FormInput.displayName = "FormInput";
+
+export default memo(FormInput);

packages/web/src/components/common/form-textarea/FormTextArea.styles.ts

@@ -0,0 +1,34 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export const FormTextAreaWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  width: 100%;
+  gap: 6px;
+  .error-text {
+    color: ${({ theme }) => theme.color.red02};
+    ${fonts.p4}
+    ${media.mobile} {
+      ${fonts.p6}
+    }
+  }
+`;
+
+export const FormTextAreaStyle = styled.textarea`
+  width: 100%;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.color.backgroundOpacity2};
+  color: ${({ theme }) => theme.color.text01};
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  resize: none;
+  &::placeholder {
+    color: ${({ theme }) => theme.color.text04};
+    ${fonts.body9}
+    ${media.mobile} {
+      ${fonts.body11}
+    }
+  }
+`;

packages/web/src/components/common/form-textarea/FormTextArea.tsx

@@ -0,0 +1,26 @@
+import React, { FC, memo } from "react";
+import { FormTextAreaStyle, FormTextAreaWrapper } from "./FormTextArea.styles";
+
+type Props = {
+  errorText?: any;
+  placeholder: string;
+  name: string;
+  rows: number;
+};
+
+const TextArea: FC<Props> = React.forwardRef<HTMLTextAreaElement, Props>(
+  (props, ref) => {
+    const { errorText } = props;
+
+    return (
+      <FormTextAreaWrapper>
+        <FormTextAreaStyle {...props} ref={ref} />
+        {errorText && <div className="error-text">{errorText}</div>}
+      </FormTextAreaWrapper>
+    );
+  },
+);
+
+TextArea.displayName = "TextArea";
+
+export default memo(TextArea);

packages/web/src/components/common/form/FormProvider.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {
+  FormProvider as HookFormProvider,
+  UseFormReturn,
+  SubmitHandler,
+  FieldValues,
+} from "react-hook-form";
+
+interface Props<TFormValue extends FieldValues> {
+  methods: UseFormReturn<TFormValue, any>;
+  onSubmit: SubmitHandler<TFormValue>;
+  children?: React.ReactNode;
+}
+
+const FormProvider = <TFormValue extends FieldValues>({
+  methods,
+  onSubmit,
+  children,
+}: Props<TFormValue>) => {
+  return (
+    <HookFormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form>
+    </HookFormProvider>
+  );
+};
+
+export default FormProvider;

packages/web/src/components/common/icons/IconFile.tsx

@@ -0,0 +1,18 @@
+const IconFile = ({ className }: { className?: string }) => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M12.667 3.333v6H9.333v3.334h-6V3.333h9.334zm0-1.333H3.333C2.6 2 2 2.6 2 3.333v9.334C2 13.4 2.6 14 3.333 14H10l4-4V3.333C14 2.6 13.4 2 12.667 2zM8 9.333H4.667V8H8v1.333zm3.333-2.666H4.667V5.333h6.666v1.334z"
+        fill="#596782"
+      />
+    </svg>
+  );
+
+  export default IconFile;
+

packages/web/src/components/common/icons/IconNewTab.tsx

@@ -0,0 +1,19 @@
+const IconNewTab = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="17"
+    fill="none"
+    viewBox="0 0 16 17"
+    className={className}
+  >
+    <path
+      fill="#596782"
+      fillRule="evenodd"
+      d="M3.333 3.833v9.334h9.334V8.5H14v4.667c0 .733-.6 1.333-1.333 1.333H3.333C2.593 14.5 2 13.9 2 13.167V3.833C2 3.1 2.593 2.5 3.333 2.5H8v1.333H3.333zm6.16 0V2.5h4.667v4.667h-1.333V4.773l-6.554 6.554-.94-.94 6.554-6.554H9.493z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default IconNewTab;