style(suite): Style remove contact confirmation

trezor · Dec 12, 2024 · 72a265f · 72a265f
1 parent 94e96d4
commit 72a265f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 98 deletions.
diff --git a/packages/suite/src/views/contacts/RemoveContactConfirmation.tsx b/packages/suite/src/views/contacts/RemoveContactConfirmation.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { NewModal } from '@trezor/components';
+import { contactsActions } from '@suite-common/contacts/src/redux/contactsActions';
+import { Contact } from '@suite-common/contacts';
+
+import { useDispatch } from '../../hooks/suite';
+
+type RemoveContactConfirmationProps = {
+    onClose: () => void;
+    contact: Contact;
+};
+
+export const RemoveContactConfirmation = ({ onClose, contact }: RemoveContactConfirmationProps) => {
+    const dispatch = useDispatch();
+
+    const onRemoveContact = () => {
+        dispatch(contactsActions.removeContact(contact));
+        onClose();
+    };
+
+    return (
+        <NewModal
+            onCancel={onClose}
+            iconName="warningFilled"
+            variant="destructive"
+            size="small"
+            bottomContent={
+                <>
+                    <NewModal.Button variant="destructive" onClick={onRemoveContact}>
+                        Remove
+                    </NewModal.Button>
+                    <NewModal.Button variant="tertiary" onClick={onClose}>
+                        Close
+                    </NewModal.Button>
+                </>
+            }
+        >
+            Are you sure you want to remove the contact?
+        </NewModal>
+    );
+};
diff --git a/packages/suite/src/views/contacts/index.tsx b/packages/suite/src/views/contacts/index.tsx
@@ -5,18 +5,14 @@ import { Banner, Button, Row } from '@trezor/components';
 import { selectDevice } from '@suite-common/wallet-core';
 import { TrezorDevice } from '@suite-common/suite-types';
 import { spacings } from '@trezor/theme';
-import {
-    Contact,
-    contactsActions,
-    findContact,
-    selectContactsForDevice,
-} from '@suite-common/contacts';
+import { Contact, findContact, selectContactsForDevice } from '@suite-common/contacts';
 
-import { useDispatch, useSelector } from 'src/hooks/suite';
+import { useSelector } from 'src/hooks/suite';
 
 import { SettingsLayout } from '../../components/settings';
 import { AddNewContactModal } from './AddNewContactModal';
 import { ContactList } from './ContactList';
