From 91568080bfe0e19ef997515fb3eb2b93f1cb640e Mon Sep 17 00:00:00 2001
From: Cryptosaka <79313706+Cryptosaka@users.noreply.github.com>
Date: Wed, 11 Sep 2024 23:22:56 +0200
Subject: [PATCH 1/3] Added Address book modal to settings

---
 .../src/components/UI/modals/AddressBook.tsx  | 104 ++++++++++++++++++
 .../components/UI/sidebar/NetworkSettings.tsx |  20 ++++
 packages/renderer/src/tools/utils.ts          |  54 +++++++++
 3 files changed, 178 insertions(+)
 create mode 100644 packages/renderer/src/components/UI/modals/AddressBook.tsx

diff --git a/packages/renderer/src/components/UI/modals/AddressBook.tsx b/packages/renderer/src/components/UI/modals/AddressBook.tsx
new file mode 100644
index 00000000..a940c989
--- /dev/null
+++ b/packages/renderer/src/components/UI/modals/AddressBook.tsx
@@ -0,0 +1,104 @@
+import {useEffect, useState} from 'react';
+import Button from '../Button';
+import {getAddresses, removeAddress, saveNewAddress, trimMiddle} from '/@/tools';
+import {toast} from 'react-toastify';
+import Input from '../input/Input';
+
+export default function AddressBook() {
+  const [showAdd, setShowAdd] = useState(false);
+  const [address, setAddress] = useState('');
+  const [alias, setAlias] = useState('');
+  const [addressBook, setAddressBook] = useState([]);
+
+  useEffect(() => {
+    readFromStorage();
+  }, []);
+
+  const readFromStorage = () => {
+    const addresses = getAddresses();
+    setAddressBook(addresses);
+  };
+
+  const saveAddress = () => {
+    if (!address) {
+      return toast.error('Please enter address and alias');
+    }
+    saveNewAddress(address, alias);
+    setShowAdd(false);
+    readFromStorage();
+  };
+
+  const deleteAddress = (address: string) => {
+    removeAddress(address);
+    readFromStorage();
+  };
+
+  return (
+    <div style={{width: '500px'}}>
+      <div className="w-100">
+        <div className="flex flex-col flex-vertical-center">
+          <h1 className="mb-0">Address book</h1>
+          <div className="divider w-100" />
+        </div>
+      </div>
+      <div className="address-book-container">
+        {addressBook.length > 0 ? (
+          addressBook.map(({address, alias}) => (
+            <div
+              key={address}
+              className="address-book-item"
+            >
+              <div className="flex flex-row justify-between ">
+                <div className="flex flex-col">
+                  <p className="mb-0">{alias}</p>
+                  <p className="small-text">{trimMiddle(address, 30)}</p>
+                </div>
+                <div className="flex flex-row gap-2">
+                  <Button
+                    text="Delete"
+                    onClick={() => deleteAddress(address)}
+                  />
+                </div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="address-book-item">
+            <div>No addresses</div>
+          </div>
+        )}
+      </div>
+      {showAdd ? (
+        <div className="address-book-item">
+          <p>Address</p>
+          <Input
+            type="text"
+            value={address}
+            inputHandler={e => {
+              setAddress(e.target.value);
+            }}
+          />
+          <p>Alias</p>
+          <Input
+            type="text"
+            value={alias}
+            inputHandler={e => {
+              setAlias(e.target.value);
+            }}
+          />
+          <Button
+            style="primary"
+            text="Save"
+            onClick={saveAddress}
+          />
+        </div>
+      ) : (
+        <Button
+          style="primary"
+          text="Add new"
+          onClick={() => setShowAdd(true)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx b/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx
index 085a6978..1cfe4c11 100644
--- a/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx
+++ b/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx
@@ -6,6 +6,7 @@ import Button from '../Button';
 import {useNetworkSettingsContext} from '/@/contexts/NetworkContext';
 import {useNavigate} from 'react-router-dom';
 import BackupWallet from '../modals/BackupWallet';
+import AddressBook from '../modals/AddressBook';
 import {INetworkData} from '/@/types';
 import {getPassphrase} from '/@/tools';
 import {useRecoilState} from 'recoil';
@@ -31,8 +32,10 @@ export default function NetworkSettings({
    * Show private key backup modal
    */
   const toggleBackupModal = () => setShowBackupModal(!showBackupModal);
+  const toggleAddressBookModal = () => setShowAddressBookModal(!showAddressBookModal);
 
   const [showBackupModal, setShowBackupModal] = useState(false);
+  const [showAddressBookModal, setShowAddressBookModal] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [storedPassphrase, setStoredPassphrase] = useState('');
   const {settings, saveSettings, availableNetworks} = useNetworkSettingsContext();
@@ -99,6 +102,16 @@ export default function NetworkSettings({
               <label className="text-start">Connected zkapps</label>
               <ConnectedZkapps />
             </div>
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-row gap-4 justify-between">
+                <label className="text-start">Address book</label>
+                <Button
+                  onClick={toggleAddressBookModal}
+                  text="Show"
+                  className="link-button custom-delegate-button purple-text align-end  no-padding"
+                />
+              </div>
+            </div>
             {!hideBackup && storedPassphrase && (
               <div className="flex flex-col gap-2">
                 <div className="flex flex-row gap-4 justify-between">
@@ -158,6 +171,13 @@ export default function NetworkSettings({
         <ModalContainer show={showBackupModal}>
           <BackupWallet closeModal={toggleBackupModal} />
         </ModalContainer>
+        <ModalContainer
+          show={showAddressBookModal}
+          close={toggleAddressBookModal}
+          closeOnBackgroundClick
+        >
+          <AddressBook />
+        </ModalContainer>
       </ModalContainer>
     </>
   );
diff --git a/packages/renderer/src/tools/utils.ts b/packages/renderer/src/tools/utils.ts
index eb87a0ae..6be0b41e 100644
--- a/packages/renderer/src/tools/utils.ts
+++ b/packages/renderer/src/tools/utils.ts
@@ -349,3 +349,57 @@ export async function signTransaction(privateKey: string, params: unknown) {
   }
   return signResult;
 }
+
+export const saveNewAddress = (address: string, alias: string) => {
+  try {
+    const addresses = localStorage.getItem('addresses');
+    if (addresses) {
+      const addressesArray = JSON.parse(addresses);
+      const existingAddress = addressesArray.find((item: any) => item.address === address);
+      if (existingAddress) {
+        existingAddress.alias = alias;
+      } else {
+        addressesArray.push({address, alias});
+      }
+      localStorage.setItem('addresses', JSON.stringify(addressesArray));
+    } else {
+      localStorage.setItem('addresses', JSON.stringify([{address, alias}]));
+    }
+  } catch (error) {
+    console.error('Error saving new address:', error);
+  }
+};
+
+export const getAddresses = () => {
+  try {
+    const addresses = localStorage.getItem('addresses');
+    if (addresses) {
+      return JSON.parse(addresses);
+    }
+    return [];
+  } catch (error) {
+    console.error('Error getting addresses:', error);
+    return [];
+  }
+};
+
+export const removeAddress = (address: string) => {
+  try {
+    const addresses = localStorage.getItem('addresses');
+    if (addresses) {
+      const addressesArray = JSON.parse(addresses);
+      const newAddresses = addressesArray.filter((item: any) => item.address !== address);
+      localStorage.setItem('addresses', JSON.stringify(newAddresses));
+    }
+  } catch (error) {
+    console.error('Error removing address:', error);
+  }
+};
+
+export const clearAllAddresses = () => {
+  try {
+    localStorage.removeItem('addresses');
+  } catch (error) {
+    console.error('Error clearing addresses:', error);
+  }
+};

From def8092b125676c074985a48ec2acd02779de5c4 Mon Sep 17 00:00:00 2001
From: Cryptosaka <79313706+Cryptosaka@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:40:59 -0800
Subject: [PATCH 2/3] Added address book to the transaction form

---
 .../src/components/UI/modals/AddressBook.tsx  | 86 ++++++++++++-------
 .../components/UI/sidebar/NetworkSettings.tsx |  2 +-
 .../forms/transactionForm/TransactionForm.tsx | 27 +++++-
 3 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/packages/renderer/src/components/UI/modals/AddressBook.tsx b/packages/renderer/src/components/UI/modals/AddressBook.tsx
index a940c989..11bdb845 100644
--- a/packages/renderer/src/components/UI/modals/AddressBook.tsx
+++ b/packages/renderer/src/components/UI/modals/AddressBook.tsx
@@ -4,7 +4,15 @@ import {getAddresses, removeAddress, saveNewAddress, trimMiddle} from '/@/tools'
 import {toast} from 'react-toastify';
 import Input from '../input/Input';
 
-export default function AddressBook() {
+export default function AddressBook({
+  editable,
+  selectable,
+  onSelect,
+}: {
+  editable?: boolean;
+  selectable?: boolean;
+  onSelect?: (address: string) => void;
+}) {
   const [showAdd, setShowAdd] = useState(false);
   const [address, setAddress] = useState('');
   const [alias, setAlias] = useState('');
@@ -53,12 +61,22 @@ export default function AddressBook() {
                   <p className="mb-0">{alias}</p>
                   <p className="small-text">{trimMiddle(address, 30)}</p>
                 </div>
-                <div className="flex flex-row gap-2">
+                {selectable && (
                   <Button
-                    text="Delete"
-                    onClick={() => deleteAddress(address)}
+                    text="Select"
+                    onClick={() => {
+                      onSelect && onSelect(address);
+                    }}
                   />
-                </div>
+                )}
+                {editable && (
+                  <div className="flex flex-row gap-2">
+                    <Button
+                      text="Delete"
+                      onClick={() => deleteAddress(address)}
+                    />
+                  </div>
+                )}
               </div>
             </div>
           ))
@@ -68,37 +86,39 @@ export default function AddressBook() {
           </div>
         )}
       </div>
-      {showAdd ? (
-        <div className="address-book-item">
-          <p>Address</p>
-          <Input
-            type="text"
-            value={address}
-            inputHandler={e => {
-              setAddress(e.target.value);
-            }}
-          />
-          <p>Alias</p>
-          <Input
-            type="text"
-            value={alias}
-            inputHandler={e => {
-              setAlias(e.target.value);
-            }}
-          />
+      {editable ? (
+        showAdd ? (
+          <div className="address-book-item">
+            <p>Address</p>
+            <Input
+              type="text"
+              value={address}
+              inputHandler={e => {
+                setAddress(e.target.value);
+              }}
+            />
+            <p>Alias</p>
+            <Input
+              type="text"
+              value={alias}
+              inputHandler={e => {
+                setAlias(e.target.value);
+              }}
+            />
+            <Button
+              style="primary"
+              text="Save"
+              onClick={saveAddress}
+            />
+          </div>
+        ) : (
           <Button
             style="primary"
-            text="Save"
-            onClick={saveAddress}
+            text="Add new"
+            onClick={() => setShowAdd(true)}
           />
-        </div>
-      ) : (
-        <Button
-          style="primary"
-          text="Add new"
-          onClick={() => setShowAdd(true)}
-        />
-      )}
+        )
+      ) : null}
     </div>
   );
 }
diff --git a/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx b/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx
index 1cfe4c11..cba4a722 100644
--- a/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx
+++ b/packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx
@@ -176,7 +176,7 @@ export default function NetworkSettings({
           close={toggleAddressBookModal}
           closeOnBackgroundClick
         >
-          <AddressBook />
+          <AddressBook editable />
         </ModalContainer>
       </ModalContainer>
     </>
diff --git a/packages/renderer/src/components/forms/transactionForm/TransactionForm.tsx b/packages/renderer/src/components/forms/transactionForm/TransactionForm.tsx
index 769582c8..8c2c960b 100644
--- a/packages/renderer/src/components/forms/transactionForm/TransactionForm.tsx
+++ b/packages/renderer/src/components/forms/transactionForm/TransactionForm.tsx
@@ -9,6 +9,8 @@ import {checkFieldsAndProceed} from './TransactionFormHelper';
 import type {IBalanceData} from '../../../contexts/balance/BalanceTypes';
 import Big from 'big.js';
 import {ArrowRight} from 'react-feather';
+import {ModalContainer} from '../../UI/modals';
+import AddressBook from '../../UI/modals/AddressBook';
 
 interface IProps {
   transactionData: ITransactionData;
@@ -29,6 +31,9 @@ const TransactionForm = ({
 }: IProps) => {
   const [amount, setAmount] = useState<number | string>(toLongMINA(transactionData.amount));
   const [fee, setFee] = useState<number | string>(toLongMINA(transactionData.fee));
+  const [showAddressBookModal, setShowAddressBookModal] = useState(false);
+
+  const toggleAddressBookModal = () => setShowAddressBookModal(!showAddressBookModal);
 
   /**
    * If a fee button has been selected (average or fast) or a fee has been entered from the input
@@ -119,7 +124,14 @@ const TransactionForm = ({
   return (
     <div className="mx-auto w-75">
       <div className="my-5">
-        <h3>Recipient</h3>
+        <div className="flex flex-row justify-between">
+          <h3>Recipient</h3>
+          <Button
+            className="link-button custom-delegate-button purple-text align-end  no-padding"
+            text="Address book"
+            onClick={toggleAddressBookModal}
+          />
+        </div>
         <Input
           value={transactionData.receiverAddress}
           placeholder="Enter address "
@@ -195,6 +207,19 @@ const TransactionForm = ({
           />
         </div>
       </div>
+      <ModalContainer
+        show={showAddressBookModal}
+        close={toggleAddressBookModal}
+        closeOnBackgroundClick
+      >
+        <AddressBook
+          selectable
+          onSelect={address => {
+            addressHandler(address);
+            toggleAddressBookModal();
+          }}
+        />
+      </ModalContainer>
     </div>
   );
 };

From 9883bb340bd5debeb079f19f76c41e8554079dda Mon Sep 17 00:00:00 2001
From: Cryptosaka <79313706+Cryptosaka@users.noreply.github.com>
Date: Fri, 13 Sep 2024 21:10:14 -0800
Subject: [PATCH 3/3] Added address book to the custom delegate form

---
 .../components/UI/modals/CustomDelegation.tsx | 46 ++++++++++++++-----
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/renderer/src/components/UI/modals/CustomDelegation.tsx b/packages/renderer/src/components/UI/modals/CustomDelegation.tsx
index 2fcf5234..bcfef659 100644
--- a/packages/renderer/src/components/UI/modals/CustomDelegation.tsx
+++ b/packages/renderer/src/components/UI/modals/CustomDelegation.tsx
@@ -1,36 +1,45 @@
-import { useState } from 'react';
-import { Row, Col } from 'react-bootstrap';
-import { ArrowLeft, ArrowRight } from 'react-feather';
+import {useState} from 'react';
+import {Row, Col} from 'react-bootstrap';
+import {ArrowLeft, ArrowRight} from 'react-feather';
 import Button from '../Button';
 import Input from '../input/Input';
+import {ModalContainer} from './ModalContainer';
+import AddressBook from './AddressBook';
 
 interface IProps {
   closeModal: () => void;
   confirmCustomDelegate: (customDelegate: string) => void;
 }
 
-export const ConfirmCustomDelegation = ({
-  closeModal,
-  confirmCustomDelegate,
-}: IProps) => {
+export const ConfirmCustomDelegation = ({closeModal, confirmCustomDelegate}: IProps) => {
   const [customDelegate, setCustomDelegate] = useState<string>('');
+  const [showAddressBookModal, setShowAddressBookModal] = useState(false);
+
+  const toggleAddressBookModal = () => setShowAddressBookModal(!showAddressBookModal);
+
   return (
     <div className="min-width-500">
       <div className="w-100">
         <div className="flex flex-col flex-vertical-center">
           <h1 className="mb-0">Custom delegation </h1>
-          <p className="text-center mt-1 mb-1">
-            Delegate to someone that is not in the list
-          </p>
+          <p className="text-center mt-1 mb-1">Delegate to someone that is not in the list</p>
           <div className="divider w-100" />
         </div>
       </div>
 
       <div className="align-left mt-1 mb-2 label">
-        <strong>Public key</strong>
+        <div className="flex flex-row justify-between">
+          <strong>Public key</strong>
+          <Button
+            className="link-button custom-delegate-button purple-text align-end  no-padding"
+            text="Address book"
+            onClick={toggleAddressBookModal}
+          />
+        </div>
       </div>
       <Input
-        inputHandler={(e) => {
+        value={customDelegate}
+        inputHandler={e => {
           setCustomDelegate(e.currentTarget.value);
         }}
         placeholder="Insert public key"
@@ -55,6 +64,19 @@ export const ConfirmCustomDelegation = ({
           />
         </Col>
       </Row>
+      <ModalContainer
+        show={showAddressBookModal}
+        close={toggleAddressBookModal}
+        closeOnBackgroundClick
+      >
+        <AddressBook
+          selectable
+          onSelect={address => {
+            setCustomDelegate(address);
+            toggleAddressBookModal();
+          }}
+        />
+      </ModalContainer>
     </div>
   );
 };