wallet-ext: account settings view support multiple accounts (MystenLa…

…bs#8297) * display all the accounts of the user * update the ui <img width="378" alt="Screenshot 2023-02-15 at 18 17 26" src="https://user-images.githubusercontent.com/10210143/219118244-88e75c3b-d10a-4687-90df-fe28cd4bf100.png"> https://user-images.githubusercontent.com/10210143/219118290-e619926e-1928-4c38-a09b-a4c4c4b53f53.mov closes APPS-286
wmira · Feb 15, 2023 · 77bcada · 77bcada
1 parent b6be236
commit 77bcada
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 21 deletions.
diff --git a/apps/wallet/src/ui/app/components/menu/content/Account.tsx b/apps/wallet/src/ui/app/components/menu/content/Account.tsx
@@ -0,0 +1,38 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Copy16 } from '@mysten/icons';
+
+import { useMiddleEllipsis } from '_src/ui/app/hooks';
+import { useCopyToClipboard } from '_src/ui/app/hooks/useCopyToClipboard';
+import { Heading } from '_src/ui/app/shared/heading';
+
+export type AccountProps = {
+    address: string;
+};
+
+export function Account({ address }: AccountProps) {
+    const addressShort = useMiddleEllipsis(address);
+    const copyCallback = useCopyToClipboard(address, {
+        copySuccessMessage: 'Address copied',
+    });
+    return (
+        <div className="flex flex-nowrap items-center border border-solid border-gray-60 rounded-lg p-5">
+            <div className="flex-1">
+                <Heading
+                    mono
+                    weight="semibold"
+                    variant="heading6"
+                    color="steel-dark"
+                    leading="none"
+                >
+                    {addressShort}
+                </Heading>
+            </div>
+            <Copy16
+                onClick={copyCallback}
+                className="transition text-base leading-none text-gray-60 active:text-gray-60 hover:text-hero-darkest cursor-pointer p1"
+            />
+        </div>
+    );
+}
diff --git a/apps/wallet/src/ui/app/components/menu/content/AccountsSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/AccountsSettings.tsx
@@ -1,25 +1,20 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { Account } from './Account';
 import { MenuLayout } from './MenuLayout';
-import AccountAddress from '_components/account-address';
 import { useNextMenuUrl } from '_components/menu/hooks';
-import { Text } from '_src/ui/app/shared/text';
+import { useAccounts } from '_src/ui/app/hooks/useAccounts';
 
 export function AccountsSettings() {
     const backUrl = useNextMenuUrl(true, '/');
+    const accounts = useAccounts();
     return (
         <MenuLayout title="Accounts" back={backUrl}>
             <div className="flex flex-col gap-3">
-                <Text color="gray-90" weight="medium" variant="p1">
-                    Address
-                </Text>
-                <AccountAddress
-                    mode="faded"
-                    shorten={true}
-                    showLink={false}
-                    copyable
-                />
+                {accounts.map(({ address }) => (
+                    <Account address={address} key={address} />
+                ))}
             </div>
         </MenuLayout>
     );

diff --git a/apps/wallet/src/ui/app/components/menu/content/MenuLayout.tsx b/apps/wallet/src/ui/app/components/menu/content/MenuLayout.tsx
@@ -12,8 +12,10 @@ export interface MenuLayoutProps extends PageTitleProps {
 export function MenuLayout({ children, ...pageTitleProps }: MenuLayoutProps) {
     return (
         <>
-            <PageTitle {...pageTitleProps} />
-            <div className="flex flex-col justify-items-stretch flex-1 px-2.5 mt-4">
+            <div className="sticky top-0 bg-white py-4">
+                <PageTitle {...pageTitleProps} />
+            </div>
+            <div className="flex flex-col justify-items-stretch flex-1 px-2.5">
                 {children}
             </div>
         </>

diff --git a/apps/wallet/src/ui/app/components/menu/content/index.tsx b/apps/wallet/src/ui/app/components/menu/content/index.tsx
@@ -53,7 +53,7 @@ function MenuContent() {
         return null;
     }
     return (
-        <div className="absolute flex flex-col justify-items-stretch inset-0 bg-white pt-4 pb-8 px-2.5 z-50 rounded-tl-20 rounded-tr-20">
+        <div className="absolute flex flex-col justify-items-stretch inset-0 bg-white pb-8 px-2.5 z-50 rounded-tl-20 rounded-tr-20 overflow-y-auto">
             <ErrorBoundary>
                 <MainLocationContext.Provider value={mainLocation}>
                     <Routes location={menuUrl || ''}>

diff --git a/apps/wallet/src/ui/app/shared/text/index.tsx b/apps/wallet/src/ui/app/shared/text/index.tsx
@@ -20,7 +20,6 @@ const textStyles = cva([], {
             subtitleSmallExtra: 'text-subtitleSmallExtra',
             caption: 'uppercase text-caption',
             captionSmall: 'uppercase text-captionSmall ',
-            heading4: 'text-heading4',
             p1: 'text-p1',
             p2: 'text-p2',
             p3: 'text-p3',

diff --git a/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx b/apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx
@@ -4,6 +4,7 @@
 import { useFeature } from '@growthbook/growthbook-react';
 import { useMemo } from 'react';
 
+import { Heading } from '../../shared/heading';
 import { calculateAPY } from '../calculateAPY';
 import { getStakingRewards } from '../getStakingRewards';
 import { StakeAmount } from '../home/StakeAmount';
@@ -157,13 +158,14 @@ export function DelegationDetailCard({
                                         }
                                     >
                                         <div className="flex gap-0.5 items-baseline">
-                                            <Text
+                                            <Heading
                                                 variant="heading4"
                                                 weight="semibold"
                                                 color="gray-90"
+                                                leading="none"
                                             >
                                                 {apy}
-                                            </Text>
+                                            </Heading>
 
                                             <Text
                                                 variant="subtitleSmall"
@@ -189,13 +191,14 @@ export function DelegationDetailCard({
                                         }
                                     >
                                         <div className="flex gap-0.5 items-baseline">
-                                            <Text
+                                            <Heading
                                                 variant="heading4"
                                                 weight="semibold"
                                                 color="gray-90"
+                                                leading="none"
                                             >
                                                 {commission}
-                                            </Text>
+                                            </Heading>
 
                                             <Text
                                                 variant="subtitleSmall"

diff --git a/apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx
@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 
 import LoadingIndicator from '../../components/loading/LoadingIndicator';
 import { useGasBudgetInMist } from '../../hooks/useGasBudgetInMist';
+import { Heading } from '../../shared/heading';
 import { Card } from '_app/shared/card';
 import { Text } from '_app/shared/text';
 import { useFormatCoin } from '_hooks';
@@ -59,13 +60,14 @@ export function UnStakeForm({
                             Your Stake
                         </Text>
                         <div className="flex gap-0.5 items-end">
-                            <Text
+                            <Heading
                                 variant="heading4"
                                 weight="semibold"
                                 color="steel-darker"
+                                leading="none"
                             >
                                 {tokenBalance}
-                            </Text>
+                            </Heading>
                             <Text
                                 variant="bodySmall"
                                 weight="medium"