From d80523d74c8c87165c9c87167cf17cb498f2a10e Mon Sep 17 00:00:00 2001 From: jordankzf Date: Sat, 2 Dec 2023 16:29:00 +0800 Subject: [PATCH 1/5] Parse block seedphrase from clipboard when pasted for devs --- src/app/components/seedPhraseInput/index.tsx | 24 ++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/app/components/seedPhraseInput/index.tsx b/src/app/components/seedPhraseInput/index.tsx index 8d51315fb..dee2e7211 100644 --- a/src/app/components/seedPhraseInput/index.tsx +++ b/src/app/components/seedPhraseInput/index.tsx @@ -50,16 +50,24 @@ type SeedWordInputProps = { index: number; handleChangeInput: (e: React.ChangeEvent) => void; handleKeyDownInput: (e: React.KeyboardEvent) => void; + handlePaste: (pastedText: string) => void; disabled?: boolean; }; const SeedWordInput = React.forwardRef( - ({ value, index, handleChangeInput, handleKeyDownInput, disabled }, ref) => { - const [showValue, setShowValue] = useState(false); + ({ value, index, handleChangeInput, handleKeyDownInput, disabled, handlePaste }, ref) => { + const DEV_MODE = process.env.NODE_ENV === 'development'; + const [showValue, setShowValue] = useState(DEV_MODE); const handleFocusInput = () => setShowValue(true); const handleBlurInput = () => setShowValue(false); const handlePasteInput = (e: React.ClipboardEvent) => { e.preventDefault(); + + if (DEV_MODE) { + const { clipboardData } = e; + const pastedText = clipboardData.getData('text'); + handlePaste(pastedText); + } }; return ( @@ -167,6 +175,16 @@ export default function SeedPhraseInput({ }); }; + const handlePaste = (pastedText: string) => { + const splitPastedText = pastedText.split(' '); + splitPastedText.forEach((text, index) => { + setSeedInputValues((prevSeed) => { + prevSeed[index] = text; + return [...prevSeed]; + }); + }); + }; + useEffect(() => { const seedPhrase = seedInputValues .slice(0, !show24Words ? 12 : 24) @@ -190,6 +208,7 @@ export default function SeedPhraseInput({ index={index} handleChangeInput={handleChangeInput(index)} handleKeyDownInput={handleKeyDownInput(index)} + handlePaste={handlePaste} ref={(el) => { inputsRef.current[index] = el; }} @@ -206,6 +225,7 @@ export default function SeedPhraseInput({ index={index} handleChangeInput={handleChangeInput(index)} handleKeyDownInput={handleKeyDownInput(index)} + handlePaste={handlePaste} ref={(el) => { inputsRef.current[index] = el; }} From e6404d51866d72f3e165c45b566f6a88f97363ab Mon Sep 17 00:00:00 2001 From: jordankzf Date: Mon, 4 Dec 2023 18:06:00 +0800 Subject: [PATCH 2/5] This gave me a headache --- src/app/components/extendedScreenContainer/index.tsx | 4 +++- src/app/screens/restoreWallet/enterSeedphrase.tsx | 2 +- src/app/screens/restoreWallet/index.tsx | 3 ++- src/pages/Options/index.css | 5 +++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/components/extendedScreenContainer/index.tsx b/src/app/components/extendedScreenContainer/index.tsx index a0898e4b2..16012c354 100644 --- a/src/app/components/extendedScreenContainer/index.tsx +++ b/src/app/components/extendedScreenContainer/index.tsx @@ -6,11 +6,13 @@ import styled from 'styled-components'; const ExtendedScreenRouteContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'column', - height: '100vh', + height: '100%', + minHeight: '100vh', width: '100vw', backgroundColor: props.theme.colors.elevation0, border: `1px solid ${props.theme.colors.elevation2}`, boxShadow: '0px 8px 28px rgba(0, 0, 0, 0.35)', + overflow: 'hidden', })); const TestnetContainer = styled.div((props) => ({ diff --git a/src/app/screens/restoreWallet/enterSeedphrase.tsx b/src/app/screens/restoreWallet/enterSeedphrase.tsx index 2de226878..fde95449b 100644 --- a/src/app/screens/restoreWallet/enterSeedphrase.tsx +++ b/src/app/screens/restoreWallet/enterSeedphrase.tsx @@ -1,6 +1,5 @@ import ActionButton from '@components/button'; import SeedPhraseInput from '@components/seedPhraseInput'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; @@ -8,6 +7,7 @@ const Container = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, + alignSelf: 'flex-start', }); const Title = styled.h1((props) => ({ diff --git a/src/app/screens/restoreWallet/index.tsx b/src/app/screens/restoreWallet/index.tsx index d263c3ff6..588670df6 100644 --- a/src/app/screens/restoreWallet/index.tsx +++ b/src/app/screens/restoreWallet/index.tsx @@ -13,7 +13,8 @@ const Body = styled.div(() => ({ display: 'flex', height: '100%', justifyContent: 'center', - alignItems: 'center', + alignItems: 'flex-start', + margin: '60px 0', })); const Container = styled.div((props) => ({ diff --git a/src/pages/Options/index.css b/src/pages/Options/index.css index 3e7675c0d..2b1ce0d0b 100644 --- a/src/pages/Options/index.css +++ b/src/pages/Options/index.css @@ -2,8 +2,9 @@ body { margin: 0; padding: 0; color: #ffffff; - background-color: #0C0C0C; + background-color: #0c0c0c; position: relative; + overflow-x: hidden; } header { display: flex; @@ -22,7 +23,7 @@ header h2 { } #app-container { - height: 100vh; + height: 100%; width: 100vw; display: flex; flex-direction: column; From 919b75ce0a1ee74a34e27b10d01659a3e1550de7 Mon Sep 17 00:00:00 2001 From: jordankzf Date: Tue, 19 Dec 2023 12:20:05 +0800 Subject: [PATCH 3/5] Prevent unnecessary rerenders when pasting seed phrase --- src/app/components/seedPhraseInput/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/components/seedPhraseInput/index.tsx b/src/app/components/seedPhraseInput/index.tsx index dee2e7211..2055674f8 100644 --- a/src/app/components/seedPhraseInput/index.tsx +++ b/src/app/components/seedPhraseInput/index.tsx @@ -177,12 +177,10 @@ export default function SeedPhraseInput({ const handlePaste = (pastedText: string) => { const splitPastedText = pastedText.split(' '); - splitPastedText.forEach((text, index) => { - setSeedInputValues((prevSeed) => { - prevSeed[index] = text; - return [...prevSeed]; - }); - }); + setSeedInputValues((prevSeed) => + // To prevent unnecessary rerenders + prevSeed.map((value, index) => splitPastedText[index] || value), + ); }; useEffect(() => { From 3b60ad37cd9f60e79960bf22c3b46fe0508b9db3 Mon Sep 17 00:00:00 2001 From: jordankzf Date: Tue, 19 Dec 2023 12:21:14 +0800 Subject: [PATCH 4/5] Fix app-container min-height --- src/pages/Options/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Options/index.css b/src/pages/Options/index.css index 3439e9ce5..cc87c7ff7 100644 --- a/src/pages/Options/index.css +++ b/src/pages/Options/index.css @@ -24,6 +24,7 @@ header h2 { #app-container { height: 100%; + min-height: 100vh; width: 100vw; display: flex; flex-direction: column; From 07d0c748132bab64481b144c693a28782ca608e2 Mon Sep 17 00:00:00 2001 From: jordankzf Date: Thu, 11 Jan 2024 15:28:09 +0800 Subject: [PATCH 5/5] Remove overflow hidden from extendedScreenContainer --- src/app/components/extendedScreenContainer/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/extendedScreenContainer/index.tsx b/src/app/components/extendedScreenContainer/index.tsx index 16012c354..0c13ee248 100644 --- a/src/app/components/extendedScreenContainer/index.tsx +++ b/src/app/components/extendedScreenContainer/index.tsx @@ -12,7 +12,6 @@ const ExtendedScreenRouteContainer = styled.div((props) => ({ backgroundColor: props.theme.colors.elevation0, border: `1px solid ${props.theme.colors.elevation2}`, boxShadow: '0px 8px 28px rgba(0, 0, 0, 0.35)', - overflow: 'hidden', })); const TestnetContainer = styled.div((props) => ({