From 0e97e3f278930bbf29fb4ce8c6bf9a5b21b2f161 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Tue, 22 Feb 2022 14:12:50 +0200
Subject: [PATCH] Improve account selection ux

---
 .../public/icons/delete-icon.svg                |  6 ++++++
 wallets/react-wallet-v2/public/main.css         |  4 ++++
 .../src/components/PairingCard.tsx              | 11 +++++++----
 .../src/components/SessionCard.tsx              | 11 +++++++----
 .../src/views/SessionProposalModal.tsx          | 17 ++++++++++++++---
 5 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 wallets/react-wallet-v2/public/icons/delete-icon.svg

diff --git a/wallets/react-wallet-v2/public/icons/delete-icon.svg b/wallets/react-wallet-v2/public/icons/delete-icon.svg
new file mode 100644
index 0000000..ffce69d
--- /dev/null
+++ b/wallets/react-wallet-v2/public/icons/delete-icon.svg
@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M112 112L132 432C132.95 450.49 146.4 464 164 464H348C365.67 464 378.87 450.49 380 432L400 112" stroke="#F21361" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80 112H432Z" fill="#F21361"/>
+<path d="M80 112H432" stroke="#F21361" stroke-width="32" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M328 176L320 400M192 112V72.0001C191.991 68.8458 192.605 65.7208 193.808 62.8048C195.011 59.8888 196.778 57.2394 199.009 55.0089C201.239 52.7785 203.889 51.011 206.805 49.8082C209.721 48.6053 212.846 47.9909 216 48.0001H296C299.154 47.9909 302.279 48.6053 305.195 49.8082C308.111 51.011 310.761 52.7785 312.991 55.0089C315.222 57.2394 316.989 59.8888 318.192 62.8048C319.395 65.7208 320.009 68.8458 320 72.0001V112H192ZM256 176V400V176ZM184 176L192 400L184 176Z" stroke="#F21361" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/wallets/react-wallet-v2/public/main.css b/wallets/react-wallet-v2/public/main.css
index 290a260..df9ea10 100644
--- a/wallets/react-wallet-v2/public/main.css
+++ b/wallets/react-wallet-v2/public/main.css
@@ -78,4 +78,8 @@ select {
 
 select:hover {
   background-color: rgba(139, 139, 139, 0.35);
+}
+
+i {
+  margin-top: -5px !important;
 }
\ No newline at end of file
diff --git a/wallets/react-wallet-v2/src/components/PairingCard.tsx b/wallets/react-wallet-v2/src/components/PairingCard.tsx
index 67e811c..c273ab5 100644
--- a/wallets/react-wallet-v2/src/components/PairingCard.tsx
+++ b/wallets/react-wallet-v2/src/components/PairingCard.tsx
@@ -1,5 +1,6 @@
 import { truncate } from '@/utils/HelperUtil'
-import { Avatar, Button, Card, Link, Text } from '@nextui-org/react'
+import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react'
+import Image from 'next/image'
 
 /**
  * Types
@@ -42,9 +43,11 @@ export default function PairingCard({ logo, name, url, onDelete }: IProps) {
             {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
           </Link>
         </div>
-        <Button size="xs" color="error" flat onClick={onDelete}>
-          DELETE
-        </Button>
+        <Tooltip content="Delete" placement="left">
+          <Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
+            <Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
+          </Button>
+        </Tooltip>
       </Card.Body>
     </Card>
   )
diff --git a/wallets/react-wallet-v2/src/components/SessionCard.tsx b/wallets/react-wallet-v2/src/components/SessionCard.tsx
index 8119fef..5976aab 100644
--- a/wallets/react-wallet-v2/src/components/SessionCard.tsx
+++ b/wallets/react-wallet-v2/src/components/SessionCard.tsx
@@ -1,5 +1,6 @@
 import { truncate } from '@/utils/HelperUtil'
-import { Avatar, Button, Card, Link, Text } from '@nextui-org/react'
+import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react'
+import Image from 'next/image'
 
 /**
  * Types
@@ -42,9 +43,11 @@ export default function SessionCard({ logo, name, url, onDelete }: IProps) {
             {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
           </Link>
         </div>
-        <Button size="xs" color="error" flat onClick={onDelete}>
-          DELETE
-        </Button>
+        <Tooltip content="Delete" placement="left">
+          <Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
+            <Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
+          </Button>
+        </Tooltip>
       </Card.Body>
     </Card>
   )
diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
index cd286e3..f0ca6b4 100644
--- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
@@ -1,12 +1,12 @@
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
-import { truncate } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
 import { addresses } from '@/utils/WalletUtil'
 import {
   Avatar,
   Button,
   Card,
+  Checkbox,
   Col,
   Container,
   Divider,
@@ -134,10 +134,20 @@ export default function SessionProposalModal() {
                   key={address}
                   css={{
                     marginTop: '$5',
-                    backgroundColor: selectedAddresses.includes(address) ? '$green600' : '$accents2'
+                    backgroundColor: selectedAddresses.includes(address)
+                      ? 'rgba(23, 200, 100, 0.2)'
+                      : '$accents2'
                   }}
                 >
-                  <Text>{`Acc ${index + 1} - ${truncate(address, 19)}`}</Text>
+                  <Row justify="space-between" align="center">
+                    <Checkbox
+                      size="lg"
+                      color="success"
+                      checked={selectedAddresses.includes(address)}
+                    />
+
+                    <Text>{`Account ${index + 1}`} </Text>
+                  </Row>
                 </Card>
               ))}
             </Col>
@@ -149,6 +159,7 @@ export default function SessionProposalModal() {
         <Button auto flat color="error" onClick={onReject}>
           Reject
         </Button>
+
         <Button
           auto
           flat