From 9b794c5c18155635b831b60bd3f0306ef4cfb4b5 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Fri, 8 Nov 2024 11:12:58 +0100 Subject: [PATCH] Add new design for wallet menu --- .../src/components/WalletMenu/WalletMenu.tsx | 192 +++++++++--------- fabric/src/components/Button/IconAction.tsx | 19 +- fabric/src/components/Button/WalletButton.tsx | 8 +- fabric/src/icon-svg/icon-centrifuge.svg | 17 +- fabric/src/icon-svg/icon-copy.svg | 5 +- 5 files changed, 123 insertions(+), 118 deletions(-) diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx index f1b3b6fc15..779148c730 100644 --- a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx +++ b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx @@ -1,5 +1,7 @@ import { Box, + Button, + Card, IconAnchor, IconButton, IconCopy, @@ -7,7 +9,6 @@ import { IconPower, IconSwitch, Menu, - MenuItem, MenuItemGroup, Popover, Shelf, @@ -18,7 +19,6 @@ import { import { getAddress } from 'ethers' import * as React from 'react' import { Link } from 'react-router-dom' -import styled from 'styled-components' import { useBalances } from '../../hooks/useBalances' import { useEns } from '../../hooks/useEns' import { copyToClipboard } from '../../utils/copyToClipboard' @@ -86,8 +86,7 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) { )} renderContent={(props, ref, state) => ( - - + + - {!isEvmOnSubstrate && ( - - - - - {truncateAddress(formattedAddress)} - - - - - copyToClipboard(formattedAddress)} title="Copy address to clipboard"> - - - {subScanUrl && ( - - - - )} - + + + + {truncateAddress(formattedAddress)} - - )} - - + + copyToClipboard(formattedAddress)} + title="Copy address to clipboard" + > + + + {subScanUrl && ( + + + + )} + + + + + + + Balance - state.close()}> - - {balance && formatBalanceAbbreviated(balance, symbol)} - - + + state.close()}> + {balance && formatBalanceAbbreviated(balance)} + + + {symbol} + + {!!menuItems?.length && menuItems.map((item, index) => {item})} - - - - Network - - - - {connectedNetworkName} - - - - - - {wallet && ( - - - Wallet + + + + + Network - - {wallet.title} + + {connectedNetworkName} - )} - {connectedType === 'substrate' || (evm.accounts && evm.accounts.length > 1) ? ( - } - minHeight={0} - onClick={() => { - state.close() - showAccounts() - }} - /> - ) : ( - } - minHeight={0} + + + + {wallet && ( + + + Wallet + + + + {wallet.title} + + + )} + + + + + + + )} /> ) } - -const BalanceLink = styled(Text)` - &:hover { - color: ${({ theme }) => theme.colors.textInteractive}; - } -` diff --git a/fabric/src/components/Button/IconAction.tsx b/fabric/src/components/Button/IconAction.tsx index 524e851865..a18168615c 100644 --- a/fabric/src/components/Button/IconAction.tsx +++ b/fabric/src/components/Button/IconAction.tsx @@ -1,7 +1,11 @@ import styled, { css } from 'styled-components' +interface IconActionProps { + size?: string +} -export const iconActionStyles = css` - --size: 22px; +export const iconActionStyles = css` + --size: ${({ size }) => size || '22px'}; + --icon-size: calc(var(--size) - 4px); appearance: none; display: block; @@ -16,18 +20,18 @@ export const iconActionStyles = css` cursor: pointer; svg { - display: block; - width: 100%; - height: 100%; + width: var(--icon-size); + height: var(--icon-size); stroke: currentColor; } &:focus-visible, &:hover { - background-color: ${({ theme }) => theme.colors.blueScale[100]}; - color: ${({ theme }) => theme.colors.accentPrimary}; + background-color: ${({ theme }) => theme.colors.yellowScale[50]}; + color: ${({ theme }) => theme.colors.textPrimary}; } ` + export const IconAnchor = styled.a` ${iconActionStyles} ` @@ -37,4 +41,5 @@ export const IconButton = styled.button` ` IconButton.defaultProps = { type: 'button', + size: '22px', } diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx index 2ced79aab2..e47ce45b0b 100644 --- a/fabric/src/components/Button/WalletButton.tsx +++ b/fabric/src/components/Button/WalletButton.tsx @@ -18,6 +18,7 @@ export type WalletButtonProps = Omit< alias?: string balance?: string icon?: IconTheme | React.ReactElement + title: string } const StyledButton = styled.button` @@ -50,6 +51,7 @@ export function WalletButton({ displayAddress = address, alias, balance, + title, ...buttonProps }: WalletButtonProps) { return ( @@ -69,7 +71,7 @@ export function WalletButton({ loadingMessage={loadingMessage} active={active} > - {address && alias ? ( + {title && alias ? ( - {displayAddress ? truncate(displayAddress) : connectLabel} + {title || connectLabel} )} - {address && balance && ( + {title && balance && ( {balance} diff --git a/fabric/src/icon-svg/icon-centrifuge.svg b/fabric/src/icon-svg/icon-centrifuge.svg index 2354a3b399..4f643da94b 100644 --- a/fabric/src/icon-svg/icon-centrifuge.svg +++ b/fabric/src/icon-svg/icon-centrifuge.svg @@ -1,10 +1,9 @@ - - - - - - - - - + + + + + + + + diff --git a/fabric/src/icon-svg/icon-copy.svg b/fabric/src/icon-svg/icon-copy.svg index 3342fddba3..761ec46045 100644 --- a/fabric/src/icon-svg/icon-copy.svg +++ b/fabric/src/icon-svg/icon-copy.svg @@ -1,4 +1,3 @@ - - - + +