refactor(ui): change the ui-bottom-sheet to a controlled component

packages/settings/src/ui/settings-ui-export-account-secret-key-sheet.tsx

@@ -0,0 +1,57 @@
+import type { Account } from '@workspace/db/account/account'
+import { useAccountReadSecretKey } from '@workspace/db-react/use-account-read-secret-key'
+import { useTranslation } from '@workspace/i18n'
+import { Button } from '@workspace/ui/components/button'
+import { UiBottomSheet } from '@workspace/ui/components/ui-bottom-sheet'
+import { UiIcon } from '@workspace/ui/components/ui-icon'
+import { UiTextCopyButton } from '@workspace/ui/components/ui-text-copy-button'
+import { useState } from 'react'
+import { SettingsUiExportConfirm } from './settings-ui-export-confirm.tsx'
+import { SettingsUiMnemonicBlur } from './settings-ui-mnemonic-blur.tsx'
+
+export function SettingsUiExportAccountSecretKeySheet({
+  account,
+  open,
+  setOpen,
+}: {
+  account: Account
+  open: boolean
+  setOpen: (value: boolean) => void
+}) {
+  const { t } = useTranslation('settings')
+  const [revealed, setRevealed] = useState(false)
+  const readSecretKeyMutation = useAccountReadSecretKey()
+
+  return (
+    <UiBottomSheet
+      description={t(($) => $.exportSecretKeyCopyConfirmDescription)}
+      onOpenChange={(value) => setOpen(value)}
+      open={open}
+      title={t(($) => $.exportSecretKeyCopyConfirmTitle)}
+    >
+      <div className="px-4 pb-4">
+        {readSecretKeyMutation?.data?.length ? (
+          <div className="space-y-2 text-center">
+            <SettingsUiMnemonicBlur revealed={revealed} value={readSecretKeyMutation.data} />
+            <div className="space-x-2">
+              <Button onClick={() => setRevealed((val) => !val)} variant="secondary">
+                <UiIcon icon="watch" />
+                {revealed ? t(($) => $.exportSecretKeyHide) : t(($) => $.exportSecretKeyReveal)}
+              </Button>
+              <UiTextCopyButton
+                label={t(($) => $.exportSecretKeyCopy)}
+                text={readSecretKeyMutation.data}
+                toast={t(($) => $.exportSecretKeyCopyCopied)}
+              />
+            </div>
+          </div>
+        ) : (
+          <SettingsUiExportConfirm
+            confirm={() => readSecretKeyMutation.mutateAsync({ id: account.id })}
+            label={t(($) => $.exportSecretKeyShow)}
+          />
+        )}
+      </div>
+    </UiBottomSheet>
+  )
+}

packages/settings/src/ui/settings-ui-export-account-secret-key.tsx

@@ -1,57 +1,25 @@
 import type { Account } from '@workspace/db/account/account'
-import { useAccountReadSecretKey } from '@workspace/db-react/use-account-read-secret-key'
 import { useTranslation } from '@workspace/i18n'
 import { Button } from '@workspace/ui/components/button'
-import { UiBottomSheet } from '@workspace/ui/components/ui-bottom-sheet'
 import { UiIcon } from '@workspace/ui/components/ui-icon'
