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

feat: Move dapp connection icon #466

Merged
merged 1 commit into from
Apr 8, 2024
Merged

feat: Move dapp connection icon #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 23 additions & 0 deletions packages/adena-extension/src/components/atoms/icon/icon-assets/icon-connected.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React, { ReactElement } from 'react';

const IconConnected = (): ReactElement => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15' fill='none'>
<rect x='0.5' width='15' height='15' rx='7.5' fill='#40C55D' fillOpacity='0.3' />
<path
d='M11.2559 4.24405C10.3967 3.38479 9.00636 3.38479 8.1482 4.24405L7.16411 5.22824L7.68205 5.74624L8.66614 4.76205C9.21252 4.21562 10.1347 4.15772 10.7379 4.76205C11.3422 5.36638 11.2843 6.28759 10.7379 6.83403L9.75383 7.81821L10.2728 8.33722L11.2569 7.35303C12.114 6.49377 12.114 5.10332 11.2559 4.24405ZM7.33472 10.2386C6.78835 10.785 5.8662 10.8429 5.26295 10.2386C4.65868 9.63424 4.71657 8.71302 5.26295 8.16659L6.24704 7.1824L5.72808 6.66339L4.74399 7.64758C3.88482 8.50684 3.88482 9.8973 4.74399 10.7555C5.60317 11.6138 6.99349 11.6148 7.85165 10.7555L8.83574 9.77136L8.3178 9.25336L7.33472 10.2386Z'
fill='#40C55D'
/>
<rect
x='9.66016'
y='6.43945'
width='3.62116'
height='0.621545'
transform='rotate(135 9.66016 6.43945)'
fill='#40C55D'
/>
</svg>
);
};

export default IconConnected;
39 changes: 25 additions & 14 deletions packages/adena-extension/src/components/atoms/status-dot/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React from 'react';
import React, { useMemo, useRef } from 'react';
import styled from 'styled-components';

import { Text } from '@components/atoms';
import mixins from '@styles/mixins';
import { getTheme } from '@styles/theme';
import IconConnected from '../icon/icon-assets/icon-connected';

interface StatusDotProps {
status: boolean;
tooltipText: string;
}

