feat: Add a network label (#443)

packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts

@@ -1,25 +1,32 @@
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 import mixins from '@styles/mixins';
 import { FontsType, fonts } from '@styles/theme';
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 interface HighlightNumberWrapperProps {
   fontColor: string;
   fontStyleKey: FontsType;
   minimumFontSize: string;
+  lineHeight?: string;
 }
 
 export const HighlightNumberWrapper = styled.div<HighlightNumberWrapperProps>`
   ${mixins.flex({ direction: 'row', align: 'normal', justify: 'normal' })};
   width: fit-content;
   height: auto;
-  vertical-align: top;
 
   .value {
     display: contents;
-    ${({ fontStyleKey }): FlattenSimpleInterpolation => fonts[fontStyleKey]};
     color: ${({ fontColor }): string => fontColor};
     text-align: bottom;
 
+    ${({ fontStyleKey }): FlattenSimpleInterpolation => fonts[fontStyleKey]};
+    ${({ lineHeight }): FlattenSimpleInterpolation =>
+      lineHeight
+        ? css`
+            line-height: ${lineHeight};
+          `
+        : css``};
+
     &.decimal {
       font-size: ${({ minimumFontSize }): string => minimumFontSize};
     }

packages/adena-extension/src/components/atoms/highlight-number/index.tsx

@@ -7,13 +7,15 @@ export interface HighlightNumberProps {
   fontColor?: string;
   fontStyleKey?: FontsType;
   minimumFontSize?: string;
+  lineHeight?: string;
 }
 
 export const HighlightNumber: React.FC<HighlightNumberProps> = ({
   value,
   fontColor = 'white',
   fontStyleKey = 'header6',
   minimumFontSize = '14px',
+  lineHeight,
 }) => {
   const hasDecimal = value.includes('.');
   const [integer, decimal] = hasDecimal ? value.split('.') : [value, ''];
@@ -23,6 +25,7 @@ export const HighlightNumber: React.FC<HighlightNumberProps> = ({
       fontColor={fontColor}
       fontStyleKey={fontStyleKey}
       minimumFontSize={minimumFontSize}
+      lineHeight={lineHeight}
     >
       <span className='value integer'>{integer}</span>
       <span className='value decimal'>

packages/adena-extension/src/components/molecules/token-balance/index.tsx

@@ -10,6 +10,7 @@ export interface TokenBalanceProps {
   fontColor?: string;
   fontStyleKey?: FontsType;
   minimumFontSize?: string;
+  lineHeight?: string;
 }
 
 export const TokenBalance: React.FC<TokenBalanceProps> = ({
@@ -19,19 +20,22 @@ export const TokenBalance: React.FC<TokenBalanceProps> = ({
   fontColor = 'white',
   fontStyleKey = 'header6',
   minimumFontSize = '14px',
+  lineHeight,
 }) => {
   return (
     <TokenBalanceWrapper
       orientation={orientation}
       fontColor={fontColor}
       fontStyleKey={fontStyleKey}
       minimumFontSize={minimumFontSize}
+      lineHeight={lineHeight}
     >
       <HighlightNumber
         value={value}
         fontColor={fontColor}
         fontStyleKey={fontStyleKey}
         minimumFontSize={minimumFontSize}
+        lineHeight={lineHeight}
       />
       <div className='denom-wrapper'>
         <span className='denom'>{denom}</span>

packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts

@@ -1,11 +1,12 @@
 import { FontsType, fonts } from '@styles/theme';
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 
 interface TokenBalanceWrapperProps {
   orientation: 'VERTICAL' | 'HORIZONTAL';
   fontColor: string;
   fontStyleKey: FontsType;
   minimumFontSize: string;
+  lineHeight?: string;
 }
 
 export const TokenBalanceWrapper = styled.div<TokenBalanceWrapperProps>`
@@ -24,7 +25,12 @@ export const TokenBalanceWrapper = styled.div<TokenBalanceWrapperProps>`
       display: contents;
       color: ${({ fontColor }): string => fontColor};
       ${({ fontStyleKey }): FlattenSimpleInterpolation => fonts[fontStyleKey]};
-      text-align: bottom;
+      ${({ lineHeight }): FlattenSimpleInterpolation =>
+        lineHeight
+          ? css`
+              line-height: ${lineHeight};
+            `
+          : css`sd`};
     }
   }
 `;

packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import { render } from '@testing-library/react';
+import theme from '@styles/theme';
+import MainNetworkLabel, { MainNetworkLabelProps } from './main-network-label';
+import { GlobalPopupStyle } from '@styles/global-style';
+
+describe('MainNetworkLabel Component', () => {
+  it('MainNetworkLabel render', () => {
+    const args: MainNetworkLabelProps = {
+      networkName: 'Network',
+    };
+
+    render(
+      <RecoilRoot>
+        <GlobalPopupStyle />
+        <ThemeProvider theme={theme}>
+          <MainNetworkLabel {...args} />
+        </ThemeProvider>
+      </RecoilRoot>,
+    );
+  });
+});

packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.stories.tsx

@@ -0,0 +1,13 @@
+import MainNetworkLabel, { type MainNetworkLabelProps } from './main-network-label';
+import { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'components/main/MainNetworkLabel',
+  component: MainNetworkLabel,
+} as Meta<typeof MainNetworkLabel>;
+
+export const Default: StoryObj<MainNetworkLabelProps> = {
+  args: {
+    networkName: 'Test3',
+  },
+};

packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.styles.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { View } from '@components/atoms';
+
+export const MainNetworkLabelWrapper = styled(View)`
+  width: 100%;
+  height: auto;
+  background-color: ${({ theme }): string => theme.primary._1};
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+`;

packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { Text } from '@components/atoms';
+import { MainNetworkLabelWrapper } from './main-network-label.styles';
+
+export interface MainNetworkLabelProps {
+  networkName: string;
+}
+
+const MainNetworkLabel: React.FC<MainNetworkLabelProps> = ({ networkName }) => {
+  const theme = useTheme();
+
+  return (
+    <MainNetworkLabelWrapper>
+      <Text
+        style={{ display: 'flex', flexDirection: 'row' }}
+        type='light13'
+        color={theme.primary._2}
+      >
+        You are on <Text type='bold13'>{networkName}</Text>
+      </Text>
+    </MainNetworkLabelWrapper>
+  );
+};
+
+export default MainNetworkLabel;

packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.styles.ts

@@ -0,0 +1,9 @@
+import { View } from '@components/atoms';
+import styled from 'styled-components';
+
+export const MainTokenBalanceWrapper = styled(View)`
+  width: 100%;
+  height: auto;
+  align-items: center;
+  justify-content: center;
+`;

packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TokenBalance } from '@components/molecules';
+import { MainTokenBalanceWrapper } from './main-token-balance.styles';
 
 export interface MainTokenBalanceProps {
   amount: {
@@ -12,14 +13,17 @@ const MainTokenBalance: React.FC<MainTokenBalanceProps> = ({ amount }) => {
   const { value, denom } = amount;
 
   return (
-    <TokenBalance
-      value={value}
-      denom={denom}
-      orientation='VERTICAL'
-      fontColor='white'
-      fontStyleKey='header2'
-      minimumFontSize='24px'
-    />
+    <MainTokenBalanceWrapper>
+      <TokenBalance
+        value={value}
+        denom={denom}
+        orientation='VERTICAL'
+        fontColor='white'
+        fontStyleKey='header2'
+        minimumFontSize='24px'
+        lineHeight='39px'
+      />
+    </MainTokenBalanceWrapper>
   );
 };
 

packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx

@@ -15,11 +15,21 @@ import { useCurrentAccount } from '@hooks/use-current-account';
 import { WalletState } from '@states';
 import { usePreventHistoryBack } from '@hooks/use-prevent-history-back';
 import useAppNavigate from '@hooks/use-app-navigate';
+import { useNetwork } from '@hooks/use-network';
+import MainNetworkLabel from '@components/pages/main/main-network-label/main-network-label';
 
 const Wrapper = styled.main`
-  padding-top: 14px;
+  padding-top: 37px;
   text-align: center;
 
+  .network-label-wrapper {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    top: 0;
+    left: 0;
+  }
+
   .token-balance-wrapper {
     display: flex;
     align-items: center;
@@ -38,6 +48,7 @@ export const WalletMain = (): JSX.Element => {
   usePreventHistoryBack();
   const { navigate } = useAppNavigate();
   const [state] = useRecoilState(WalletState.state);
+  const { currentNetwork } = useNetwork();
   const { currentAccount } = useCurrentAccount();
   const { mainTokenBalance, displayTokenBalances, updateBalanceAmountByAccount } =
     useTokenBalance();
@@ -104,6 +115,9 @@ export const WalletMain = (): JSX.Element => {
 
   return (
     <Wrapper>
+      <div className='network-label-wrapper'>
+        <MainNetworkLabel networkName={currentNetwork.networkName} />
+      </div>
       <div className='token-balance-wrapper'>
         <MainTokenBalance
           amount={{

packages/adena-extension/src/styles/theme.ts

@@ -56,6 +56,8 @@ enum Neutral {
 }
 
 enum Primary {
+  _1 = '#0059ff29',
+  _2 = '#ADCAFF',
   _3 = '#B0CCFF',
   _4 = '#78A7FF',
   _5 = '#377DFF',
@@ -355,6 +357,11 @@ export const fonts: FontsKeyType = {
     font-size: 10.5px;
     line-height: 18px;
   `,
+  bold13: css`
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 19.5px;
+  `,
   light13: css`
     font-weight: 400;
     font-size: 13px;
@@ -387,6 +394,7 @@ export type FontsType =
   | 'captionBold'
   | 'captionReg'
   | 'light1Reg'
+  | 'bold13'
   | 'light13'
   | 'light11';