-import { UiTextCopyButton } from '@workspace/ui/components/ui-text-copy-button'
-import { useState } from 'react'
-import { SettingsUiExportConfirm } from './settings-ui-export-confirm.tsx'
-import { SettingsUiMnemonicBlur } from './settings-ui-mnemonic-blur.tsx'
+import { Fragment, useState } from 'react'
+import { SettingsUiExportAccountSecretKeySheet } from './settings-ui-export-account-secret-key-sheet.tsx'
 
 export function SettingsUiExportAccountSecretKey({ account }: { account: Account }) {
   const { t } = useTranslation('settings')
-  const [revealed, setRevealed] = useState(false)
-  const readSecretKeyMutation = useAccountReadSecretKey()
-
+  const [open, setOpen] = useState(false)
   return (
-    <UiBottomSheet
-      description={t(($) => $.exportSecretKeyCopyConfirmDescription)}
-      title={t(($) => $.exportSecretKeyCopyConfirmTitle)}
-      trigger={
-        <Button
-          disabled={account.type === 'Watched'}
-          size="icon"
-          title={t(($) => $.exportSecretKeyCopy)}
-          variant="outline"
-        >
-          <UiIcon className="size-4" icon="key" />
-        </Button>
-      }
-    >
-      <div className="px-4 pb-4">
-        {readSecretKeyMutation?.data?.length ? (
-          <div className="space-y-2 text-center">
-            <SettingsUiMnemonicBlur revealed={revealed} value={readSecretKeyMutation.data} />
-            <div className="space-x-2">
-              <Button onClick={() => setRevealed((val) => !val)} variant="secondary">
-                <UiIcon icon="watch" />
-                {revealed ? t(($) => $.exportSecretKeyHide) : t(($) => $.exportSecretKeyReveal)}
-              </Button>
-              <UiTextCopyButton
-                label={t(($) => $.exportSecretKeyCopy)}
-                text={readSecretKeyMutation.data}
-                toast={t(($) => $.exportSecretKeyCopyCopied)}
-              />
-            </div>
-          </div>
-        ) : (
-          <SettingsUiExportConfirm
-            confirm={() => readSecretKeyMutation.mutateAsync({ id: account.id })}
-            label={t(($) => $.exportSecretKeyShow)}
-          />
-        )}
-      </div>
-    </UiBottomSheet>
+    <Fragment>
+      <Button
+        disabled={account.type === 'Watched'}
+        onClick={() => setOpen((value) => !value)}
+        size="icon"
+        title={t(($) => $.exportSecretKeyCopy)}
+        variant="outline"
+      >
+        <UiIcon className="size-4" icon="key" />
+      </Button>
+      <SettingsUiExportAccountSecretKeySheet account={account} open={open} setOpen={setOpen} />
+    </Fragment>
   )
 }

packages/settings/src/ui/settings-ui-export-wallet-mnemonic-sheet.tsx

@@ -0,0 +1,57 @@
+import type { Wallet } from '@workspace/db/wallet/wallet'
+import { useWalletReadMnemonic } from '@workspace/db-react/use-wallet-read-mnemonic'
+import { useTranslation } from '@workspace/i18n'
+import { Button } from '@workspace/ui/components/button'
+import { UiBottomSheet } from '@workspace/ui/components/ui-bottom-sheet'
+import { UiIcon } from '@workspace/ui/components/ui-icon'
+import { UiTextCopyButton } from '@workspace/ui/components/ui-text-copy-button'
+import { useState } from 'react'
+import { SettingsUiExportConfirm } from './settings-ui-export-confirm.tsx'
+import { SettingsUiMnemonicBlur } from './settings-ui-mnemonic-blur.tsx'
+
+export function SettingsUiExportWalletMnemonicSheet({
+  wallet,
+  open,
+  setOpen,
+}: {
+  wallet: Wallet
+  open: boolean
+  setOpen: (value: boolean) => void
+}) {
+  const { t } = useTranslation('settings')
+  const [revealed, setRevealed] = useState(false)
+  const readMnemonicMutation = useWalletReadMnemonic()
+
+  return (
+    <UiBottomSheet
+      description={t(($) => $.exportMnemonicCopyConfirmDescription)}
+      onOpenChange={(value) => setOpen(value)}
+      open={open}
+      title={t(($) => $.exportMnemonicCopyConfirmTitle)}
+    >
+      <div className="px-4 pb-4">
+        {readMnemonicMutation.data?.length ? (
+          <div className="space-y-2 text-center">
+            <SettingsUiMnemonicBlur revealed={revealed} value={readMnemonicMutation.data} />
+            <div className="space-x-2">
+              <Button onClick={() => setRevealed((val) => !val)} variant="secondary">
+                <UiIcon icon="watch" />
+                {revealed ? t(($) => $.exportMnemonicHide) : t(($) => $.exportMnemonicReveal)}
+              </Button>
+              <UiTextCopyButton
+                label={t(($) => $.exportMnemonicCopy)}
+                text={readMnemonicMutation.data}
+                toast={t(($) => $.exportMnemonicCopyCopied)}
+              />
+            </div>
+          </div>
+        ) : (
+          <SettingsUiExportConfirm
+            confirm={() => readMnemonicMutation.mutateAsync({ id: wallet.id })}
+            label={t(($) => $.exportMnemonicShow)}
+          />
+        )}
+      </div>
+    </UiBottomSheet>
+  )
+}

