feat(sdk): rebrand dapp-kit components (#2783)

* feat: refine button and modal * feat: refine styles * feat: style dropwdown * feat: update text * feat: add missing style * fix format * fix format * feat: refine styles * feat: add iota wallet logo * fix: remove console.log * chore: add changeset --------- Co-authored-by: Begoña Alvarez <[email protected]> Co-authored-by: Branko Bosnic <[email protected]>
iotaledger · Sep 25, 2024 · 065513f · 065513f
1 parent 86af63a
commit 065513f
Show file tree

Hide file tree

Showing 40 changed files with 748 additions and 523 deletions.
diff --git a/.changeset/gold-bobcats-check.md b/.changeset/gold-bobcats-check.md
@@ -0,0 +1,5 @@
+---
+'@iota/dapp-kit': minor
+---
+
+Rebrand
diff --git a/apps/wallet-dashboard/app/dashboard/layout.tsx b/apps/wallet-dashboard/app/dashboard/layout.tsx
@@ -2,31 +2,42 @@
 // SPDX-License-Identifier: Apache-2.0
 'use client';
 
-import { Notifications, RouteLink } from '@/components/index';
-import React, { type PropsWithChildren } from 'react';
+import { Button, Notifications, RouteLink } from '@/components/index';
+import React, { useState, type PropsWithChildren } from 'react';
 import { ConnectButton } from '@iota/dapp-kit';
 
+const routes = [
+    { title: 'Home', path: '/dashboard/home' },
+    { title: 'Assets', path: '/dashboard/assets' },
+    { title: 'Staking', path: '/dashboard/staking' },
+    { title: 'Apps', path: '/dashboard/apps' },
+    { title: 'Activity', path: '/dashboard/activity' },
+    { title: 'Migrations', path: '/dashboard/migrations' },
+    { title: 'Vesting', path: '/dashboard/vesting' },
+];
+
 function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
-    const routes = [
-        { title: 'Home', path: '/dashboard/home' },
-        { title: 'Assets', path: '/dashboard/assets' },
-        { title: 'Staking', path: '/dashboard/staking' },
-        { title: 'Apps', path: '/dashboard/apps' },
-        { title: 'Activity', path: '/dashboard/activity' },
-        { title: 'Migrations', path: '/dashboard/migrations' },
-        { title: 'Vesting', path: '/dashboard/vesting' },
-    ];
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+    };
 
     // TODO: check if the wallet is connected and if not redirect to the welcome screen
     return (
         <>
             <section className="flex flex-row items-center justify-around pt-12">
                 <Notifications />
-                <ConnectButton />
-
                 {routes.map((route) => {
                     return <RouteLink key={route.title} {...route} />;
                 })}
+                <Button onClick={toggleDarkMode}>{isDarkMode ? 'Light Mode' : 'Dark Mode'}</Button>
+                <ConnectButton />
             </section>
             <div>{children}</div>
         </>

diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css
@@ -2,29 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --foreground-rgb: 255, 255, 255;
-        --background-start-rgb: 0, 0, 0;
-        --background-end-rgb: 0, 0, 0;
-    }
-}
-
 html,
 body {
     height: 100%;
-}
-
-body {
-    color: rgb(var(--foreground-rgb));
-    background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
-        rgb(var(--background-start-rgb));
+    @apply bg-gray-100 dark:bg-gray-900;
+    @apply text-gray-900 dark:text-gray-100;
 }
 
 @layer utilities {

diff --git a/apps/wallet-dashboard/tailwind.config.ts b/apps/wallet-dashboard/tailwind.config.ts
@@ -9,6 +9,7 @@ const config: Config = {
         './pages/**/*.{js,ts,jsx,tsx,mdx}',
         './components/**/*.{js,ts,jsx,tsx,mdx}',
     ],
+    darkMode: 'class',
     theme: {
         extend: {
             backgroundImage: {

diff --git a/apps/wallet/src/dapp-interface/WalletStandardInterface.ts b/apps/wallet/src/dapp-interface/WalletStandardInterface.ts
diff --git a/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts b/sdk/dapp-kit/src/components/AccountDropdownMenu.css.ts
@@ -3,40 +3,46 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { style } from '@vanilla-extract/css';
-
 import { themeVars } from '../themes/themeContract.js';
 
 export const connectedAccount = style({
-    gap: 8,
+    gap: themeVars.spacing.xsmall,
 });
 
 export const menuContainer = style({
     zIndex: 999999999,
 });
 
+export const icon = style({
+    color: themeVars.colors.body,
+});
+
 export const menuContent = style({
     display: 'flex',
     flexDirection: 'column',
     width: 180,
     maxHeight: 200,
-    marginTop: 4,
-    padding: 8,
-    gap: 8,
+    marginTop: themeVars.spacing.xsmall,
+    gap: themeVars.spacing.xxsmall,
     borderRadius: themeVars.radii.large,
     backgroundColor: themeVars.backgroundColors.dropdownMenu,
+    padding: themeVars.spacing.xxsmall,
 });
 
 export const menuItem = style({
-    padding: 8,
     userSelect: 'none',
     outline: 'none',
     display: 'flex',
     alignItems: 'center',
-    borderRadius: themeVars.radii.large,
-    selectors: {
-        '&[data-highlighted]': {
-            backgroundColor: themeVars.backgroundColors.primaryButton,
-        },
+    borderRadius: themeVars.radii.medium,
+    fontSize: themeVars.fontSizes.medium,
+    fontWeight: themeVars.fontWeights.normal,
+    letterSpacing: themeVars.typography.letterSpacing,
+    lineHeight: themeVars.typography.lineHeight,
+    padding: themeVars.spacing.small,
+    ':hover': {
+        backgroundColor: themeVars.backgroundColors.primaryButtonHover,
+        cursor: 'pointer',
     },
 });
 

diff --git a/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx b/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx
@@ -6,7 +6,6 @@ import { formatAddress } from '@iota/iota-sdk/utils';
 import type { WalletAccount } from '@iota/wallet-standard';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-
 import { useAccounts } from '../hooks/wallet/useAccounts.js';
 import { useDisconnectWallet } from '../hooks/wallet/useDisconnectWallet.js';
 import { useSwitchAccount } from '../hooks/wallet/useSwitchAccount.js';
@@ -29,11 +28,9 @@ export function AccountDropdownMenu({ currentAccount }: AccountDropdownMenuProps
         <DropdownMenu.Root modal={false}>
             <StyleMarker>
                 <DropdownMenu.Trigger asChild>
-                    <Button size="lg" className={styles.connectedAccount}>
-                        <Text mono weight="bold">
-                            {currentAccount.label ?? formatAddress(currentAccount.address)}
-                        </Text>
-                        <ChevronIcon />
+                    <Button size="md" className={styles.connectedAccount}>
+                        <Text>{currentAccount.label ?? formatAddress(currentAccount.address)}</Text>
+                        <ChevronIcon className={styles.icon} />
                     </Button>
                 </DropdownMenu.Trigger>
             </StyleMarker>
@@ -74,7 +71,7 @@ export function AccountDropdownMenuItem({
             className={clsx(styles.menuItem, styles.switchAccountMenuItem)}
             onSelect={() => switchAccount({ account })}
         >
-            <Text mono>{account.label ?? formatAddress(account.address)}</Text>
+            <Text>{account.label ?? formatAddress(account.address)}</Text>
             {active ? <CheckIcon /> : null}
         </DropdownMenu.Item>
     );

diff --git a/sdk/dapp-kit/src/components/ConnectButton.tsx b/sdk/dapp-kit/src/components/ConnectButton.tsx
@@ -14,10 +14,7 @@ type ConnectButtonProps = {
     connectText?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
-export function ConnectButton({
-    connectText = 'Connect Wallet',
-    ...buttonProps
-}: ConnectButtonProps) {
+export function ConnectButton({ connectText = 'Connect', ...buttonProps }: ConnectButtonProps) {
     const currentAccount = useCurrentAccount();
     return currentAccount ? (
         <AccountDropdownMenu currentAccount={currentAccount} />

diff --git a/sdk/dapp-kit/src/components/WalletProvider.tsx b/sdk/dapp-kit/src/components/WalletProvider.tsx
@@ -19,11 +19,22 @@ import { useUnsafeBurnerWallet } from '../hooks/wallet/useUnsafeBurnerWallet.js'
 import { useWalletPropertiesChanged } from '../hooks/wallet/useWalletPropertiesChanged.js';
 import { useWalletsChanged } from '../hooks/wallet/useWalletsChanged.js';
 import { lightTheme } from '../themes/lightTheme.js';
-import type { Theme } from '../themes/themeContract.js';
+import type { DynamicTheme, Theme } from '../themes/themeContract.js';
 import { createInMemoryStore } from '../utils/stateStorage.js';
 import { getRegisteredWallets } from '../utils/walletUtils.js';
 import { createWalletStore } from '../walletStore.js';
 import { InjectedThemeStyles } from './styling/InjectedThemeStyles.js';
+import { darkTheme } from '../themes/darkTheme.js';
+
+const themeWithSelectorAndMediaQuery: DynamicTheme[] = [
+    {
+        selector: '.dark',
+        variables: darkTheme,
+    },
+    {
+        variables: lightTheme,
+    },
+];
 
 export type WalletProviderProps = {
     /** A list of wallets that are sorted to the top of the wallet list, if they are available to connect to. By default, wallets are sorted by the order they are loaded in. */
@@ -59,7 +70,7 @@ export function WalletProvider({
     storageKey = DEFAULT_STORAGE_KEY,
     enableUnsafeBurner = false,
     autoConnect = false,
-    theme = lightTheme,
+    theme = themeWithSelectorAndMediaQuery,
     children,
 }: WalletProviderProps) {
     const storeRef = useRef(

diff --git a/sdk/dapp-kit/src/components/connect-modal/ConnectModal.css.ts b/sdk/dapp-kit/src/components/connect-modal/ConnectModal.css.ts
@@ -15,60 +15,42 @@ export const overlay = style({
 });
 
 export const title = style({
-    paddingLeft: 8,
+    color: themeVars.colors.body,
+    fontSize: themeVars.fontSizes.xlarge,
+    fontWeight: themeVars.fontWeights.medium,
+    margin: 0,
+});
+
+export const separator = style({
+    height: 1,
+    backgroundColor: themeVars.backgroundColors.dropdownMenuSeparator,
+    width: '100%',
 });
 
 export const content = style({
     backgroundColor: themeVars.backgroundColors.modalPrimary,
     borderRadius: themeVars.radii.xlarge,
     color: themeVars.colors.body,
     position: 'fixed',
-    bottom: 16,
-    left: 16,
-    right: 16,
+    top: 0,
+    left: '50%',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between',
     overflow: 'hidden',
     minHeight: '50vh',
     maxHeight: '85vh',
-    maxWidth: 700,
+    width: '330px',
+    transform: 'translate(-50%, 100%)',
     '@media': {
         'screen and (min-width: 768px)': {
             flexDirection: 'row',
-            width: '100%',
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
         },
     },
 });
 
-export const whatIsAWalletButton = style({
-    backgroundColor: themeVars.backgroundColors.modalSecondary,
-    padding: 16,
-    '@media': {
-        'screen and (min-width: 768px)': {
-            display: 'none',
-        },
-    },
-});
-
-export const viewContainer = style({
-    display: 'none',
-    padding: 20,
-    flexGrow: 1,
-    '@media': {
-        'screen and (min-width: 768px)': {
-            display: 'flex',
-        },
-    },
-});
-
-export const selectedViewContainer = style({
-    display: 'flex',
-});
-
 export const backButtonContainer = style({
     position: 'absolute',
     top: 20,
@@ -89,37 +71,14 @@ export const closeButtonContainer = style({
 export const walletListContent = style({
     display: 'flex',
     flexDirection: 'column',
+    width: '100%',
     flexGrow: 1,
-    gap: 24,
-    padding: 20,
+    gap: themeVars.spacing.medium,
+    padding: themeVars.spacing.medium,
     backgroundColor: themeVars.backgroundColors.modalPrimary,
     '@media': {
         'screen and (min-width: 768px)': {
             backgroundColor: themeVars.backgroundColors.modalSecondary,
         },
     },
 });
-
-export const walletListContainer = style({
-    display: 'flex',
-    justifyContent: 'space-between',
-    flexDirection: 'column',
-    flexGrow: 1,
-    '@media': {
-        'screen and (min-width: 768px)': {
-            flexDirection: 'row',
-            flexBasis: 240,
-            flexGrow: 0,
-            flexShrink: 0,
-        },
-    },
-});
-
-export const walletListContainerWithViewSelected = style({
-    display: 'none',
-    '@media': {
-        'screen and (min-width: 768px)': {
-            display: 'flex',
-        },
-    },
-});