refactor: Redesign quai activity list and quai activity details

PelagusWallet · Nov 19, 2024 · 3722ab0 · 3722ab0
1 parent 4603aa3
commit 3722ab0
Show file tree

Hide file tree

Showing 14 changed files with 554 additions and 679 deletions.
diff --git a/background/redux-slices/utils/activities-utils.ts b/background/redux-slices/utils/activities-utils.ts
@@ -278,7 +278,7 @@ export async function getActivityDetails(
     { label: "Amount", value: getAmount(tx) ?? "" },
     { label: "Miner Tip", value: getGweiPrice(minerTip) },
     { label: "Gas Price", value: getGweiPrice(gasPrice) },
-    { label: "Gas", value: gasUsed ? gasUsed.toString() : "(Unknown)" },
+    { label: "Gas", value: gasUsed ? gasUsed.toString() : "" },
     { label: "Nonce", value: String(nonce) },
     { label: "Timestamp", value: getTimestamp(annotation?.blockTimestamp) },
     { label: "Hash", value: hash },

diff --git a/ui/_locales/en/messages.json b/ui/_locales/en/messages.json
@@ -449,7 +449,7 @@
       "contractInteraction": "Contract Interaction",
       "externalReceived": "External Receive",
       "externalSend": "External Send",
-      "tokenReceived": "Received",
+      "tokenReceived": "Receive",
       "tokenConvert": "Convert",
       "tokenSent": "Send",
       "infiniteApproval": "Infinite",

diff --git a/ui/components/Shared/SharedAssetItem.tsx b/ui/components/Shared/SharedAssetItem.tsx
@@ -69,7 +69,11 @@ export default function SharedAssetItem<T extends AnyAsset>(
             />
 
             <div className="left_content">
-              <div className="symbol ellipsis" title={asset.symbol}>
+              <div
+                className="symbol ellipsis"
+                title={asset.symbol}
+                style={{ color: "var(--green-60)" }}
+              >
                 {asset.symbol}
               </div>
               <div className="token_subtitle ellipsis" title={asset.name}>

diff --git a/ui/components/Shared/SharedLoadingSpinner.tsx b/ui/components/Shared/SharedLoadingSpinner.tsx
@@ -4,7 +4,7 @@ import { assertUnreachable } from "@pelagus/pelagus-background/lib/utils/type-gu
 
 type SharedLoadingSpinnerProps = {
   size: "small" | "medium"
-  variant?: "hunter-green" | "dark-green" | "transparent"
+  variant?: "hunter-green" | "dark-green" | "transparent" | "gray"
 }
 
 function getVariantStyles(
@@ -25,6 +25,10 @@ function getVariantStyles(
       styles = ["var(--green-20)", "transparent"]
       break
 
+    case "gray":
+      styles = ["var(--tertiary-bg)", "var(--secondary-text)"]
+      break
+
     default:
       assertUnreachable(variant)
   }

diff --git a/ui/components/Shared/_newDeisgn/modalWrapper/SharedModalHeaders.tsx b/ui/components/Shared/_newDeisgn/modalWrapper/SharedModalHeaders.tsx
@@ -7,6 +7,7 @@ const SharedModalHeaders = ({
   linkTo,
   onClose,
   onBack,
+  withGoBackIcon = true,
 }: {
   title: string
   linkTo?:
@@ -19,22 +20,25 @@ const SharedModalHeaders = ({
     | string
   onClose?: () => void
   onBack?: () => void
+  withGoBackIcon?: boolean
 }) => {
   return (
     <>
       <header className="header_wrapper">
-        <GoBackIcon
-          style={{
-            position: "absolute",
-            left: "0",
-            top: "50%",
-            transform: "translateY(-50%)",
-            cursor: "pointer",
-          }}
-          fillColor="var(--secondary-text)"
-          linkTo={linkTo}
-          onClick={onBack ?? onClose}
-        />
+        {withGoBackIcon && (
+          <GoBackIcon
+            style={{
+              position: "absolute",
+              left: "0",
+              top: "50%",
+              transform: "translateY(-50%)",
+              cursor: "pointer",
+            }}
+            fillColor="var(--secondary-text)"
+            linkTo={linkTo}
+            onClick={onBack ?? onClose}
+          />
+        )}
         <h2>{title}</h2>
         <CrossIcon
           style={{

diff --git a/ui/components/Shared/_newDeisgn/modalWrapper/SharedModalWrapper.tsx b/ui/components/Shared/_newDeisgn/modalWrapper/SharedModalWrapper.tsx
@@ -27,6 +27,8 @@ export default function SharedModalWrapper({
     }
   }
 
+  if (!isOpen) return <></>
+
   return (
     <>
       <div

diff --git a/ui/components/Snackbar/OnClickModals/SnackbarTransactionActivityModal.tsx b/ui/components/Snackbar/OnClickModals/SnackbarTransactionActivityModal.tsx
@@ -9,8 +9,9 @@ import {
   selectShowingActivityDetail,
 } from "@pelagus/pelagus-background/redux-slices/selectors"
 import WalletActivityDetails from "../../Wallet/WalletActivityDetails"
-import SharedSlideUpMenu from "../../Shared/SharedSlideUpMenu"
 import { useBackgroundSelector } from "../../../hooks"
+import SharedModalHeaders from "../../Shared/_newDeisgn/modalWrapper/SharedModalHeaders"
+import SharedModalWrapper from "../../Shared/_newDeisgn/modalWrapper/SharedModalWrapper"
 
 const SnackbarTransactionActivityModal = ({
   setIsOpenActivityDetails,
@@ -24,22 +25,34 @@ const SnackbarTransactionActivityModal = ({
   )
 
   const currentAddress = useBackgroundSelector(selectCurrentAccount).address
+
+  const handleClose = async () => {
+    dispatch(setShowingActivityDetail(null))
+    dispatch(resetSnackbarConfig())
+    setIsOpenActivityDetails(false)
+  }
+
   return (
-    <SharedSlideUpMenu
+    <SharedModalWrapper
+      footer={<></>}
+      header={
+        <SharedModalHeaders
+          title="Review Transaction"
+          onClose={handleClose}
+          withGoBackIcon={false}
+        />
+      }
       isOpen={!!showingActivityDetail}
-      close={() => {
-        dispatch(setShowingActivityDetail(null))
-        dispatch(resetSnackbarConfig())
-        setIsOpenActivityDetails(false)
-      }}
+      onClose={handleClose}
+      customStyles={{ alignItems: "flex-end" }}
     >
       {showingActivityDetail && (
         <WalletActivityDetails
           activityItem={showingActivityDetail}
           activityInitiatorAddress={currentAddress}
         />
       )}
-    </SharedSlideUpMenu>
+    </SharedModalWrapper>
   )
 }
 

diff --git a/ui/components/Wallet/UnverifiedAsset/AssetWarningWrapper.tsx b/ui/components/Wallet/UnverifiedAsset/AssetWarningWrapper.tsx
@@ -6,6 +6,8 @@ import SharedSlideUpMenu from "../../Shared/SharedSlideUpMenu"
 import WalletActivityDetails from "../WalletActivityDetails"
 import AssetWarning from "./AssetWarning"
 import { useBackgroundSelector } from "../../../hooks"
+import SharedModalHeaders from "../../Shared/_newDeisgn/modalWrapper/SharedModalHeaders"
+import SharedModalWrapper from "../../Shared/_newDeisgn/modalWrapper/SharedModalWrapper"
 
 type AssetWarningWrapperProps = {
   asset: SmartContractFungibleAsset | null
@@ -29,6 +31,11 @@ export default function AssetWarningWrapper(
     setShowAssetWarning(!!asset)
   }, [asset])
 
+  const handleCloseTxDetailsModal = () => {
+    setActivityItem(undefined)
+    setShowAssetWarning(true)
+  }
+
   return (
     <>
       <SharedSlideUpMenu
@@ -48,21 +55,26 @@ export default function AssetWarningWrapper(
         )}
       </SharedSlideUpMenu>
 
-      <SharedSlideUpMenu
+      <SharedModalWrapper
+        footer={<></>}
+        header={
+          <SharedModalHeaders
+            title="Review Transaction"
+            onClose={handleCloseTxDetailsModal}
+            withGoBackIcon={false}
+          />
+        }
         isOpen={!!activityItem}
-        size="custom"
-        close={() => {
-          setActivityItem(undefined)
-          setShowAssetWarning(true)
-        }}
+        onClose={handleCloseTxDetailsModal}
+        customStyles={{ alignItems: "flex-end" }}
       >
         {activityItem && (
           <WalletActivityDetails
             activityItem={activityItem}
             activityInitiatorAddress={activityInitiatorAddress}
           />
         )}
-      </SharedSlideUpMenu>
+      </SharedModalWrapper>
     </>
   )
 }