wallet-ext: button connected to component

* implement figma button component to reuse in dapp status and (later) for account selector

apps/wallet/package.json

@@ -117,6 +117,7 @@
         "@growthbook/growthbook-react": "^0.10.1",
         "@metamask/browser-passworder": "^4.0.2",
         "@mysten/core": "workspace:*",
+        "@mysten/icons": "workspace:*",
         "@mysten/sui.js": "workspace:*",
         "@mysten/wallet-standard": "workspace:*",
         "@noble/hashes": "^1.1.5",

apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import Icon, { SuiIcons } from '../components/icon';
+import { ButtonConnectedTo } from './ButtonConnectedTo';
+
+export default {
+    component: ButtonConnectedTo,
+} as Meta<typeof ButtonConnectedTo>;
+
+export const Default: StoryObj<typeof ButtonConnectedTo> = {
+    args: {
+        text: 'Button',
+    },
+};
+
+export const LightGrey: StoryObj<typeof ButtonConnectedTo> = {
+    args: {
+        text: 'Button',
+        bgOnHover: 'grey',
+    },
+};
+
+export const Disabled: StoryObj<typeof ButtonConnectedTo> = {
+    args: {
+        text: 'Button',
+        bgOnHover: 'grey',
+        disabled: true,
+    },
+};
+
+export const LongText: StoryObj<typeof ButtonConnectedTo> = {
+    render: (props) => {
+        return (
+            <div className="w-28">
+                <ButtonConnectedTo {...props} />
+            </div>
+        );
+    },
+    args: {
+        text: 'Button with very long text',
+        bgOnHover: 'grey',
+        iconBefore: <Icon icon={SuiIcons.Add} />,
+        iconAfter: <Icon icon={SuiIcons.Add} />,
+    },
+};

apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+
+const styles = cva(
+    [
+        'cursor-pointer outline-0 flex flex-row items-center py-1 px-2 gap-1 rounded-2xl',
+        'transition text-body-small font-medium border border-solid max-w-full min-w-0',
+        'border-transparent bg-transparent',
+        'hover:text-hero hover:bg-sui-light hover:border-sui',
+        'focus:text-hero focus:bg-sui-light focus:border-sui',
+        'active:text-steel active:bg-gray-45 active:border-transparent',
+        'disabled:text-gray-60 disabled:bg-transparent disabled:border-transparent',
+    ],
+    {
+        variants: {
+            bgOnHover: {
+                blueLight: ['text-hero'],
+                grey: ['text-steel-dark'],
+            },
+        },
+        defaultVariants: {
+            bgOnHover: 'blueLight',
+        },
+    }
+);
+
+export interface ButtonConnectedToProps
+    extends VariantProps<typeof styles>,
+        Omit<ComponentProps<'button'>, 'ref' | 'className'> {
+    iconBefore?: ReactNode;
+    text?: string;
+    iconAfter?: ReactNode;
+}
+
+export const ButtonConnectedTo = forwardRef<
+    HTMLButtonElement,
+    ButtonConnectedToProps
+>(({ bgOnHover, iconBefore, iconAfter, text, ...rest }, ref) => {
+    return (
+        <button {...rest} ref={ref} className={styles({ bgOnHover })}>
+            {iconBefore}
+            <span className="truncate">{text}</span>
+            {iconAfter}
+        </button>
+    );
+});
+
+ButtonConnectedTo.displayName = 'ButtonConnectedTo';

apps/wallet/src/ui/app/shared/dapp-status/DappStatus.module.scss

@@ -1,59 +1,12 @@
 @use '_values/colors';
 @use '_utils';
 
-.container {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    background: transparent;
-    outline: none;
-    color: colors.$issue;
-    border: 1px solid colors.$gray-55;
-    border-radius: 20px;
-    padding: 4px 8px;
-    cursor: default;
-    overflow: hidden;
-    flex: 0 1 auto;
-    transition: all 150ms ease-in-out;
-
-    @include utils.typography('Primary/BodySmall-M');
-
-    &.connected {
-        background-color: colors.$sui-blue-light;
-        color: colors.$cta-blue;
-        border: none;
-        cursor: pointer;
-
-        &:hover,
-        &:focus {
-            border: 1px solid colors.$sui-blue;
-        }
-
-        &:active,
-        &.active {
-            color: colors.$sui-blue;
-            border: none;
-        }
-    }
-}
-
 .icon {
-    margin-right: 4px;
     font-size: 6px;
-
-    &.connected {
-        color: colors.$success;
-    }
-}
-
-.label {
-    white-space: nowrap;
-
-    @include utils.overflow-ellipsis;
+    color: colors.$success;
 }
 
 .chevron {
-    margin-left: 6px;
     font-size: 11px;
 }
 

apps/wallet/src/ui/app/shared/dapp-status/index.tsx

@@ -9,12 +9,12 @@ import {
     offset,
     arrow,
 } from '@floating-ui/react';
-import cn from 'classnames';
+import { ChevronDown12, Dot12 } from '@mysten/icons';
 import { motion, AnimatePresence } from 'framer-motion';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 
+import { ButtonConnectedTo } from '../ButtonConnectedTo';
 import { appDisconnect } from './actions';
-import Icon, { SuiIcons } from '_components/icon';
 import Loading from '_components/loading';
 import { useAppDispatch, useAppSelector } from '_hooks';
 import { createDappStatusSelector } from '_redux/slices/permissions';
@@ -44,7 +44,6 @@ function DappStatus() {
     const isConnected = useAppSelector(dappStatusSelector);
     const [disconnecting, setDisconnecting] = useState(false);
     const [visible, setVisible] = useState(false);
-    const Component = isConnected ? 'button' : 'span';
     const onHandleClick = useCallback(
         (e: boolean) => {
             if (!disconnecting) {
@@ -97,27 +96,13 @@ function DappStatus() {
     }
     return (
         <>
-            <Component
-                type="button"
-                className={cn(st.container, {
-                    [st.connected]: isConnected,
-                    [st.active]: visible,
-                })}
-                disabled={!isConnected}
+            <ButtonConnectedTo
+                iconBefore={<Dot12 className="text-success" />}
+                text={activeOrigin || ''}
+                iconAfter={<ChevronDown12 />}
                 ref={reference}
                 {...getReferenceProps()}
-            >
-                <Icon
-                    icon="circle-fill"
-                    className={cn(st.icon, { [st.connected]: isConnected })}
-                />
-                <span className={st.label}>
-                    {(isConnected && activeOrigin) || 'Not connected'}
-                </span>
-                {isConnected ? (
-                    <Icon icon={SuiIcons.ChevronDown} className={st.chevron} />
-                ) : null}
-            </Component>
+            />
             <AnimatePresence>
                 {visible ? (
                     <motion.div