feat(wallet-dashboard): style balance box

apps/wallet-dashboard/app/(protected)/home/page.tsx

@@ -16,16 +16,34 @@ function HomeDashboardPage(): JSX.Element {
     };
 
     return (
-        <main className="flex flex-1 flex-col items-center space-y-8 p-24">
-            <p>Connection status: {connectionStatus}</p>
+        <main className="flex flex-1 flex-col items-center space-y-8 py-md">
             {connectionStatus === 'connected' && account && (
-                <div className="flex flex-col items-center justify-center space-y-2">
-                    <h1>Welcome</h1>
-                    <div>Address: {account.address}</div>
-                    <AccountBalance />
-                    <MyCoins />
+                <>
+                    <div className="home-page-grid-container h-full w-full">
+                        <div style={{ gridArea: 'balance' }} className="flex grow overflow-hidden">
+                            <AccountBalance />
+                        </div>
+                        <div style={{ gridArea: 'staking' }} className="flex grow overflow-hidden">
+                            Staking
+                        </div>
+                        <div
+                            style={{ gridArea: 'migration' }}
+                            className="flex grow overflow-hidden"
+                        >
+                            Migration
+                        </div>
+                        <div style={{ gridArea: 'coins' }}>
+                            <MyCoins />
+                        </div>
+                        <div style={{ gridArea: 'vesting' }} className="flex grow overflow-hidden">
+                            Vesting
+                        </div>
+                        <div style={{ gridArea: 'activity' }} className="flex grow overflow-hidden">
+                            Activity
+                        </div>
+                    </div>
                     <Button onClick={addNewStake}>New Stake</Button>
-                </div>
+                </>
             )}
         </main>
     );

apps/wallet-dashboard/app/globals.css

@@ -1,3 +1,5 @@
+@import '@iota/apps-ui-kit/styles';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -14,3 +16,37 @@ body {
         text-wrap: balance;
     }
 }
+
+@layer components {
+    .home-page-grid-container {
+        @apply grid grid-cols-1 gap-lg;
+        grid-template-areas:
+            'balance'
+            'staking'
+            'migration'
+            'coins'
+            'vesting'
+            'activity';
+    }
+
+    @screen sm {
+        .home-page-grid-container {
+            @apply grid-cols-2;
+            grid-template-areas:
+                'balance coins'
+                'staking migration'
+                'vesting vesting'
+                'activity activity';
+        }
+    }
+
+    @screen md {
+        .home-page-grid-container {
+            @apply grid-cols-3;
+            grid-template-areas:
+                'balance staking migration'
+                'coins vesting vesting'
+                'coins activity activity';
+        }
+    }
+}

apps/wallet-dashboard/app/layout.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 
 import '@iota/dapp-kit/dist/index.css';
 import { Popup, PopupProvider } from '@/components/Popup';
+import { Toaster } from 'react-hot-toast';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -33,6 +34,7 @@ export default function RootLayout({
                 <QueryClientProvider client={queryClient}>
                     <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
                         <WalletProvider
+                            autoConnect={true}
                             theme={[
                                 {
                                     variables: lightTheme,
@@ -45,6 +47,7 @@ export default function RootLayout({
                         >
                             <PopupProvider>
                                 {children}
+                                <Toaster />
                                 <Popup />
                             </PopupProvider>
                         </WalletProvider>

apps/wallet-dashboard/components/account-balance/AccountBalance.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useCurrentAccount, useIotaClientContext, useIotaClientQuery } from '@iota/dapp-kit';
+import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import {
+    COINS_QUERY_REFETCH_INTERVAL,
+    COINS_QUERY_STALE_TIME,
+    filterAndSortTokenBalances,
+    useBalance,
+    useFormatCoin,
+} from '@iota/core';
+import { Address, Button, ButtonSize, ButtonType, Panel } from '@iota/apps-ui-kit';
+import { CoinBalance, getNetwork } from '@iota/iota-sdk/client';
+import { SendCoinPopup } from '../Popup';
+import { usePopups } from '@/hooks';
+import toast from 'react-hot-toast';
+
+export function AccountBalance() {
+    const account = useCurrentAccount();
+    const address = account?.address;
+    const { openPopup, closePopup } = usePopups();
+    const { network } = useIotaClientContext();
+    const { explorer } = getNetwork(network);
+    const { data: coinBalance, isPending } = useBalance(address!);
+    const formattedAddress = formatAddress(address!);
+    const [formatted, symbol] = useFormatCoin(coinBalance?.totalBalance, IOTA_TYPE_ARG);
+    const { data: coinBalances } = useIotaClientQuery(
+        'getAllBalances',
+        { owner: address! },
+        {
+            enabled: !!address,
+            staleTime: COINS_QUERY_STALE_TIME,
+            refetchInterval: COINS_QUERY_REFETCH_INTERVAL,
+            select: filterAndSortTokenBalances,
+        },
+    );
+    const explorerLink = `${explorer}/address/${address}`;
+
+    function openSendTokenPopup(coin: CoinBalance, address: string): void {
+        if (coinBalances) {
+            openPopup(
+                <SendCoinPopup
+                    coin={coin}
+                    senderAddress={address}
+                    onClose={closePopup}
+                    coins={coinBalances}
+                />,
+            );
+        }
+    }
+
+    function handleOnCopySuccess() {
+        toast.success('Address copied');
+    }
+
+    return (
+        <Panel>
+            {isPending && <p>Loading...</p>}
+            {!isPending && (
+                <div className="flex h-full flex-col items-center justify-center gap-y-lg p-lg">
+                    <div className="flex h-full flex-col items-center justify-center gap-y-xs">
+                        {address && (
+                            <Address
+                                text={formattedAddress}
+                                isCopyable
+                                copyText={address}
+                                isExternal
+                                externalLink={explorerLink}
+                                onCopySuccess={handleOnCopySuccess}
+                            />
+                        )}
+                        <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
+                            {formatted} {symbol}
+                        </span>
+                    </div>
+                    <div className="flex w-full max-w-56 gap-xs">
+                        <Button
+                            onClick={() =>
+                                coinBalance &&
+                                openSendTokenPopup(coinBalance, account?.address ?? '')
+                            }
+                            text="Send"
+                            size={ButtonSize.Small}
+                            disabled={!address}
+                            testId="send-coin-button"
+                            fullWidth
+                        />
+                        <Button
+                            onClick={() => {}}
+                            type={ButtonType.Secondary}
+                            text="Receive"
+                            size={ButtonSize.Small}
+                            fullWidth
+                        />
+                    </div>
+                </div>
+            )}
+        </Panel>
+    );
+}

apps/wallet-dashboard/components/index.ts

@@ -12,7 +12,7 @@ export { default as ExternalImage } from './ExternalImage';
 export { default as TransactionIcon } from './TransactionIcon';
 export { default as Dropdown } from './Dropdown';
 
-export * from './AccountBalance/AccountBalance';
+export * from './account-balance/AccountBalance';
 export * from './Coins';
 export * from './Popup';
 export * from './AppList';

apps/wallet-dashboard/package.json

@@ -25,6 +25,7 @@
         "clsx": "^2.1.1",
         "next": "14.2.10",
         "react": "^18.3.1",
+        "react-hot-toast": "^2.4.1",
         "zustand": "^4.4.1"
     },
     "devDependencies": {