more multi account UI work

nym-wallet/package.json

@@ -42,6 +42,7 @@
     "react-hook-form": "^7.14.2",
     "react-router-dom": "^5.2.0",
     "semver": "^6.3.0",
+    "string-to-color": "^2.2.2",
     "use-clipboard-copy": "^0.2.0",
     "yup": "^0.32.9"
   },

nym-wallet/src/components/Accounts.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Box } from '@mui/material';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Accounts } from 'src/components/Accounts';
@@ -16,7 +17,7 @@ const Template: ComponentStory<typeof Accounts> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   accounts: [
-    { name: 'Account 1', address: 'abcdefg' },
-    { name: 'Account 2', address: 'tuvwxyz' },
+    { name: 'Account 1', address: 'abcd1234uvw987xyz' },
+    { name: 'Account 2', address: 'cd102034u087xyz' },
   ],
 };

nym-wallet/src/components/Accounts.tsx

@@ -1,12 +1,55 @@
 import React, { useState } from 'react';
-import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
-import { Circle } from '@mui/icons-material';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from '@mui/material';
+import stc from 'string-to-color';
+import { Add, Circle, Close, Edit } from '@mui/icons-material';
+import { NymCard } from './NymCard';
 
 export type TAccount = {
   name: string;
   address: string;
 };
 
+const AccountColor = ({ address }: { address: string }) => <Circle sx={{ color: stc(address) }} />;
+
+const AccountItem = ({ name, address }: { name: string; address: string }) => (
+  <NymCard
+    title={name}
+    subheader={address}
+    noPadding
+    Action={
+      <IconButton size="small">
+        <Edit fontSize="small" />
+      </IconButton>
+    }
+  />
+);
+
+const AccountModal = ({ show, addresses, onClose }: { show: boolean; addresses: TAccount[]; onClose: () => void }) => (
+  <Dialog open={show} onClose={onClose} fullWidth>
+    <DialogTitle>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography variant="h6">Account</Typography>
+        <IconButton onClick={onClose}>
+          <Close />
+        </IconButton>
+      </Box>
+      <Typography variant="caption" sx={{ color: 'grey.600' }}>
+        Switch between accounts
+      </Typography>
+    </DialogTitle>
+    <DialogContent>
+      {addresses.map(({ name, address }) => (
+        <AccountItem name={name} address={address} />
+      ))}
+    </DialogContent>
+    <DialogActions>
+      <Button fullWidth variant="contained" size="large" startIcon={<Add fontSize="small" />}>
+        Add new account
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
+
 export const Accounts = ({ accounts }: { accounts: TAccount[] }) => {
   const [addresses, setAddresses] = useState(accounts);
   const [selectedAddress, setSelectedAddress] = useState(accounts[0]);
@@ -14,19 +57,14 @@ export const Accounts = ({ accounts }: { accounts: TAccount[] }) => {
 
   return (
     <>
-      <Button startIcon={<Circle color="info" />} color="inherit" onClick={() => setShowDialog(true)}>
+      <Button
+        startIcon={<AccountColor address={selectedAddress.address} />}
+        color="inherit"
+        onClick={() => setShowDialog(true)}
+      >
         {selectedAddress.name}
       </Button>
-      <AccountModal show={showDialog} onClose={() => setShowDialog(false)} />
+      <AccountModal show={showDialog} onClose={() => setShowDialog(false)} addresses={addresses} />
     </>
   );
 };
-
-const AccountModal = ({ show, onClose }: { show: boolean; onClose: () => void }) => {
-  return (
-    <Dialog open={show} onClose={onClose}>
-      <DialogTitle>Yo</DialogTitle>
-      <DialogContent>Content</DialogContent>
-    </Dialog>
-  );
-};