diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx index 6ff98250c5..8201241a16 100644 --- a/src/components/common/ConnectWallet/ConnectionCenter.tsx +++ b/src/components/common/ConnectWallet/ConnectionCenter.tsx @@ -1,6 +1,7 @@ import { Popover, ButtonBase, Typography, Paper } from '@mui/material' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ExpandLessIcon from '@mui/icons-material/ExpandLess' +import classnames from 'classnames' import { useState, type MouseEvent, type ReactElement } from 'react' import KeyholeIcon from '@/components/common/icons/KeyholeIcon' @@ -29,7 +30,6 @@ const ConnectionCenter = (): ReactElement => { Not connected -
palette.error.main }}> Connect wallet @@ -52,7 +52,7 @@ const ConnectionCenter = (): ReactElement => { }} sx={{ mt: 1 }} > - + diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx index b65796b178..5f0442f50a 100644 --- a/src/components/common/ConnectWallet/WalletDetails.tsx +++ b/src/components/common/ConnectWallet/WalletDetails.tsx @@ -1,4 +1,4 @@ -import { Divider, Typography } from '@mui/material' +import { Box, Divider, SvgIcon, Typography } from '@mui/material' import type { ReactElement } from 'react' import LockIcon from '@/public/images/common/lock.svg' @@ -8,7 +8,11 @@ import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin' const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => { return ( <> - + + + + + diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css index a4b65433e6..b41bbc8399 100644 --- a/src/components/common/ConnectWallet/styles.module.css +++ b/src/components/common/ConnectWallet/styles.module.css @@ -21,6 +21,10 @@ border: 1px solid var(--color-border-light); } +.largeGap { + gap: var(--space-2); +} + .addressName { text-align: center; overflow: hidden; diff --git a/src/components/common/icons/KeyholeIcon/index.tsx b/src/components/common/icons/KeyholeIcon/index.tsx index 013f7a9fb6..cbf2d306b5 100644 --- a/src/components/common/icons/KeyholeIcon/index.tsx +++ b/src/components/common/icons/KeyholeIcon/index.tsx @@ -1,9 +1,32 @@ -import Keyhole from '@/components/common/icons/KeyholeIcon/keyhole.svg' +import css from '@/components/common/icons/CircularIcon/styles.module.css' +import LockIcon from '@/public/images/common/lock.svg' +import { Badge, SvgIcon } from '@mui/material' -import CircularIcon from '../CircularIcon' - -const KeyholeIcon = ({ size = 40 }: { size?: number }) => { - return +const KeyholeIcon = ({ size = 28 }: { size?: number }) => { + return ( + + palette.border.main, + }, + }} + /> + + ) } export default KeyholeIcon diff --git a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx index b0397da9d0..6861af0638 100644 --- a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx +++ b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx @@ -8,6 +8,7 @@ import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule' const mockChainInfo = { chainId: '100', + chainName: 'Gnosis Chain', l2: false, nativeCurrency: { symbol: 'ETH', diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx index a36e592d26..40225cdf2f 100644 --- a/src/components/new-safe/create/steps/ReviewStep/index.tsx +++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx @@ -78,7 +78,7 @@ export const NetworkFee = ({ height={16} style={{ margin: '-3px 0px -3px 4px' }} />{' '} - Gnosis Chain + {chain?.chainName}
)