+import { RemoveContactConfirmation } from './RemoveContactConfirmation';
 
 const FindContactButton = ({ contacts }: { contacts: Contact[] }) => {
     const handleClick = async () => {
@@ -71,18 +67,16 @@ const GetMyPubkeyButton = () => {
 
 const Contacts = ({ device }: { device: TrezorDevice }) => {
     const contacts = useSelector(selectContactsForDevice(device));
-    const dispatch = useDispatch();
+
     const [isAddNewContactModalVisible, setAddNewContactModalVisible] = useState(false);
+    const [contactToRemove, setContactToRemove] = useState<Contact | null>(null);
 
     const onAdd = () => {
         setAddNewContactModalVisible(true);
     };
 
     const removeContact = (contact: Contact) => {
-        const confirmed = confirm('Do you want to remove this contact?');
-        if (confirmed) {
-            dispatch(contactsActions.removeContact(contact));
-        }
+        setContactToRemove(contact);
     };
 
     return (
@@ -109,6 +103,12 @@ const Contacts = ({ device }: { device: TrezorDevice }) => {
             {isAddNewContactModalVisible && (
                 <AddNewContactModal onClose={() => setAddNewContactModalVisible(false)} />
             )}
+            {contactToRemove && (
+                <RemoveContactConfirmation
+                    contact={contactToRemove}
+                    onClose={() => setContactToRemove(null)}
+                />
+            )}
         </>
     );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -12621,7 +12621,6 @@ __metadata:
     "@types/semver": "npm:^7.5.8"
     "@types/ua-parser-js": "npm:^0.7.39"
     "@types/zxcvbn": "npm:^4.4.4"
-    bitcoinjs-message: "npm:^2.2.0"
     bs58check: "npm:^4.0.0"
     date-fns: "npm:^2.30.0"
     dropbox: "npm:^10.34.0"
@@ -16513,7 +16512,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bech32@npm:^1.1.3, bech32@npm:^1.1.4":
+"bech32@npm:^1.1.4":
   version: 1.1.4
   resolution: "bech32@npm:1.1.4"
   checksum: 10/63ff37c0ce43be914c685ce89700bba1589c319af0dac1ea04f51b33d0e5ecfd40d14c24f527350b94f0a4e236385373bb9122ec276410f354ddcdbf29ca13f4
@@ -16615,15 +16614,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bip66@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "bip66@npm:1.1.5"
-  dependencies:
-    safe-buffer: "npm:^5.0.1"
-  checksum: 10/6257e90ff2149aa08740ff4009730c1bceb1a3456571d3006a36b39f30044f2973e05f043ea6977046d6ab66e4a8d6f5c9785094f8317f4ff546a325baece1ab
-  languageName: node
-  linkType: hard
-
 "bip66@npm:^2.0.0":
   version: 2.0.0
   resolution: "bip66@npm:2.0.0"
@@ -16638,20 +16628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bitcoinjs-message@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "bitcoinjs-message@npm:2.2.0"
-  dependencies:
-    bech32: "npm:^1.1.3"
-    bs58check: "npm:^2.1.2"
-    buffer-equals: "npm:^1.0.3"
-    create-hash: "npm:^1.1.2"
-    secp256k1: "npm:^3.0.1"
-    varuint-bitcoin: "npm:^1.0.1"
-  checksum: 10/715ee436857f74455750700210060a775047bffb894276387faf07aafaac76a8446b750352c456126069042d1ce1324e0d45b1e3d9683fb810c4f1866402a6d5
-  languageName: node
-  linkType: hard
-
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -16910,7 +16886,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserify-aes@npm:^1.0.0, browserify-aes@npm:^1.0.4, browserify-aes@npm:^1.0.6":
+"browserify-aes@npm:^1.0.0, browserify-aes@npm:^1.0.4":
   version: 1.2.0
   resolution: "browserify-aes@npm:1.2.0"
   dependencies:
@@ -17060,7 +17036,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bs58check@npm:2.1.2, bs58check@npm:^2.1.2":
+"bs58check@npm:2.1.2":
   version: 2.1.2
   resolution: "bs58check@npm:2.1.2"
   dependencies:
@@ -17142,13 +17118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-equals@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "buffer-equals@npm:1.0.4"
-  checksum: 10/392a2f82acdaad46392aec7ce54a8ff0b2a650b5802ccb0c77072050bbc7fd4e101f38460c7e88cdc7e130421882977f595d5c1a3d3343611562ecf7c684a70f
-  languageName: node
-  linkType: hard
-
 "buffer-fill@npm:^1.0.0":
   version: 1.0.0
   resolution: "buffer-fill@npm:1.0.0"
@@ -20862,17 +20831,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"drbg.js@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "drbg.js@npm:1.0.1"
-  dependencies:
-    browserify-aes: "npm:^1.0.6"
-    create-hash: "npm:^1.1.2"
-    create-hmac: "npm:^1.1.4"
-  checksum: 10/a50e770cf641ec364f6b8de8e955c63e0db59f0af6525cc0306f392f4361427e37bf5c74373b31589b24e98d523acc7bbab4c8ee421bc35a2a8a82fe6e06ce95
-  languageName: node
-  linkType: hard
-
 "dropbox@npm:^10.34.0":
   version: 10.34.0
   resolution: "dropbox@npm:10.34.0"
@@ -21105,21 +21063,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"elliptic@npm:^6.5.7":
-  version: 6.6.1
-  resolution: "elliptic@npm:6.6.1"
-  dependencies:
-    bn.js: "npm:^4.11.9"
-    brorand: "npm:^1.1.0"
-    hash.js: "npm:^1.0.0"
-    hmac-drbg: "npm:^1.0.1"
-    inherits: "npm:^2.0.4"
-    minimalistic-assert: "npm:^1.0.1"
-    minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10/dc678c9febd89a219c4008ba3a9abb82237be853d9fd171cd602c8fb5ec39927e65c6b5e7a1b2a4ea82ee8e0ded72275e7932bb2da04a5790c2638b818e4e1c5
-  languageName: node
-  linkType: hard
-
 "emittery@npm:^0.13.1":
   version: 0.13.1
   resolution: "emittery@npm:0.13.1"
@@ -37786,23 +37729,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"secp256k1@npm:^3.0.1":
-  version: 3.8.1
-  resolution: "secp256k1@npm:3.8.1"
-  dependencies:
-    bindings: "npm:^1.5.0"
-    bip66: "npm:^1.1.5"
-    bn.js: "npm:^4.11.8"
-    create-hash: "npm:^1.2.0"
-    drbg.js: "npm:^1.0.1"
-    elliptic: "npm:^6.5.7"
-    nan: "npm:^2.14.0"
-    node-gyp: "npm:latest"
-    safe-buffer: "npm:^5.1.2"
-  checksum: 10/dfe9621aea56268878ed384cbf8aac55ad7d3a887816d6e130d202ad679a25546f0079b22ab462f605c30668733e6b7676e4e77c63542d6fc45a7a5ad9ebb3f4
-  languageName: node
-  linkType: hard
-
 "section-matter@npm:^1.0.0":
   version: 1.0.0
   resolution: "section-matter@npm:1.0.0"
@@ -41818,15 +41744,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"varuint-bitcoin@npm:^1.0.1":
-  version: 1.1.2
-  resolution: "varuint-bitcoin@npm:1.1.2"
-  dependencies:
-    safe-buffer: "npm:^5.1.1"
-  checksum: 10/1c900bf08f2408ae33a6094dc5d809bdb6673eaf6039062d88c230155873e51e29c760053611f93ccd024854d04ebd92ed95c744720e94a79ca4e1150fcce071
-  languageName: node
-  linkType: hard
-
 "vary@npm:^1, vary@npm:^1.1.2, vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"