Merge pull request #492 from arconnectio/staging

ArConnect 1.19.0
arconnectio · Oct 15, 2024 · 2e65fec · 2e65fec
2 parents bcc61a3 + 544e93d
commit 2e65fec
Show file tree

Hide file tree

Showing 19 changed files with 605 additions and 517 deletions.
diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json
@@ -435,6 +435,10 @@
     "message": "Currency",
     "description": "Reset settings title"
   },
+  "currency": {
+    "message": "Currency",
+    "description": "Select currency"
+  },
   "setting_dre_node": {
     "message": "Warp DRE node",
     "description": "Warp DRE node setting title"
@@ -2162,6 +2166,10 @@
     "message": "No transactions found",
     "description": "No transactions message"
   },
+  "no_contacts" : {
+    "message" : "No contacts found",
+    "description": "No contacts found"
+  },
   "sent": {
     "message": "Sent",
     "description": "sent"

diff --git a/assets/_locales/zh_CN/messages.json b/assets/_locales/zh_CN/messages.json
@@ -431,6 +431,10 @@
       "message": "货币",
       "description": "Reset settings title"
   },
+  "currency": {
+    "message": "货币",
+    "description": "Select currency"
+  },
   "setting_dre_node": {
       "message": "Warp DRE 节点",
       "description": "Warp DRE node setting title"
@@ -2148,6 +2152,10 @@
     "message": "未找到交易",
     "description": "No transactions message"
   },
+  "no_contacts": {
+    "message": "未找到联系人",
+    "description": "No contacts found message"
+  },
   "sent": {
     "message": "已发送",
     "description": "sent"

diff --git a/assets/ecosystem/quantum-logo.svg b/assets/ecosystem/quantum-logo.svg
diff --git a/src/components/Recipient.tsx b/src/components/Recipient.tsx
@@ -153,6 +153,8 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
     }, {} as Record<string, Contacts>);
   }, [storedContacts, targetInput.state]);
 
