fix: toast ui and earn card position (#295)

gnoswap-labs · Dec 20, 2023 · 27fcb48 · 27fcb48
1 parent 7b4b96c
commit 27fcb48
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/packages/web/src/components/common/my-position-card-list/MyPositionCardList.styles.ts b/packages/web/src/components/common/my-position-card-list/MyPositionCardList.styles.ts
@@ -4,7 +4,7 @@ import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const CardListWrapper = styled.div`
-  ${mixins.flexbox("column", "center", "center")};
+  ${mixins.flexbox("column", "center", "start")};
   width: 100%;
   gap: 24px;
   min-height: 390px;

diff --git a/packages/web/src/components/common/notice/NoticeToast.styles.ts b/packages/web/src/components/common/notice/NoticeToast.styles.ts
@@ -19,7 +19,7 @@ const toastOutRightClose = keyframes`
     transform: translateX(0);
   }
   to {
-    transform: translateX(100%);
+    transform: translateX(150%);
   }
 `;
 

diff --git a/packages/web/src/components/common/notice/NoticeToast.tsx b/packages/web/src/components/common/notice/NoticeToast.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   INoticeContext,
   NoticeContext,
@@ -107,6 +107,7 @@ const FailContent: FC<{ content?: INoticeContent }> = ({ content }: { content?:
 };
 
 const NoticeUIItem: FC<NoticeProps> = ({ onClose, type = "success", id, content }) => {
+  const isClosed = useRef(false);
   const [typeAnimation, setTypeAnimation] = useState<
     "toast-item" | "closing" | ""
   >("toast-item");
@@ -116,6 +117,7 @@ const NoticeUIItem: FC<NoticeProps> = ({ onClose, type = "success", id, content
     const timeout = setTimeout(() => {
       onClose?.(id);
       setTypeAnimation("");
+      isClosed.current = true;
     }, 500);
     return () => clearTimeout(timeout);
   }, [onClose]);
@@ -124,7 +126,7 @@ const NoticeUIItem: FC<NoticeProps> = ({ onClose, type = "success", id, content
     const autoCloseTimeout = setTimeout(() => {
       setTypeAnimation("closing");
       const animationTimeout = setTimeout(() => {
-        onClose?.(id);
+        if (isClosed.current === false) onClose?.(id);
       }, 500);
       return () => clearTimeout(animationTimeout);
     }, 6000);

diff --git a/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx b/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx
@@ -79,7 +79,7 @@ const IncentivizedPoolCard: React.FC<IncentivizedPoolCardProps> = ({
                 <span className="label-text">{POOL_CONTENT_TITLE.APR}</span>
               </div>
               <div className="list-content">
-                <span className="value-text">{pool.liquidity}</span>
+                <span className="value-text">${pool.liquidity}</span>
                 <span className="value-text">{pool.apr}</span>
               </div>
             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ const toastOutRightClose = keyframes` @@
         transform: translateX(0);
       }
       to {
-        transform: translateX(100%);
+        transform: translateX(150%);
       }
     `;
@@ Expand Down @@