From 3e8a8abe3d13b52781c61c49c8ae8ca4c2c9a324 Mon Sep 17 00:00:00 2001 From: Pavlos Chrysochoidis <10210143+pchrysochoidis@users.noreply.github.com> Date: Mon, 23 Jan 2023 22:23:34 +0000 Subject: [PATCH] wallet-ext: button connected to component * implement figma button component to reuse in dapp status and (later) for account selector --- apps/wallet/package.json | 1 + .../app/shared/ButtonConnectedTo.stories.tsx | 48 +++++++++++ .../src/ui/app/shared/ButtonConnectedTo.tsx | 51 +++++++++++ .../shared/dapp-status/DappStatus.module.scss | 49 +---------- .../src/ui/app/shared/dapp-status/index.tsx | 29 ++----- pnpm-lock.yaml | 85 +++---------------- 6 files changed, 118 insertions(+), 145 deletions(-) create mode 100644 apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx create mode 100644 apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx diff --git a/apps/wallet/package.json b/apps/wallet/package.json index ac6b5bc7a0c64..65f4ed1630d06 100644 --- a/apps/wallet/package.json +++ b/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", diff --git a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx new file mode 100644 index 0000000000000..b27eeff082ee5 --- /dev/null +++ b/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; + +export const Default: StoryObj = { + args: { + text: 'Button', + }, +}; + +export const LightGrey: StoryObj = { + args: { + text: 'Button', + bgOnHover: 'grey', + }, +}; + +export const Disabled: StoryObj = { + args: { + text: 'Button', + bgOnHover: 'grey', + disabled: true, + }, +}; + +export const LongText: StoryObj = { + render: (props) => { + return ( +
+ +
+ ); + }, + args: { + text: 'Button with very long text', + bgOnHover: 'grey', + iconBefore: , + iconAfter: , + }, +}; diff --git a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx new file mode 100644 index 0000000000000..88e5ede29ef05 --- /dev/null +++ b/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, + Omit, 'ref' | 'className'> { + iconBefore?: ReactNode; + text?: string; + iconAfter?: ReactNode; +} + +export const ButtonConnectedTo = forwardRef< + HTMLButtonElement, + ButtonConnectedToProps +>(({ bgOnHover, iconBefore, iconAfter, text, ...rest }, ref) => { + return ( + + ); +}); + +ButtonConnectedTo.displayName = 'ButtonConnectedTo'; diff --git a/apps/wallet/src/ui/app/shared/dapp-status/DappStatus.module.scss b/apps/wallet/src/ui/app/shared/dapp-status/DappStatus.module.scss index 4eb1928b2fc9d..8087922877112 100644 --- a/apps/wallet/src/ui/app/shared/dapp-status/DappStatus.module.scss +++ b/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; } diff --git a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx index e377fce9452f1..5e9c9bc9b7302 100644 --- a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx +++ b/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 ( <> - } + text={activeOrigin || ''} + iconAfter={} ref={reference} {...getReferenceProps()} - > - - - {(isConnected && activeOrigin) || 'Not connected'} - - {isConnected ? ( - - ) : null} - + /> {visible ? ( =10.0.0'} - peerDependencies: - postcss: ^8.0.0 - dependencies: - postcss-value-parser: 4.2.0 - read-cache: 1.0.0 - resolve: 1.22.1 - dev: true - /postcss-import/14.1.0_postcss@8.4.21: resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} engines: {node: '>=10.0.0'} @@ -14791,15 +14782,6 @@ packages: postcss: 8.4.21 dev: true - /postcss-js/4.0.0: - resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} - engines: {node: ^12 || ^14 || >= 16} - peerDependencies: - postcss: ^8.3.3 - dependencies: - camelcase-css: 2.0.1 - dev: true - /postcss-js/4.0.0_postcss@8.4.21: resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} engines: {node: ^12 || ^14 || >= 16} @@ -14966,15 +14948,6 @@ packages: postcss: 8.4.21 dev: true - /postcss-nested/6.0.0: - resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.2.14 - dependencies: - postcss-selector-parser: 6.0.11 - dev: true - /postcss-nested/6.0.0_postcss@8.4.21: resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} engines: {node: '>=12.0'} @@ -17378,42 +17351,6 @@ packages: resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} engines: {node: '>=12.13.0'} hasBin: true - peerDependencies: - postcss: ^8.0.9 - dependencies: - arg: 5.0.2 - chokidar: 3.5.3 - color-name: 1.1.4 - detective: 5.2.1 - didyoumean: 1.2.2 - dlv: 1.1.3 - fast-glob: 3.2.12 - glob-parent: 6.0.2 - is-glob: 4.0.3 - lilconfig: 2.0.6 - micromatch: 4.0.5 - normalize-path: 3.0.0 - object-hash: 3.0.0 - picocolors: 1.0.0 - postcss: 8.4.21 - postcss-import: 14.1.0 - postcss-js: 4.0.0 - postcss-load-config: 3.1.4 - postcss-nested: 6.0.0 - postcss-selector-parser: 6.0.11 - postcss-value-parser: 4.2.0 - quick-lru: 5.1.1 - resolve: 1.22.1 - transitivePeerDependencies: - - ts-node - dev: true - - /tailwindcss/3.2.4_aesdjsunmf4wiehhujt67my7tu: - resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} - engines: {node: '>=12.13.0'} - hasBin: true - peerDependencies: - postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3 @@ -17432,7 +17369,7 @@ packages: postcss: 8.4.21 postcss-import: 14.1.0_postcss@8.4.21 postcss-js: 4.0.0_postcss@8.4.21 - postcss-load-config: 3.1.4_aesdjsunmf4wiehhujt67my7tu + postcss-load-config: 3.1.4_postcss@8.4.21 postcss-nested: 6.0.0_postcss@8.4.21 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 @@ -17440,14 +17377,12 @@ packages: resolve: 1.22.1 transitivePeerDependencies: - ts-node - dev: false + dev: true - /tailwindcss/3.2.4_postcss@8.4.21: + /tailwindcss/3.2.4_ts-node@10.9.1: resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} engines: {node: '>=12.13.0'} hasBin: true - peerDependencies: - postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3 @@ -17466,7 +17401,7 @@ packages: postcss: 8.4.21 postcss-import: 14.1.0_postcss@8.4.21 postcss-js: 4.0.0_postcss@8.4.21 - postcss-load-config: 3.1.4_postcss@8.4.21 + postcss-load-config: 3.1.4_aesdjsunmf4wiehhujt67my7tu postcss-nested: 6.0.0_postcss@8.4.21 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 @@ -17474,7 +17409,7 @@ packages: resolve: 1.22.1 transitivePeerDependencies: - ts-node - dev: true + dev: false /tapable/2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}