+  const hasContacts = Object.keys(filteredAndGroupedContacts).length > 0;
+
   return (
     <>
       <SearchBarWrapper>
@@ -200,29 +202,35 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
       </AddressesList>
       <ContactsSection>
         <SubText>{browser.i18n.getMessage("your_contacts")}</SubText>
-        {Object.keys(filteredAndGroupedContacts).map((letter) => (
-          <ContactList key={letter}>
-            <ContactAddress style={{ color: "white" }}>{letter}</ContactAddress>
-
-            {filteredAndGroupedContacts[letter].map((contact) => (
-              <ListItem
-                small
-                title={contact?.name}
-                description={formatAddress(contact.address)}
-                img={
-                  contact.profileIcon
-                    ? contact.profileIcon
-                    : generateProfileIcon(contact?.name || contact.address)
-                }
-                key={contact.address}
-                onClick={() => {
-                  onClick({ contact, address: contact.address });
-                  onClose();
-                }}
-              />
+        {hasContacts ? (
+          <div>
+            {Object.keys(filteredAndGroupedContacts).map((letter) => (
+              <ContactList key={letter}>
+                <ContactAddress>{letter}</ContactAddress>
+
+                {filteredAndGroupedContacts[letter].map((contact) => (
+                  <ListItem
+                    small
+                    title={contact?.name}
+                    description={formatAddress(contact.address)}
+                    img={
+                      contact.profileIcon
+                        ? contact.profileIcon
+                        : generateProfileIcon(contact?.name || contact.address)
+                    }
+                    key={contact.address}
+                    onClick={() => {
+                      onClick({ contact, address: contact.address });
+                      onClose();
+                    }}
+                  />
+                ))}
+              </ContactList>
             ))}
-          </ContactList>
-        ))}
+          </div>
+        ) : (
+          <NoContacts>{browser.i18n.getMessage("no_contacts")}</NoContacts>
+        )}
       </ContactsSection>
     </>
   );
@@ -233,6 +241,10 @@ const SearchBarWrapper = styled.div`
   gap: 4px;
 `;
 
+const NoContacts = styled(Text)`
+  padding: 11.2px 13.76px;
+`;
+
 const SubText = styled.h3`
   font-weight: 500;
   font-size: 1.25rem;
@@ -244,13 +256,17 @@ const ContactAddress = styled.div`
   color: #aeadcd;
 `;
 
-const Recents = styled.div`
+const Recents = styled.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   padding: 10px 4px;
   border-radius: 10px;
+  background: transparent;
+  border: 0;
+  color: inherit;
+
   &:hover {
     background-color: rgba(${(props) => props.theme.theme}, 0.12);
     cursor: pointer;

diff --git a/src/components/SliderMenu.tsx b/src/components/SliderMenu.tsx
@@ -1,48 +1,103 @@
-import { Button, type DisplayTheme } from "@arconnect/components";
+import { type DisplayTheme } from "@arconnect/components";
 import { CloseIcon } from "@iconicicons/react";
+import { AnimatePresence, motion, type Variants } from "framer-motion";
+import type React from "react";
+import { useRef } from "react";
 import styled, { useTheme } from "styled-components";
-import { SendInput } from "~routes/popup/send";
 
 interface SliderMenuProps {
   title: string;
+  isOpen: boolean;
   onClose?: () => void;
   children?: React.ReactNode;
 }
 
 export default function SliderMenu({
-  children,
   title,
-  onClose
+  isOpen,
+  onClose,
+  children
 }: SliderMenuProps) {
+  const wrapperElementRef = useRef<HTMLDivElement | null>(null);
   const theme = useTheme();
-  return (
-    <Wrapper displayTheme={theme.displayTheme}>
-      <Body>
-        <Header>
-          <Title>{title}</Title>
-          <ExitButton onClick={onClose} />
-        </Header>
-        {children}
-      </Body>
-    </Wrapper>
-  );
+
+  const contentElement = isOpen ? (
+    <>
+      <CloseLayer
+        key="SliderMenuCloseLayer"
+        exit={{ opacity: 0 }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.2 }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+      />
+
+      <Wrapper
+        displayTheme={theme.displayTheme}
+        ref={wrapperElementRef}
+        variants={animationSlideFromBottom}
+        initial="hidden"
+        animate="shown"
+        exit="hidden"
+      >
+        <Body>
+          <Header>
+            <Title>{title}</Title>
+            <ExitButton onClick={onClose} />
+          </Header>
+          {children}
+        </Body>
+      </Wrapper>
+    </>
+  ) : null;
+
+  return <AnimatePresence>{contentElement}</AnimatePresence>;
 }
 
 const ExitButton = styled(CloseIcon)`
   cursor: pointer;
 `;
 
-const Wrapper = styled.div<{ displayTheme: DisplayTheme }>`
+const Wrapper = styled(motion.div)<{ displayTheme: DisplayTheme }>`
   position: fixed;
+  bottom: 0;
+  left: 0;
+  height: auto;
+  max-height: 93%;
+  border-top: ${(props) =>
+    props.displayTheme === "light"
+      ? `1px solid ${props.theme.primary}`
+      : "none"};
   display: flex;
   flex-direction: column;
-  min-height: 100%;
-  padding-bottom: 62px;
   width: 100%;
+  z-index: 1000;
+  overflow: scroll;
   background-color: ${(props) =>
     props.displayTheme === "light" ? "#ffffff" : "#191919"};
+  border-radius: 10px 10px 0 0;
 `;
 
+export const animationSlideFromBottom: Variants = {
+  hidden: {
+    y: "100vh",
+    transition: {
+      duration: 0.2,
+      ease: "easeOut"
+    }
+  },
+  shown: {
+    y: "0",
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut"
+    }
+  }
+};
+
 const Body = styled.div`
   padding: 1.0925rem;
   display: flex;
@@ -55,6 +110,7 @@ const Header = styled.div`
   align-items: center;
   justify-content: space-between;
 `;
+
 const Title = styled.h2`
   margin: 0;
   padding: 0;
@@ -63,3 +119,16 @@ const Title = styled.h2`
   font-weight: 500;
   line-height: normal;
 `;
+
+export const CloseLayer = styled(motion.div)`
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  cursor: default;
+  background-color: rgba(${(props) => props.theme.background}, 0.85);
+`;