From 1432a19dadf4515c03db6f3d9790bf80a35fff08 Mon Sep 17 00:00:00 2001
From: Alan Toa <37520667+alantoa@users.noreply.github.com>
Date: Fri, 27 Oct 2023 19:43:21 +0800
Subject: [PATCH] fix: open edit wallet nickname modal (#2465)

---
 .../settings/setting-edit-nickname-moda.tsx           | 10 ++++++++--
 packages/app/components/settings/setting.md.tsx       | 11 +++++------
 packages/design-system/modal/modal.container.web.tsx  |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/app/components/settings/setting-edit-nickname-moda.tsx b/packages/app/components/settings/setting-edit-nickname-moda.tsx
index feee6f77ea..d1cc6d93b8 100644
--- a/packages/app/components/settings/setting-edit-nickname-moda.tsx
+++ b/packages/app/components/settings/setting-edit-nickname-moda.tsx
@@ -13,10 +13,12 @@ import { WalletAddressesV2 } from "app/types";
 export type EditNicknameModalProps = {
   editingWallet?: WalletAddressesV2;
   onClose: any;
+  visible: boolean;
 };
 export const EditNicknameModal = ({
   editingWallet,
   onClose,
+  visible = false,
 }: EditNicknameModalProps) => {
   const [nickname, setNickname] = useState("");
   const { editWalletNickName } = useAddWalletNickname();
@@ -34,9 +36,13 @@ export const EditNicknameModal = ({
       AvoidSoftInput.setEnabled(true);
     };
   }, [editingWallet?.nickname]);
-
   return (
-    <Modal tw="bottom-16 md:bottom-0" onClose={onClose} title="Edit Nickname">
+    <Modal
+      tw="bottom-16 md:bottom-0"
+      onClose={onClose}
+      visible={visible}
+      title="Edit Nickname"
+    >
       <View tw="p-4">
         <Fieldset
           placeholder="rainbow wallet"
diff --git a/packages/app/components/settings/setting.md.tsx b/packages/app/components/settings/setting.md.tsx
index 3cd33c20d0..b70727507e 100644
--- a/packages/app/components/settings/setting.md.tsx
+++ b/packages/app/components/settings/setting.md.tsx
@@ -57,12 +57,11 @@ export const SettingsMd = () => {
       </View>
 
       <View style={{ height: bottomHeight }} />
-      {editingWallet ? (
-        <EditNicknameModal
-          editingWallet={editingWallet}
-          onClose={() => setEditingWallet(undefined)}
-        />
-      ) : null}
+      <EditNicknameModal
+        editingWallet={editingWallet}
+        visible={!!editingWallet}
+        onClose={() => setEditingWallet(undefined)}
+      />
     </View>
   );
 };
diff --git a/packages/design-system/modal/modal.container.web.tsx b/packages/design-system/modal/modal.container.web.tsx
index 50f01e130d..05f3a7ac95 100644
--- a/packages/design-system/modal/modal.container.web.tsx
+++ b/packages/design-system/modal/modal.container.web.tsx
@@ -47,7 +47,7 @@ const ModalContainerComponent = forwardRef<ModalMethods, ModalContainerProps>(
       disableBackdropPress,
       tw: propTw = "",
       headerShown = true,
-      visible,
+      visible = false,
       closeButtonProps,
     }: ModalContainerProps,
     ref