Rename accounts. Copy address from WST table

Author: Jann Müller

frontend/src/app/[username]/index.tsx

@@ -27,8 +27,8 @@ export default function Profile() {
 
   const getUserAccountDetails = () => {
     switch (currentUser) {
-      case "User A": return accounts.userA;
-      case "User B": return accounts.userB;
+      case "Alice": return accounts.alice;
+      case "Bob": return accounts.bob;
       case "Connected Wallet": return accounts.walletUser;
     };
   };

frontend/src/app/[username]/page.tsx

@@ -2,8 +2,8 @@ import Profile from '.';
 
 export async function generateStaticParams() {
   return [
-    { username: 'user-a' },
-    { username: 'user-b' },
+    { username: 'alice' },
+    { username: 'bob' },
     { username: 'connected-wallet' } // connected wallet
   ]
 }

frontend/src/app/clientLayout.tsx

@@ -22,13 +22,13 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
           try {
             // retrieve wallet info
             const mintAuthorityWallet = await getWalletFromSeed(mintAccount.mnemonic);
-            const walletA = await getWalletFromSeed(accounts.userA.mnemonic);
-            const walletB = await getWalletFromSeed(accounts.userB.mnemonic);
+            const walletA = await getWalletFromSeed(accounts.alice.mnemonic);
+            const walletB = await getWalletFromSeed(accounts.bob.mnemonic);
 
             // Update Zustand store with the initialized wallet information
             changeMintAccountDetails({ ...mintAccount, address: mintAuthorityWallet.address});
-            changeWalletAccountDetails('userA', { ...accounts.userA, address: walletA.address},);
-            changeWalletAccountDetails('userB', { ...accounts.userB, address: walletB.address});
+            changeWalletAccountDetails('alice', { ...accounts.alice, address: walletA.address},);
+            changeWalletAccountDetails('bob', { ...accounts.bob, address: walletB.address});
 
             const initialLucid = await makeLucid();
             setLucidInstance(initialLucid);
@@ -41,7 +41,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
         fetchUserWallets();
       },[]);
 
-  if(accounts.userB.address === '') {
+  if(accounts.bob.address === '') {
     return <div className="mainLoadingContainer">
     <div className="mainLoader" />
   </div>;

frontend/src/app/components/ProfileSwitcher.tsx

@@ -86,9 +86,9 @@ export default function ProfileSwitcher() {
         onClose={handleClose}
       >
         <MenuItem onClick={() => handleSelect('Mint Authority')}>Mint Authority</MenuItem>
-        <MenuItem onClick={() => handleSelect('User A')}>User A</MenuItem>
-        <MenuItem onClick={() => handleSelect('User B')}>User B</MenuItem>
-        <MenuItem onClick={() => handleWalletConnect('Connected Wallet')}>Lace</MenuItem>
+        <MenuItem onClick={() => handleSelect('Alice')}>Alice</MenuItem>
+        <MenuItem onClick={() => handleSelect('Bob')}>Bob</MenuItem>
+        {/* <MenuItem onClick={() => handleWalletConnect('Connected Wallet')}>Lace</MenuItem> */}
       </Menu>
     </>
   );

frontend/src/app/components/WSTTable.tsx

@@ -12,10 +12,12 @@ import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
 //Local Imports
 import useStore from '../store/store'; 
 import { useEffect } from "react";
+import IconButton from './WSTIconButton';
 
 const progLogicBase : LucidCredential = {
   type: "Script",
@@ -43,6 +45,9 @@ export default function WSTTable() {
     getAccounts();
   }, []);
 
+  const copyToClipboard = (str: string) => {
+    navigator.clipboard.writeText(str);
+  }
 
   return (
     <Box className="tableContainerBox">
@@ -61,6 +66,7 @@ export default function WSTTable() {
             <TableRow key={i}>
               <TableCell>
                   {`${acct?.address.slice(0,15)}...${acct?.address.slice(104,108)}`}
+                  <IconButton onClick={() => copyToClipboard(acct.address)} icon={<ContentCopyIcon />}/>
               </TableCell>
               <TableCell sx={{color: acct.status === 'Frozen' ? 'error.main' : 'success.main', fontWeight: '500'}}>
                   {acct.status}

frontend/src/app/mint-authority/page.tsx

@@ -49,13 +49,13 @@ export default function Home() {
 
   const fetchUserDetails = async () => {
     const mintBalance = await getWalletBalance(mintAccount.address);
-    const userABalance = await getWalletBalance(accounts.userA.address);
-    const userBBalance = await getWalletBalance(accounts.userB.address);
+    const userABalance = await getWalletBalance(accounts.alice.address);
+    const userBBalance = await getWalletBalance(accounts.bob.address);
 
     // Update Zustand store with the initialized wallet information
     await changeMintAccountDetails({ ...mintAccount, balance: mintBalance});
-    await changeWalletAccountDetails('userA', { ...accounts.userA, balance: userABalance});
-    await changeWalletAccountDetails('userB', { ...accounts.userB, balance: userBBalance});
+    await changeWalletAccountDetails('alice', { ...accounts.alice, balance: userABalance});
+    await changeWalletAccountDetails('bob', { ...accounts.bob, balance: userBBalance});
   };
 
   const fetchBlacklistStatus = async () => {
@@ -400,7 +400,7 @@ maxRows={3}
         return <>
           <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: '16px'}}>
           <Box>
-            <Typography variant='h4'>Mint Balance</Typography>
+            <Typography variant='h4'>Mint Authority Balance</Typography>
             <Typography variant='h1'>{mintAccount.balance} WST</Typography>
           </Box>
           <Typography variant='h5'>UserID: {mintAccount.address.slice(0,15)}</Typography>

frontend/src/app/store/store.tsx

@@ -32,13 +32,13 @@ const useStore = create<State & Actions>((set) => ({
       balance: 0,
     },
     accounts: {
-      userA: {
+      alice: {
         address: '',
         mnemonic: 'during dolphin crop lend pizza guilt hen earn easy direct inhale deputy detect season army inject exhaust apple hard front bubble emotion short portion',
         balance: 0,
         status: 'Active',
       },
-      userB: {
+      bob: {
         address: '',
         mnemonic: 'silver legal flame powder fence kiss stable margin refuse hold unknown valid wolf kangaroo zero able waste jewel find salad sadness exhibit hello tape',
         balance: 0,
@@ -82,8 +82,8 @@ const useStore = create<State & Actions>((set) => ({
           case 'Mint Authority':
             firstAccessibleTab = 'Mint Actions'; 
             break;
-          case 'User A':
-          case 'User B':
+          case 'Alice':
+          case 'Bob':
             firstAccessibleTab = 'Wallet'; 
             break;
           case 'Connected Wallet':

frontend/src/app/store/types.ts

@@ -1,15 +1,15 @@
-export type UserName = 'Mint Authority' | 'User A' | 'User B' | 'Connected Wallet';
+export type UserName = 'Mint Authority' | 'Alice' | 'Bob' | 'Connected Wallet';
 export type MenuTab = 'Mint Actions' | 'Addresses' | 'Wallet';
 export type AccountInfo = {
     address: string,
     mnemonic: string,
     balance: number,
     status?: 'Active' | 'Frozen',
 };
-export type AccountKey = 'userA' | 'userB' | 'walletUser';
+export type AccountKey = 'alice' | 'bob' | 'walletUser';
 export type Accounts = {
-    userA: AccountInfo;
-    userB: AccountInfo;
+    alice: AccountInfo;
+    bob: AccountInfo;
     walletUser: AccountInfo;
 };
 export type Severity = 'success' | 'error' | 'info' | 'warning';