Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: connected apps network badge #825

Merged
merged 3 commits into from
Aug 2, 2023
Merged

fix: connected apps network badge #825

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e662c59
fix
estebanmino Aug 1, 2023
03b9c27
fix disconnect button
estebanmino Aug 1, 2023
b39ef72
Merge branch 'master' into @esteban/fix-connected-apps-badge
estebanmino Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 107 additions & 98 deletions src/entries/popup/pages/home/ConnectedApps.tsx
View file
Open in desktop
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
Loading