feat: Move dapp connection icon (#466)

onbloc · Apr 8, 2024 · 0d2b7fd · 0d2b7fd
1 parent 62bbbab
commit 0d2b7fd
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 37 deletions.
diff --git a/packages/adena-extension/src/components/atoms/icon/icon-assets/icon-connected.tsx b/packages/adena-extension/src/components/atoms/icon/icon-assets/icon-connected.tsx
@@ -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;
diff --git a/packages/adena-extension/src/components/atoms/status-dot/index.tsx b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
@@ -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;
@@ -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;
@@ -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>
   );
 };
diff --git a/packages/adena-extension/src/router/popup/header/approve-menu/index.tsx b/packages/adena-extension/src/router/popup/header/approve-menu/index.tsx
@@ -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,
@@ -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 => {
@@ -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);
@@ -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)}
@@ -97,10 +101,9 @@ const ApproveMenu = (): JSX.Element => {
               </Text>
             </Text>
           </CopyTooltip>
-          <StatusDot status={isEstablished} tooltipText={getTooltipText()} />
-        </>
+        </StyledCenterWrapper>
       )}
-    </Wrapper>
+    </StyledContainer>
   );
 };
 

diff --git a/packages/adena-extension/src/router/popup/header/top-menu/index.tsx b/packages/adena-extension/src/router/popup/header/top-menu/index.tsx
@@ -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();
@@ -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>