const Dot = styled.div<{ status: boolean }>`
const StyledContainer = styled.div<{ status: boolean }>`
display: ${({ status }): string => (status ? 'flex' : 'none')};
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: ${({ status, theme }): string => (status ? theme.green._5 : theme.red._5)};
width: 15px;
height: 15px;
cursor: pointer;
&:hover > .static-tooltip {
visibility: visible;
Expand All @@ -24,7 +24,8 @@ const Dot = styled.div<{ status: boolean }>`
}
`;

const Tooltip = styled.div`
const StyledTooltip = styled.div<{ descriptionSize: number }>`
position: fixed;
${mixins.flex({ direction: 'row' })};
width: max-content;
height: 25px;
Expand All @@ -33,18 +34,28 @@ const Tooltip = styled.div`
padding: 0px 17px;
background-color: ${getTheme('neutral', '_9')};
border-radius: 13px;
position: absolute;
right: 0px;
top: 20px;
top: 40px;
left: ${({ descriptionSize }): string => `calc(50% - ${descriptionSize / 2}px)`};
transform: scale(0.6);
`;

export const StatusDot = ({ status, tooltipText }: StatusDotProps): JSX.Element => {
const descriptionContainer = useRef<HTMLDivElement>(null);

const descriptionSize = useMemo(() => {
return descriptionContainer.current?.clientWidth || 0;
}, [descriptionContainer.current?.clientWidth, tooltipText]);

return (
<Dot status={status}>
<Tooltip className='static-tooltip'>
<StyledContainer status={status}>
<IconConnected />
<StyledTooltip
ref={descriptionContainer}
className='static-tooltip'
descriptionSize={descriptionSize}
>
<Text type='body3Reg'>{tooltipText}</Text>
</Tooltip>
</Dot>
</StyledTooltip>
</StyledContainer>
);
};
31 changes: 17 additions & 14 deletions packages/adena-extension/src/router/popup/header/approve-menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
import styled, { useTheme } from 'styled-components';

import { getTheme } from '@styles/theme';
import { Text, CopyTooltip, StatusDot } from '@components/atoms';
import { Text, CopyTooltip, StatusDot, Row } from '@components/atoms';
import {
formatAddress,
formatNickname,
Expand All @@ -14,17 +14,20 @@ import { useCurrentAccount } from '@hooks/use-current-account';
import { useAdenaContext } from '@hooks/use-context';
import { useAccountName } from '@hooks/use-account-name';
import { useNetwork } from '@hooks/use-network';
import mixins from '@styles/mixins';

const Wrapper = styled.div`
const StyledContainer = styled(Row)`
width: 100%;
height: 100%;
padding: 0px 20px 0px 12px;
padding: 0px 20px;
justify-content: center;
align-items: center;
border-bottom: 1px solid ${getTheme('neutral', '_7')};
${mixins.flex({ direction: 'row', justify: 'flex-end' })};
.t-approve {
${mixins.positionCenter()}
}
`;

const StyledCenterWrapper = styled(Row)`
width: auto;
height: 100%;
gap: 8px;
`;

const ApproveMenu = (): JSX.Element => {
Expand Down Expand Up @@ -60,7 +63,7 @@ const ApproveMenu = (): JSX.Element => {
if (!currentAccount) {
return;
}
const address = await getCurrentAddress(currentNetwork.addressPrefix) || '';
const address = (await getCurrentAddress(currentNetwork.addressPrefix)) || '';
const currentAccountName = accountNames[currentAccount.id] || currentAccount.name;
setAddress(address);
setAccountName(currentAccountName);
Expand All @@ -86,9 +89,10 @@ const ApproveMenu = (): JSX.Element => {
};

return (
<Wrapper>
<StyledContainer>
{address && (
<>
<StyledCenterWrapper>
<StatusDot status={isEstablished} tooltipText={getTooltipText()} />
<CopyTooltip copyText={address} className='t-approve'>
<Text type='body1Bold' display='inline-flex' style={{ whiteSpace: 'pre' }}>
{formatNickname(accountName, 12)}
Expand All @@ -97,10 +101,9 @@ const ApproveMenu = (): JSX.Element => {
</Text>
</Text>
</CopyTooltip>
<StatusDot status={isEstablished} tooltipText={getTooltipText()} />
</>
</StyledCenterWrapper>
)}
</Wrapper>
</StyledContainer>
);
};

Expand Down
38 changes: 29 additions & 9 deletions packages/adena-extension/src/router/popup/header/top-menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,22 @@ const Header = styled.div`
}
`;

const StyledCenterWrapper = styled.div`
${mixins.flex({ direction: 'row', justify: 'flex-start' })};
width: auto;
height: 100%;
gap: 8px;
& > img {
${mixins.positionCenter()}
}
`;

const StyledRightWrapper = styled.div`
${mixins.flex({ direction: 'row', justify: 'flex-start' })};
width: 15px;
height: 100%;
`;

export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => {
const theme = useTheme();
const { isPopup } = useSessionParams();
Expand Down Expand Up @@ -123,16 +139,20 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => {
<Wrapper>
<Header>
<HamburgerMenuBtn type='button' onClick={toggleMenuHandler} />
<CopyTooltip copyText={currentAddress || ''}>
<Text type='body1Bold' display='inline-flex'>
{formatNickname(currentAccountName, 12)}
<Text type='body1Reg' color={theme.neutral.a}>
{` (${formatAddress(currentAddress || '')})`}
<StyledCenterWrapper>
<StatusDot status={isEstablish} tooltipText={tooltipTextMaker(hostname, isEstablish)} />
<CopyTooltip copyText={currentAddress || ''}>
<Text type='body1Bold' display='inline-flex'>
{formatNickname(currentAccountName, 12)}
<Text type='body1Reg' color={theme.neutral.a}>
{` (${formatAddress(currentAddress || '')})`}
</Text>
</Text>
</Text>
</CopyTooltip>
{isPopup ? <div /> : <ExpandBtn type='button' onClick={popupWindow} />}
{/* <StatusDot status={isEstablish} tooltipText={tooltipTextMaker(hostname, isEstablish)} /> */}
</CopyTooltip>
</StyledCenterWrapper>
<StyledRightWrapper>
{isPopup ? <div /> : <ExpandBtn type='button' onClick={popupWindow} />}
</StyledRightWrapper>
</Header>
<SideMenuLayout open={open} setOpen={setOpen} />
</Wrapper>
Expand Down
Loading