packages/settings/src/ui/settings-ui-export-wallet-mnemonic.tsx

@@ -1,52 +1,25 @@
 import type { Wallet } from '@workspace/db/wallet/wallet'
-import { useWalletReadMnemonic } from '@workspace/db-react/use-wallet-read-mnemonic'
 import { useTranslation } from '@workspace/i18n'
 import { Button } from '@workspace/ui/components/button'
-import { UiBottomSheet } from '@workspace/ui/components/ui-bottom-sheet'
 import { UiIcon } from '@workspace/ui/components/ui-icon'
-import { UiTextCopyButton } from '@workspace/ui/components/ui-text-copy-button'
-import { useState } from 'react'
-import { SettingsUiExportConfirm } from './settings-ui-export-confirm.tsx'
-import { SettingsUiMnemonicBlur } from './settings-ui-mnemonic-blur.tsx'
+import { Fragment, useState } from 'react'
+import { SettingsUiExportWalletMnemonicSheet } from './settings-ui-export-wallet-mnemonic-sheet.tsx'
 
 export function SettingsUiExportWalletMnemonic({ wallet }: { wallet: Wallet }) {
   const { t } = useTranslation('settings')
-  const [revealed, setRevealed] = useState(false)
-  const readMnemonicMutation = useWalletReadMnemonic()
+  const [open, setOpen] = useState(false)
 
   return (
-    <UiBottomSheet
-      description={t(($) => $.exportMnemonicCopyConfirmDescription)}
-      title={t(($) => $.exportMnemonicCopyConfirmTitle)}
-      trigger={
-        <Button size="icon" title={t(($) => $.exportMnemonicCopy)} variant="outline">
-          <UiIcon className="size-4" icon="mnemonic" />
-        </Button>
-      }
-    >
-      <div className="px-4 pb-4">
-        {readMnemonicMutation.data?.length ? (
-          <div className="space-y-2 text-center">
-            <SettingsUiMnemonicBlur revealed={revealed} value={readMnemonicMutation.data} />
-            <div className="space-x-2">
-              <Button onClick={() => setRevealed((val) => !val)} variant="secondary">
-                <UiIcon icon="watch" />
-                {revealed ? t(($) => $.exportMnemonicHide) : t(($) => $.exportMnemonicReveal)}
-              </Button>
-              <UiTextCopyButton
-                label={t(($) => $.exportMnemonicCopy)}
-                text={readMnemonicMutation.data}
-                toast={t(($) => $.exportMnemonicCopyCopied)}
-              />
-            </div>
-          </div>
-        ) : (
-          <SettingsUiExportConfirm
-            confirm={() => readMnemonicMutation.mutateAsync({ id: wallet.id })}
-            label={t(($) => $.exportMnemonicShow)}
-          />
-        )}
-      </div>
-    </UiBottomSheet>
+    <Fragment>
+      <Button
+        onClick={() => setOpen((value) => !value)}
+        size="icon"
+        title={t(($) => $.exportMnemonicCopy)}
+        variant="outline"
+      >
+        <UiIcon className="size-4" icon="mnemonic" />
+      </Button>
+      <SettingsUiExportWalletMnemonicSheet open={open} setOpen={setOpen} wallet={wallet} />
+    </Fragment>
   )
 }

packages/ui/src/components/ui-bottom-sheet.tsx

@@ -1,21 +1,19 @@
-import type { ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './sheet.tsx'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet.tsx'
 
 export function UiBottomSheet({
   children,
   description,
   title,
-  trigger,
-}: {
+  ...props
+}: ComponentProps<typeof Sheet> & {
   children: ReactNode
   description: ReactNode
   title: ReactNode
-  trigger: ReactNode
 }) {
   return (
-    <Sheet>
-      <SheetTrigger asChild>{trigger}</SheetTrigger>
+    <Sheet {...props}>
       <SheetContent className="sm:-translate-x-1/2 w-full sm:left-1/2 sm:w-[400px]" side="bottom">
         <SheetHeader>
           <SheetTitle>{title}</SheetTitle>