feat: Add a network label (#443)

Author: jinoosss

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>
   );
 };