ArConnect 1.9.0

assets/_locales/en/messages.json

@@ -324,7 +324,7 @@
     "description": "Remove app button"
   },
   "removeAppNote": {
-    "message": "This will remove all permissions from the app and disconnect it from ArConnect.",
+    "message": "Remove all permissions and disconnect the app from ArConnect.",
     "description": "Remove app note paragraph"
   },
   "remove": {
@@ -517,6 +517,10 @@
       }
     }
   },
+  "copied_address_2": {
+    "message": "address copied",
+    "description": "Address copy notification 2"
+  },
   "cannot_edit_with_ans": {
     "message": "Cannot edit nickname. Wallet already has an ANS label.",
     "description": "Explainer for disabled edits for wallets with ANS profiles"
@@ -542,7 +546,7 @@
     "description": "Password input placeholder"
   },
   "enter_password_again": {
-    "message": "Re-enter your passwor...",
+    "message": "Re-enter your password...",
     "description": "Re-enter password input placeholder"
   },
   "passwords_match": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "arconnect",
   "displayName": "ArConnect",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "[email protected]",
@@ -47,7 +47,7 @@
     ]
   },
   "dependencies": {
-    "@arconnect/components": "^0.2.8",
+    "@arconnect/components": "^0.3.7",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",
     "@arconnect/webext-bridge": "^5.0.6",

src/components/IconButton.tsx

@@ -1,9 +1,11 @@
 import styled, { css, keyframes } from "styled-components";
-import { Button } from "@arconnect/components";
+import { ButtonV2 } from "@arconnect/components";
 
-export const IconButton = styled(Button)`
+export const IconButton = styled(ButtonV2)`
   padding: 1.2rem;
   transition: all 0.23s ease-in-out;
+  height: 52px;
+  width: 100px;
 `;
 
 export const RefreshButton = styled(IconButton)<{ refreshing: boolean }>`

src/components/Recipient.tsx

@@ -1,4 +1,10 @@
-import { useInput, Text, Button, Input } from "@arconnect/components";
+import {
+  useInput,
+  Text,
+  ButtonV2,
+  ListItem,
+  InputV2
+} from "@arconnect/components";
 import { ChevronDownIcon, ChevronUpIcon } from "@iconicicons/react";
 import { useStorage } from "@plasmohq/storage/hook";
 import { useMemo, useState } from "react";
@@ -125,9 +131,8 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
   return (
     <>
       <SearchBarWrapper>
-        <Input
+        <InputV2
           small
-          alternative={true}
           {...targetInput.bindings}
           type="text"
           placeholder={browser.i18n.getMessage(
@@ -140,15 +145,14 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
               return;
           }}
         />
-        <Button
-          small
+        <ButtonV2
           style={{ borderRadius: "10px", width: "56px", padding: 0 }}
           onClick={() => {
             submit();
           }}
         >
           {browser.i18n.getMessage("add")}
-        </Button>
+        </ButtonV2>
       </SearchBarWrapper>
       <AddressesList>
         <Recents onClick={() => setShow(!show)}>
@@ -175,28 +179,21 @@ export default function Recipient({ onClick, onClose }: RecipientProps) {
             <ContactAddress style={{ color: "white" }}>{letter}</ContactAddress>
 
             {filteredAndGroupedContacts[letter].map((contact) => (
-              <ContactItem
+              <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();
                 }}
-              >
-                {contact.profileIcon ? (
-                  <ProfilePicture src={contact.profileIcon} alt="Profile" />
-                ) : (
-                  <AutoContactPic>
-                    {generateProfileIcon(contact?.name || contact.address)}
-                  </AutoContactPic>
-                )}
-
-                <div>
-                  <Name>{contact?.name}</Name>
-                  <ContactAddress>
-                    {formatAddress(contact.address)}
-                  </ContactAddress>
-                </div>
-              </ContactItem>
+              />
             ))}
           </ContactList>
         ))}

src/components/arlocal/InputWrapper.tsx

@@ -1,16 +1,15 @@
 import { IconButton } from "~components/IconButton";
-import { Button } from "@arconnect/components";
+import { ButtonV2 } from "@arconnect/components";
 import styled from "styled-components";
 
 export const InputWithBtn = styled.div`
   display: flex;
   align-items: flex-end;
   gap: 0.8rem;
 
-  ${Button} {
+  ${ButtonV2} {
     padding-top: 0.9rem;
     padding-bottom: 0.9rem;
-    border-radius: 18px;
   }
 
   ${IconButton} {

src/components/arlocal/Mint.tsx

@@ -1,6 +1,6 @@
 import {
-  Button,
-  Input,
+  ButtonV2 as Button,
+  InputV2 as Input,
   Text,
   useInput,
   useToasts
@@ -70,7 +70,7 @@ export default function Mint({ arweave }: Props) {
             fullWidth
           />
         </InputWrapper>
-        <Button secondary onClick={mint}>
+        <Button secondary onClick={mint} style={{ height: "52px" }}>
           {browser.i18n.getMessage("mint")}
         </Button>
       </InputWithBtn>

src/components/arlocal/Transaction.tsx

@@ -9,8 +9,8 @@ import { readFileBinary } from "~utils/file";
 import { useRef, useState } from "react";
 import { unlock } from "~wallets/auth";
 import {
-  Button,
-  Input,
+  ButtonV2 as Button,
+  InputV2 as Input,
   Spacer,
   useInput,
   Text,
@@ -289,7 +289,7 @@ export default function Transaction({ arweave }: Props) {
               secondary
               onClick={() => setTags((val) => val.filter((_, j) => j !== i))}
             >
-              <TrashIcon />
+              <TrashIcon /> Trash
             </IconButton>
           </InputWithBtn>
           <Spacer y={1} />

src/components/arlocal/Tutorial.tsx

@@ -1,4 +1,9 @@
-import { Input, type InputStatus, Spacer, Text } from "@arconnect/components";
+import {
+  InputV2 as Input,
+  type InputStatus,
+  Spacer,
+  Text
+} from "@arconnect/components";
 import { InputWithBtn, InputWrapper } from "./InputWrapper";
 import { IconButton } from "~components/IconButton";
 import { CopyIcon } from "@iconicicons/react";

src/components/dashboard/Applications.tsx

@@ -82,11 +82,12 @@ export default function Applications() {
 
   return (
     <Wrapper>
-      <SearchInput
-        placeholder={browser.i18n.getMessage("search_apps")}
-        {...searchInput.bindings}
-        sticky
-      />
+      <SearchWrapper>
+        <SearchInput
+          placeholder={browser.i18n.getMessage("search_apps")}
+          {...searchInput.bindings}
+        />
+      </SearchWrapper>
       <Spacer y={1} />
       <SettingsList>
         {apps.filter(filterSearchResults).map((app, i) => (
@@ -117,6 +118,15 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
+const SearchWrapper = styled.div`
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background-color: rgb(${(props) => props.theme.cardBackground});
+`;
+
 const NoAppsText = styled(Text)`
   text-align: center;
   padding-top: 0.5rem;

