refactor(dashboard): change dialog layout structure for assets

iotaledger · Dec 17, 2024 · 7657e3d · 7657e3d
1 parent ef304a3
commit 7657e3d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
@@ -75,22 +75,30 @@ export function AssetDialog({ onClose, asset }: AssetsDialogProps): JSX.Element
     }
     return (
         <Dialog open onOpenChange={onOpenChange}>
-            <FormikProvider value={formik}>
-                <>
-                    {view === AssetsDialogView.Details && (
-                        <DetailsView asset={asset} onClose={onOpenChange} onSend={onDetailsSend} />
-                    )}
-                    {view === AssetsDialogView.Send && (
-                        <SendView asset={asset} onClose={onOpenChange} onBack={onSendViewBack} />
-                    )}
+            <DialogLayout>
+                <FormikProvider value={formik}>
+                    <>
+                        {view === AssetsDialogView.Details && (
+                            <DetailsView
+                                asset={asset}
+                                onClose={onOpenChange}
+                                onSend={onDetailsSend}
+                            />
+                        )}
+                        {view === AssetsDialogView.Send && (
+                            <SendView
+                                asset={asset}
+                                onClose={onOpenChange}
+                                onBack={onSendViewBack}
+                            />
+                        )}
 
-                    {view === AssetsDialogView.TransactionDetails && !!digest ? (
-                        <DialogLayout>
+                        {view === AssetsDialogView.TransactionDetails && !!digest ? (
                             <TransactionDetailsView digest={digest} onClose={onOpenChange} />
-                        </DialogLayout>
-                    ) : null}
-                </>
-            </FormikProvider>
+                        ) : null}
+                    </>
+                </FormikProvider>
+            </DialogLayout>
         </Dialog>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -13,7 +13,7 @@ import {
 } from '@iota/apps-ui-kit';
 import Link from 'next/link';
 import { formatAddress } from '@iota/iota-sdk/utils';
-import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
+import { DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { ExplorerLink } from '@/components/ExplorerLink';
 import { useCurrentAccount } from '@iota/dapp-kit';
@@ -55,7 +55,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
     }
 
     return (
-        <DialogLayout>
+        <>
             <Header title="Asset" onClose={onClose} titleCentered />
             <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
@@ -195,6 +195,6 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
                     )}
                 </div>
             </DialogLayoutFooter>
-        </DialogLayout>
+        </>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { AddressInput, useNftDetails } from '@iota/core';
 import { useFormikContext } from 'formik';
-import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
+import { DialogLayoutFooter, DialogLayoutBody } from '../../layout';
 import {
     Button,
     ButtonHtmlType,
@@ -33,7 +33,7 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
 
     const { nftName, nftImageUrl } = useNftDetails(objectId, senderAddress);
     return (
-        <DialogLayout>
+        <>
             <Header title="Send asset" onClose={onClose} titleCentered onBack={onBack} />
             <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
@@ -65,6 +65,6 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
                     onClick={submitForm}
                 />
             </DialogLayoutFooter>
-        </DialogLayout>
+        </>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx b/apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
@@ -3,18 +3,7 @@
 import { PropsWithChildren } from 'react';
 import { DialogBody, DialogContent, DialogPosition } from '@iota/apps-ui-kit';
 
-interface DialogLayoutProps {
-    withDialogContent?: boolean;
-}
-
-export function DialogLayout({
-    children,
-    withDialogContent = true,
-}: PropsWithChildren<DialogLayoutProps>) {
-    if (!withDialogContent) {
-        return <div className="flex h-full flex-col">{children}</div>;
-    }
-
+export function DialogLayout({ children }: PropsWithChildren) {
     return (
         <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
             <div className="flex h-full flex-col">{children}</div>