From 2134c0245f1fa7f766e732326b24146f57f59be5 Mon Sep 17 00:00:00 2001 From: jinoosss Date: Mon, 18 Mar 2024 19:37:54 +0900 Subject: [PATCH] feat: Add a network label (#443) --- .../highlight-number.styles.ts | 13 +++++++--- .../atoms/highlight-number/index.tsx | 3 +++ .../molecules/token-balance/index.tsx | 4 +++ .../token-balance/token-balance.styles.ts | 10 +++++-- .../main-network-label.spec.tsx | 24 +++++++++++++++++ .../main-network-label.stories.tsx | 13 ++++++++++ .../main-network-label.styles.ts | 12 +++++++++ .../main-network-label/main-network-label.tsx | 26 +++++++++++++++++++ .../main-token-balance.styles.ts | 9 +++++++ .../main-token-balance/main-token-balance.tsx | 20 ++++++++------ .../pages/popup/wallet/wallet-main/index.tsx | 16 +++++++++++- packages/adena-extension/src/styles/theme.ts | 8 ++++++ 12 files changed, 144 insertions(+), 14 deletions(-) create mode 100644 packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.spec.tsx create mode 100644 packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.stories.tsx create mode 100644 packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.styles.ts create mode 100644 packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.tsx create mode 100644 packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.styles.ts diff --git a/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts b/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts index 6545831df..3ef7b0b59 100644 --- a/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts +++ b/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` ${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}; } diff --git a/packages/adena-extension/src/components/atoms/highlight-number/index.tsx b/packages/adena-extension/src/components/atoms/highlight-number/index.tsx index a345b2601..2f29f6a57 100644 --- a/packages/adena-extension/src/components/atoms/highlight-number/index.tsx +++ b/packages/adena-extension/src/components/atoms/highlight-number/index.tsx @@ -7,6 +7,7 @@ export interface HighlightNumberProps { fontColor?: string; fontStyleKey?: FontsType; minimumFontSize?: string; + lineHeight?: string; } export const HighlightNumber: React.FC = ({ @@ -14,6 +15,7 @@ export const HighlightNumber: React.FC = ({ 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 = ({ fontColor={fontColor} fontStyleKey={fontStyleKey} minimumFontSize={minimumFontSize} + lineHeight={lineHeight} > {integer} diff --git a/packages/adena-extension/src/components/molecules/token-balance/index.tsx b/packages/adena-extension/src/components/molecules/token-balance/index.tsx index f1e8249d5..55fcb55ef 100644 --- a/packages/adena-extension/src/components/molecules/token-balance/index.tsx +++ b/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 = ({ @@ -19,6 +20,7 @@ export const TokenBalance: React.FC = ({ fontColor = 'white', fontStyleKey = 'header6', minimumFontSize = '14px', + lineHeight, }) => { return ( = ({ fontColor={fontColor} fontStyleKey={fontStyleKey} minimumFontSize={minimumFontSize} + lineHeight={lineHeight} >
{denom} diff --git a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts b/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts index 4c96a0fe1..eb9482357 100644 --- a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts +++ b/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` @@ -24,7 +25,12 @@ export const TokenBalanceWrapper = styled.div` display: contents; color: ${({ fontColor }): string => fontColor}; ${({ fontStyleKey }): FlattenSimpleInterpolation => fonts[fontStyleKey]}; - text-align: bottom; + ${({ lineHeight }): FlattenSimpleInterpolation => + lineHeight + ? css` + line-height: ${lineHeight}; + ` + : css`sd`}; } } `; diff --git a/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.spec.tsx b/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.spec.tsx new file mode 100644 index 000000000..17ae8d4cc --- /dev/null +++ b/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( + + + + + + , + ); + }); +}); diff --git a/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.stories.tsx b/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.stories.tsx new file mode 100644 index 000000000..e971e57e4 --- /dev/null +++ b/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; + +export const Default: StoryObj = { + args: { + networkName: 'Test3', + }, +}; diff --git a/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.styles.ts b/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.styles.ts new file mode 100644 index 000000000..2b7d75228 --- /dev/null +++ b/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; +`; diff --git a/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.tsx b/packages/adena-extension/src/components/pages/main/main-network-label/main-network-label.tsx new file mode 100644 index 000000000..e9db7f652 --- /dev/null +++ b/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 = ({ networkName }) => { + const theme = useTheme(); + + return ( + + + You are on {networkName} + + + ); +}; + +export default MainNetworkLabel; diff --git a/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.styles.ts b/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.styles.ts new file mode 100644 index 000000000..cbf24ade9 --- /dev/null +++ b/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; +`; diff --git a/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx b/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx index 969c10653..e34bc7477 100644 --- a/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx +++ b/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 = ({ amount }) => { const { value, denom } = amount; return ( - + + + ); }; diff --git a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx b/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx index 2352f9bd1..41490d0be 100644 --- a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx +++ b/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 ( +
+ +