Skip to content

Commit

Permalink
fix: connected apps network badge (#825)
Browse files Browse the repository at this point in the history
  • Loading branch information
@estebanmino
estebanmino authored Aug 2, 2023
1 parent 0836434 commit 7b13e07
Showing 1 changed file with 107 additions and 98 deletions.
205 changes: 107 additions & 98 deletions src/entries/popup/pages/home/ConnectedApps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
Stack,
Symbol,
Text,
TextOverflow,
} from '~/design-system';
import { Row, Rows } from '~/design-system/components/Rows/Rows';

Expand Down Expand Up @@ -185,111 +186,119 @@ const ConnectedApp = ({
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{disconnectButtonVisible && (
<Box position="absolute" paddingTop="12px" style={{ right: 20 }}>
<ButtonSymbol
color="red"
height="28px"
variant="raised"
symbol="xmark"
borderRadius="8px"
onClick={disconnectAppSession}
/>
</Box>
)}
<ConnectedAppNetworkMenu
url={url}
menuTriggerId={`connected-app-menu-${appHost}`}
>
<Inset horizontal="12px" vertical="8px">
<Inline alignHorizontal="justify" alignVertical="center">
<Columns space="8px">
<Column width="content">
<Box
style={{
width: '36px',
height: '36px',
overflow: 'hidden',
}}
>
<ExternalImage
mask={appsConnectedImageMask}
src={appLogo}
width="36"
height="36"
/>
</Box>
<Box
position="absolute"
style={{
marginLeft: '-7px',
marginTop: '-10.5px',
}}
>
<Box
style={{
height: 14,
width: 14,
borderRadius: 7,
}}
>
<Inline
alignHorizontal="center"
alignVertical="center"
height="full"
<Columns>
<Column>
<ConnectedAppNetworkMenu
url={url}
menuTriggerId={`connected-app-menu-${appHost}`}
>
<Inset horizontal="12px" vertical="8px">
<Inline alignHorizontal="justify" alignVertical="center">
<Columns space="8px">
<Column width="content">
<Box
style={{
width: '36px',
height: '36px',
overflow: 'hidden',
}}
>
<Bleed top="7px">
<ChainBadge chainId={appSession?.chainId} size="14" />
</Bleed>
</Inline>
</Box>
</Box>
</Column>

<Column>
<Box>
<Stack space="8px">
<Box style={{ wordBreak: 'break-all' }}>
<Text
align="left"
size="14pt"
weight="semibold"
color="label"
>
{appName || appHost}
</Text>
<ExternalImage
mask={appsConnectedImageMask}
src={appLogo}
width="36"
height="36"
/>
</Box>
<Inline space="4px" alignVertical="center">
<Box
style={{
marginLeft: '-7px',
marginTop: '-10.5px',
}}
>
<Box
background="fill"
borderRadius="30px"
style={{
width: '16px',
height: '16px',
overflow: 'hidden',
height: 14,
width: 14,
borderRadius: 7,
}}
>
<WalletAvatar
address={address}
size={16}
emojiSize="12pt"
/>
<Inline
alignHorizontal="center"
alignVertical="center"
height="full"
>
<Bleed top="7px">
<ChainBadge
chainId={appSession?.chainId}
size="14"
/>
</Bleed>
</Inline>
</Box>
<Text
color="labelTertiary"
size="12pt"
weight="semibold"
>
{ensName || truncateAddress(address)}
</Text>
</Inline>
</Stack>
</Box>
</Column>
</Columns>
</Inline>
</Inset>
</ConnectedAppNetworkMenu>
</Box>
</Column>

<Column>
<Box>
<Stack space="8px">
<Box style={{ wordBreak: 'break-all' }}>
<TextOverflow
align="left"
size="14pt"
weight="semibold"
color="label"
>
{appName || appHost}
</TextOverflow>
</Box>
<Inline space="4px" alignVertical="center">
<Box
background="fill"
borderRadius="30px"
style={{
width: '16px',
height: '16px',
overflow: 'hidden',
}}
>
<WalletAvatar
address={address}
size={16}
emojiSize="12pt"
/>
</Box>
<Text
color="labelTertiary"
size="12pt"
weight="semibold"
>
{ensName || truncateAddress(address)}
</Text>
</Inline>
</Stack>
</Box>
</Column>
</Columns>
</Inline>
</Inset>
</ConnectedAppNetworkMenu>
</Column>
<Column width="content">
{disconnectButtonVisible && (
<Box paddingTop="12px" paddingRight="12px">
<ButtonSymbol
color="red"
height="28px"
variant="raised"
symbol="xmark"
borderRadius="8px"
onClick={disconnectAppSession}
/>
</Box>
)}
</Column>
</Columns>
</Box>
</Box>
);
Expand Down

0 comments on commit 7b13e07

Please sign in to comment.