From 2cebd0fae867dfbdbe5f928f1c7499521b09f54c Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Sat, 13 Jul 2024 06:06:27 +0200
Subject: [PATCH] Fix losing mnemonic input when changing phone orientation

A Layer inside Layer seems to lose useState inside MnemonicValidation.
---
 .changelog/2008.bugfix.md                |  1 +
 src/app/pages/CreateWalletPage/index.tsx | 13 +++----------
 2 files changed, 4 insertions(+), 10 deletions(-)
 create mode 100644 .changelog/2008.bugfix.md

diff --git a/.changelog/2008.bugfix.md b/.changelog/2008.bugfix.md
new file mode 100644
index 0000000000..5a485a00ee
--- /dev/null
+++ b/.changelog/2008.bugfix.md
@@ -0,0 +1 @@
+Fix losing mnemonic input when changing phone orientation
diff --git a/src/app/pages/CreateWalletPage/index.tsx b/src/app/pages/CreateWalletPage/index.tsx
index 8a5fa8bbc1..854b71e09e 100644
--- a/src/app/pages/CreateWalletPage/index.tsx
+++ b/src/app/pages/CreateWalletPage/index.tsx
@@ -13,7 +13,6 @@ import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { CheckBox } from 'grommet/es6/components/CheckBox'
 import { Grid } from 'grommet/es6/components/Grid'
-import { Layer } from 'grommet/es6/components/Layer'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Text } from 'grommet/es6/components/Text'
 import { Refresh } from 'grommet-icons/es6/icons/Refresh'
@@ -27,6 +26,7 @@ import { selectShowAccountsSelectionModal } from 'app/state/importaccounts/selec
 import { createWalletActions } from './slice'
 import { selectCheckbox, selectMnemonic } from './slice/selectors'
 import { WalletType } from 'app/state/wallet/types'
+import { ThemeContext } from 'grommet/contexts/ThemeContext'
 
 export interface CreateWalletProps {}
 
@@ -73,14 +73,7 @@ export function CreateWalletPage(props: CreateWalletProps) {
         </AlertBox>
       )}
       {showConfirmation && (
-        <Layer
-          plain
-          full
-          style={{ backdropFilter: 'blur(5px)' }}
-          // Needed to prevent keyboard accessibility issues with layer inside
-          // layer: https://github.com/oasisprotocol/oasis-wallet-web/issues/863
-          modal={false}
-        >
+        <ThemeContext.Extend value={{ layer: { overlay: { backdropFilter: 'blur(5px)' } } }}>
           <ResponsiveLayer
             style={{
               width: { small: '100vw', medium: '90vw', large: '1500px' }[size],
@@ -95,7 +88,7 @@ export function CreateWalletPage(props: CreateWalletProps) {
               abortHandler={() => setConfirmation(false)}
             ></MnemonicValidation>
           </ResponsiveLayer>
-        </Layer>
+        </ThemeContext.Extend>
       )}
       {showAccountsSelectionModal && (
         <ImportAccountsSelectionModal