src/components/dashboard/Contacts.tsx

@@ -1,4 +1,4 @@
-import { Spacer, useInput } from "@arconnect/components";
+import { ButtonV2, Spacer, useInput } from "@arconnect/components";
 import React, { useState, useEffect, useMemo } from "react";
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
@@ -8,7 +8,6 @@ import { useLocation, useRoute } from "wouter";
 import browser from "webextension-polyfill";
 import SearchInput from "./SearchInput";
 import styled from "styled-components";
-import { IconButton } from "~components/IconButton";
 import { formatAddress } from "~utils/format";
 import { multiSort } from "~utils/multi_sort";
 import { enrichContact } from "~contacts/hooks";
@@ -200,21 +199,16 @@ const LetterHeader = styled.div`
 const SearchWrapper = styled.div`
   position: sticky;
   display: grid;
-  gap: 5px;
+  gap: 8px;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
   grid-template-columns: auto auto;
+  background-color: rgb(${(props) => props.theme.cardBackground});
 `;
 
-const AddContactButton = styled(IconButton).attrs({
-  secondary: true
-})`
-  background: linear-gradient(
-      0deg,
-      rgba(${(props) => props.theme.theme}, 0.2),
-      rgba(${(props) => props.theme.theme}, 0.2)
-    ),
-    rgb(${(props) => props.theme.background});
+const AddContactButton = styled(ButtonV2)`
+  width: 100%;
+  height: 100%;
 `;

src/components/dashboard/Reset.tsx

@@ -1,15 +1,17 @@
 import {
   Text,
   Spacer,
-  Button,
+  ButtonV2,
   useModal,
-  Modal,
-  useToasts
+  ModalV2,
+  useToasts,
+  type DisplayTheme
 } from "@arconnect/components";
 import { ExtensionStorage } from "~utils/storage";
 import { TrashIcon } from "@iconicicons/react";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
+import { useTheme } from "~utils/theme";
 
 export default function Reset() {
   // reset modal
@@ -18,6 +20,8 @@ export default function Reset() {
   // toasts
   const { setToast } = useToasts();
 
+  const theme = useTheme();
+
   // reset ArConnect
   async function reset() {
     try {
@@ -58,23 +62,28 @@ export default function Reset() {
         <b>{browser.i18n.getMessage("irreversible_action")}</b>
       </Warning>
       <Spacer y={4} />
-      <ResetButton onClick={() => resetModal.setOpen(true)}>
-        <TrashIcon />
+      <ResetButton
+        displayTheme={theme}
+        onClick={() => resetModal.setOpen(true)}
+      >
+        <TrashIcon style={{ marginRight: "5px" }} />
         {browser.i18n.getMessage("reset")}
       </ResetButton>
-      <Modal
+      <ModalV2
         {...resetModal.bindings}
         root={document.getElementById("__plasmo")}
+        actions={
+          <ResetButton displayTheme={theme} onClick={reset}>
+            {browser.i18n.getMessage("confirm")}
+          </ResetButton>
+        }
       >
         <ModalText heading>{browser.i18n.getMessage("reset")}</ModalText>
         <ModalText>
           {browser.i18n.getMessage("setting_reset_description")}
         </ModalText>
         <Spacer y={0.75} />
-        <ResetButton onClick={reset}>
-          {browser.i18n.getMessage("confirm")}
-        </ResetButton>
-      </Modal>
+      </ModalV2>
     </>
   );
 }
@@ -83,15 +92,16 @@ const Warning = styled(Text)`
   color: #ff0000;
 `;
 
-const ResetButton = styled(Button).attrs({
+const ResetButton = styled(ButtonV2).attrs({
   secondary: true,
   fullWidth: true
-})`
-  background-color: rgba(255, 0, 0, 0.2);
-  color: #ff0000;
+})<{ displayTheme: DisplayTheme }>`
+  background-color: ${(props) => props.theme.delete};
+  border: 1.5px solid ${(props) => props.theme.fail};
+  color: #ffffff;
 
-  &:hover:not(:active):not(:disabled) {
-    box-shadow: 0 0 0 0.19rem rgb(255, 0, 0, 0.2);
+  &:hover {
+    background-color: ${(props) => props.theme.secondaryDelete};
   }
 `;