diff --git a/packages/adena-extension/src/components/atoms/copy-button/index.tsx b/packages/adena-extension/src/components/atoms/copy-button/index.tsx index b8855ff0..56ded8ec 100644 --- a/packages/adena-extension/src/components/atoms/copy-button/index.tsx +++ b/packages/adena-extension/src/components/atoms/copy-button/index.tsx @@ -5,7 +5,7 @@ import { getTheme } from '@styles/theme'; import { Text, Button } from '@components/atoms'; import mixins from '@styles/mixins'; -const CopyButton = styled(Button)<{ isClicked: boolean }>` +const CopyButton = styled(Button) <{ isClicked: boolean }>` ${mixins.flex({ direction: 'row' })}; height: 25px; border-radius: 12.5px; @@ -27,6 +27,9 @@ export const Copy = ({ const theme = useTheme(); const handleButtonClick = useCallback(() => { + if (isClicked) { + return; + } setIsClicked((prev: boolean) => !prev); navigator.clipboard.writeText(copyStr); }, [isClicked, copyStr]); @@ -42,7 +45,6 @@ export const Copy = ({ diff --git a/packages/adena-extension/src/components/molecules/web-title-with-description/index.tsx b/packages/adena-extension/src/components/molecules/web-title-with-description/index.tsx new file mode 100644 index 00000000..5c980271 --- /dev/null +++ b/packages/adena-extension/src/components/molecules/web-title-with-description/index.tsx @@ -0,0 +1,47 @@ +import { View, WebText } from '@components/atoms'; +import { WebFontType } from '@styles/theme'; +import React, { useMemo } from 'react'; +import styled, { useTheme } from 'styled-components'; + +const StyledContainer = styled(View)` + width: 100%; + row-gap: 16px; +`; + +interface TextOption { + text: string; + fontType?: WebFontType; +} + +export interface WebTitleWithDescriptionProps { + title: TextOption; + description: TextOption; +} + +const WebTitleWithDescription: React.FC = ({ + title, + description, +}) => { + const theme = useTheme(); + + const descriptionHeight = useMemo(() => { + return `${description.text.split('\n').length * 2 - 1}em`; + }, [description.text]); + + return ( + + {title.text} + + + {description.text} + + + + ); +}; + +export default WebTitleWithDescription; \ No newline at end of file diff --git a/packages/adena-extension/src/hooks/web/google-login/use-google-login-screen.ts b/packages/adena-extension/src/hooks/web/google-login/use-google-login-screen.ts index 750eb835..9122f07f 100644 --- a/packages/adena-extension/src/hooks/web/google-login/use-google-login-screen.ts +++ b/packages/adena-extension/src/hooks/web/google-login/use-google-login-screen.ts @@ -101,6 +101,7 @@ const useGoogleLoginScreen = (): UseGoogleLoginReturn => { const clone = wallet.clone(); const web3AuthKeyring = await Web3AuthKeyring.fromPrivateKeyStr(privateKey); const account = await SingleAccount.createBy(web3AuthKeyring, clone.nextAccountName); + account.index = clone.lastAccountIndex + 1; clone.addAccount(account); clone.addKeyring(web3AuthKeyring); const storedAccount = clone.accounts.find((storedAccount) => storedAccount.id === account.id); diff --git a/packages/adena-extension/src/pages/web/setup-airgap-screen/complete.tsx b/packages/adena-extension/src/pages/web/setup-airgap-screen/complete.tsx index 7918e431..6cd5bba7 100644 --- a/packages/adena-extension/src/pages/web/setup-airgap-screen/complete.tsx +++ b/packages/adena-extension/src/pages/web/setup-airgap-screen/complete.tsx @@ -1,10 +1,11 @@ import React, { useCallback } from 'react'; -import styled, { useTheme } from 'styled-components'; +import styled from 'styled-components'; -import { Row, View, WebButton, WebImg, WebInput, WebText } from '@components/atoms'; +import { Row, View, WebButton, WebImg, WebInput } from '@components/atoms'; import IconAirgap from '@assets/web/airgap-green.svg'; import IconCheck from '@assets/web/web-check-circle.svg'; +import WebTitleWithDescription from '@components/molecules/web-title-with-description'; const StyledContainer = styled(View)` width: 100%; @@ -12,10 +13,6 @@ const StyledContainer = styled(View)` height: 350px; `; -const StyledMessageBox = styled(View)` - row-gap: 16px; -`; - const StyledInputBox = styled(Row)` gap: 12px; width: calc(100% + 30px); @@ -38,23 +35,22 @@ const SetupAirgapCompleteScreen: React.FC = ({ address, addAccount, }) => { - const theme = useTheme(); - const onClickNext = useCallback(() => { addAccount(); }, [addAccount]); return ( - - - Account Synced! - - { - 'Your account has been synced to Adena.\nConfirm your address below and click on Next to continue.' - } - - + + + = ({ changeAddress, confirmAddress, }) => { - const theme = useTheme(); const disabledNextButton = useMemo(() => { return address === '' || errorMessage !== null; @@ -66,13 +62,16 @@ const SetupAirgapEnterAddress: React.FC = ({ return ( - - - Enter Your Address - - {'Enter the address that you will use to set up your airgapped account.'} - - + + + { )} - {setupAirgapState === 'INIT' && } + {setupAirgapState === 'INIT' && ( + + )} {setupAirgapState === 'ENTER_ADDRESS' && ( = ({ initSetup }) => { - const theme = useTheme(); const { openLink } = useLink(); const moveGnoCliHelp = useCallback(() => { @@ -53,16 +49,16 @@ const SetupAirgapInit: React.FC = ({ initSetup }) => { return ( - + - - Set Up Airgap Account - - { - 'You can import an account from your custom airgap setup. To sign\ntransactions, use the Gnoland CLI.' - } - - + @@ -78,7 +74,7 @@ const SetupAirgapInit: React.FC = ({ initSetup }) => { - + How to use the Gno CLI diff --git a/packages/adena-extension/src/router/popup/header/index.tsx b/packages/adena-extension/src/router/popup/header/index.tsx index d021b017..f1d6efd5 100644 --- a/packages/adena-extension/src/router/popup/header/index.tsx +++ b/packages/adena-extension/src/router/popup/header/index.tsx @@ -32,6 +32,7 @@ export const Header = (): JSX.Element => { const ApproveLogin = useMatch(RoutePath.ApproveLogin); const approveSign = useMatch(RoutePath.ApproveSign); const approveTransaction = useMatch(RoutePath.ApproveTransaction); + const approveSignFailed = useMatch(RoutePath.ApproveSignFailed); const wallet = useMatch('/wallet/*'); const nft = useMatch(RoutePath.Nft); @@ -67,7 +68,7 @@ export const Header = (): JSX.Element => { } return ; } - if (approveEstablish || approveTransaction || approveSign) { + if (approveEstablish || approveTransaction || approveSign || approveSignFailed) { return ; } if (createPassword) { diff --git a/packages/adena-extension/src/router/popup/index.tsx b/packages/adena-extension/src/router/popup/index.tsx index 1a91ec31..f75ce72a 100644 --- a/packages/adena-extension/src/router/popup/index.tsx +++ b/packages/adena-extension/src/router/popup/index.tsx @@ -107,7 +107,6 @@ export const PopupRouter = (): JSX.Element => { element={} /> } /> - } /> } /> } /> } /> diff --git a/packages/adena-extension/src/styles/theme.ts b/packages/adena-extension/src/styles/theme.ts index 5bf62fce..d428f56c 100644 --- a/packages/adena-extension/src/styles/theme.ts +++ b/packages/adena-extension/src/styles/theme.ts @@ -186,7 +186,6 @@ export const webFonts: Record = { letter-spacing: -0.36px; `, body4: css` - font-family: Inter; font-size: 16px; font-weight: 400; line-height: 23px; // 24px makes a pixel issue in the chrome @@ -409,10 +408,10 @@ const theme = { webWarning: WebWarning, }; -export const getTheme = - (val1: T1, val2: T2) => - ({ theme }: { theme: DefaultTheme }): DefaultTheme[T1][T2] => - theme[val1][val2]; +export const getTheme = ( + val1: T1, + val2: T2, +) => ({ theme }: { theme: DefaultTheme }): DefaultTheme[T1][T2] => theme[val1][val2]; export default theme;