-
- {showDetailView ? : null}
-
-
-
-
-
- ) : dataState === 'noneYet' ? (
-
- ) : dataState === 'error' ? (
-
- ) : null
- }
- sortableColumns={sortableColumns}
- pageSize={limit}
- data={datasetPage}
- columns={columns}
- sortDirection={sortDirection}
- sortField={sortField}
- toggleSort={toggleSort}
- focusId={selectedContract?.id}
- rowSize="default"
- />
-
-
+
+
+ {showDetailView ? : null}
-
+
+
+
+
+ ) : dataState === 'noneYet' ? (
+
+ ) : dataState === 'error' ? (
+
+ ) : null
+ }
+ sortableColumns={sortableColumns}
+ pageSize={limit}
+ data={datasetPage}
+ columns={columns}
+ sortDirection={sortDirection}
+ sortField={sortField}
+ toggleSort={toggleSort}
+ focusId={selectedContract?.id}
+ rowSize="default"
+ />
+
+
+
)
}
diff --git a/apps/renterd/components/Files/Layout.tsx b/apps/renterd/components/Files/Layout.tsx
new file mode 100644
index 000000000..6badb2439
--- /dev/null
+++ b/apps/renterd/components/Files/Layout.tsx
@@ -0,0 +1,37 @@
+import { RenterdSidenav } from '../RenterdSidenav'
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+import { FilesBreadcrumbMenu } from '../FilesDirectory/FilesBreadcrumbMenu'
+import { FilesFlatBreadcrumbMenu } from '../FilesFlat/FilesFlatBreadcrumbMenu'
+import {
+ RenterdAuthedLayout,
+ RenterdAuthedPageLayoutProps,
+} from '../RenterdAuthedLayout'
+import { FilesActionsMenu } from '../FilesDirectory/FilesActionsMenu'
+import { FilesStatsMenu } from '../FilesDirectory/FilesStatsMenu'
+import { useFilesManager } from '../../contexts/filesManager'
+
+export const Layout = RenterdAuthedLayout
+export function useLayoutProps(): RenterdAuthedPageLayoutProps {
+ const { openDialog } = useDialog()
+ const { isViewingBuckets, activeExplorerMode } = useFilesManager()
+ const activeMode =
+ activeExplorerMode === 'directory' || isViewingBuckets
+ ? 'directory'
+ : 'flat'
+ return {
+ title: 'Files',
+ navTitle: null,
+ routes,
+ sidenav:
,
+ openSettings: () => openDialog('settings'),
+ nav:
+ activeMode === 'directory' ? (
+
+ ) : (
+
+ ),
+ stats:
,
+ actions:
,
+ }
+}
diff --git a/apps/renterd/components/FilesDirectory/index.tsx b/apps/renterd/components/FilesDirectory/index.tsx
index f7feb0a1c..6418d0c08 100644
--- a/apps/renterd/components/FilesDirectory/index.tsx
+++ b/apps/renterd/components/FilesDirectory/index.tsx
@@ -1,29 +1,9 @@
-import { RenterdSidenav } from '../RenterdSidenav'
-import { routes } from '../../config/routes'
-import { useDialog } from '../../contexts/dialog'
-import { FilesBreadcrumbMenu } from './FilesBreadcrumbMenu'
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
-import { FilesActionsMenu } from './FilesActionsMenu'
-import { FilesStatsMenu } from './FilesStatsMenu'
import { FilesExplorer } from './FilesExplorer'
export function FilesDirectory() {
- const { openDialog } = useDialog()
-
return (
-
}
- nav={
}
- stats={
}
- actions={
}
- openSettings={() => openDialog('settings')}
- >
-
-
-
-
+
+
+
)
}
diff --git a/apps/renterd/components/FilesFlat/index.tsx b/apps/renterd/components/FilesFlat/index.tsx
index 9b6c50f36..b9e1126a2 100644
--- a/apps/renterd/components/FilesFlat/index.tsx
+++ b/apps/renterd/components/FilesFlat/index.tsx
@@ -1,29 +1,9 @@
-import { RenterdSidenav } from '../RenterdSidenav'
-import { routes } from '../../config/routes'
-import { useDialog } from '../../contexts/dialog'
-import { FilesFlatBreadcrumbMenu } from './FilesFlatBreadcrumbMenu'
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
-import { FilesActionsMenu } from './FilesActionsMenu'
-import { FilesStatsMenu } from './FilesStatsMenu'
import { FilesExplorer } from './FilesExplorer'
export function FilesFlat() {
- const { openDialog } = useDialog()
-
return (
-
}
- nav={
}
- stats={
}
- actions={
}
- openSettings={() => openDialog('settings')}
- >
-
-
-
-
+
+
+
)
}
diff --git a/apps/renterd/components/Home/Layout.tsx b/apps/renterd/components/Home/Layout.tsx
new file mode 100644
index 000000000..0ee3f7c82
--- /dev/null
+++ b/apps/renterd/components/Home/Layout.tsx
@@ -0,0 +1,18 @@
+import {
+ RenterdAuthedLayout,
+ RenterdAuthedPageLayoutProps,
+} from '../RenterdAuthedLayout'
+import { RenterdSidenav } from '../RenterdSidenav'
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+
+export const Layout = RenterdAuthedLayout
+export function useLayoutProps(): RenterdAuthedPageLayoutProps {
+ const { openDialog } = useDialog()
+ return {
+ title: 'Dashboard',
+ routes,
+ sidenav:
,
+ openSettings: () => openDialog('settings'),
+ }
+}
diff --git a/apps/renterd/components/Home/index.tsx b/apps/renterd/components/Home/index.tsx
index 66876bab0..e2d5990eb 100644
--- a/apps/renterd/components/Home/index.tsx
+++ b/apps/renterd/components/Home/index.tsx
@@ -1,26 +1,13 @@
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
-import { RenterdSidenav } from '../RenterdSidenav'
import { routes } from '../../config/routes'
-import { useDialog } from '../../contexts/dialog'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
export function Home() {
const router = useRouter()
- const { openDialog } = useDialog()
useEffect(() => {
router.replace(routes.buckets.index)
}, [router])
- return (
-
}
- openSettings={() => openDialog('settings')}
- >
-
-
- )
+ return
}
diff --git a/apps/renterd/components/Hosts/Layout.tsx b/apps/renterd/components/Hosts/Layout.tsx
new file mode 100644
index 000000000..b0531fffe
--- /dev/null
+++ b/apps/renterd/components/Hosts/Layout.tsx
@@ -0,0 +1,24 @@
+import { RenterdSidenav } from '../RenterdSidenav'
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+import {
+ RenterdAuthedLayout,
+ RenterdAuthedPageLayoutProps,
+} from '../RenterdAuthedLayout'
+import { HostsActionsMenu } from './HostsActionsMenu'
+import { HostsFilterBar } from './HostsFilterBar'
+
+export const Layout = RenterdAuthedLayout
+export function useLayoutProps(): RenterdAuthedPageLayoutProps {
+ const { openDialog } = useDialog()
+ return {
+ title: 'Hosts',
+ routes,
+ sidenav:
,
+ openSettings: () => openDialog('settings'),
+ size: 'full',
+ actions:
,
+ stats:
,
+ scroll: false,
+ }
+}
diff --git a/apps/renterd/components/Hosts/index.tsx b/apps/renterd/components/Hosts/index.tsx
index c548fa951..58aac72cb 100644
--- a/apps/renterd/components/Hosts/index.tsx
+++ b/apps/renterd/components/Hosts/index.tsx
@@ -1,18 +1,11 @@
-import { RenterdSidenav } from '../RenterdSidenav'
-import { routes } from '../../config/routes'
import { ScrollArea, Table } from '@siafoundation/design-system'
-import { useDialog } from '../../contexts/dialog'
import { useHosts } from '../../contexts/hosts'
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
import { StateEmpty } from './StateEmpty'
-import { HostsActionsMenu } from './HostsActionsMenu'
-import { HostsFilterBar } from './HostsFilterBar'
import { HostMap } from './HostMap'
import { cx } from 'class-variance-authority'
import { getHostStatus } from '../../contexts/hosts/status'
export function Hosts() {
- const { openDialog } = useDialog()
const {
dataset,
activeHost,
@@ -24,67 +17,56 @@ export function Hosts() {
} = useHosts()
return (
-
}
- openSettings={() => openDialog('settings')}
- size="full"
- actions={
}
- stats={
}
- scroll={false}
- >
-
-
-
-
-
-
-
-
}
- context={tableContext}
- pageSize={limit}
- data={dataset}
- columns={columns}
- rowSize="default"
- />
-
-
+
+
+
-
+
+
+
+
}
+ context={tableContext}
+ pageSize={limit}
+ data={dataset}
+ columns={columns}
+ rowSize="default"
+ />
+
+
+
)
}
diff --git a/apps/renterd/components/Keys/Layout.tsx b/apps/renterd/components/Keys/Layout.tsx
new file mode 100644
index 000000000..83e3b1a5b
--- /dev/null
+++ b/apps/renterd/components/Keys/Layout.tsx
@@ -0,0 +1,22 @@
+import { RenterdSidenav } from '../RenterdSidenav'
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+import {
+ RenterdAuthedLayout,
+ RenterdAuthedPageLayoutProps,
+} from '../RenterdAuthedLayout'
+import { KeysActionsMenu } from './KeysActionsMenu'
+import { KeysStatsMenu } from './KeysStatsMenu'
+
+export const Layout = RenterdAuthedLayout
+export function useLayoutProps(): RenterdAuthedPageLayoutProps {
+ const { openDialog } = useDialog()
+ return {
+ title: 'Keys',
+ routes,
+ sidenav:
,
+ openSettings: () => openDialog('settings'),
+ actions:
,
+ stats:
,
+ }
+}
diff --git a/apps/renterd/components/Keys/index.tsx b/apps/renterd/components/Keys/index.tsx
index 14edfb85c..59b88784c 100644
--- a/apps/renterd/components/Keys/index.tsx
+++ b/apps/renterd/components/Keys/index.tsx
@@ -1,18 +1,11 @@
-import { RenterdSidenav } from '../RenterdSidenav'
-import { routes } from '../../config/routes'
import { Table } from '@siafoundation/design-system'
-import { useDialog } from '../../contexts/dialog'
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
import { StateNoneMatching } from './StateNoneMatching'
import { StateNoneYet } from './StateNoneYet'
-import { KeysActionsMenu } from './KeysActionsMenu'
import { StateError } from './StateError'
import { useKeys } from '../../contexts/keys'
import { KeysBatchMenu } from './KeysBatchMenu'
-import { KeysStatsMenu } from './KeysStatsMenu'
export function Keys() {
- const { openDialog } = useDialog()
const {
columns,
datasetPage,
@@ -26,39 +19,30 @@ export function Keys() {
} = useKeys()
return (
-
}
- openSettings={() => openDialog('settings')}
- actions={
}
- stats={
}
- >
-
-
-
- ) : dataState === 'noneYet' ? (
-
- ) : dataState === 'error' ? (
-
- ) : null
- }
- sortableColumns={sortableColumns}
- pageSize={limit}
- data={datasetPage}
- context={cellContext}
- columns={columns}
- sortDirection={sortDirection}
- sortField={sortField}
- toggleSort={toggleSort}
- rowSize="default"
- />
-
-
+
+
+
+ ) : dataState === 'noneYet' ? (
+
+ ) : dataState === 'error' ? (
+
+ ) : null
+ }
+ sortableColumns={sortableColumns}
+ pageSize={limit}
+ data={datasetPage}
+ context={cellContext}
+ columns={columns}
+ sortDirection={sortDirection}
+ sortField={sortField}
+ toggleSort={toggleSort}
+ rowSize="default"
+ />
+
)
}
diff --git a/apps/renterd/components/Login/Layout.tsx b/apps/renterd/components/Login/Layout.tsx
new file mode 100644
index 000000000..672592187
--- /dev/null
+++ b/apps/renterd/components/Login/Layout.tsx
@@ -0,0 +1,9 @@
+import {
+ RenterdPublicLayout,
+ RenterdPublicPageLayoutProps,
+} from '../RenterdPublicLayout'
+
+export const Layout = RenterdPublicLayout
+export function useLayoutProps(): RenterdPublicPageLayoutProps {
+ return {}
+}
diff --git a/apps/renterd/components/Login/index.tsx b/apps/renterd/components/Login/index.tsx
index 47be00d4a..b074c060a 100644
--- a/apps/renterd/components/Login/index.tsx
+++ b/apps/renterd/components/Login/index.tsx
@@ -1,11 +1,8 @@
import { AppLogin } from '@siafoundation/design-system'
import { connectivityRoute, routes } from '../../config/routes'
-import { RenterdPublicLayout } from '../RenterdPublicLayout'
export function Login() {
return (
-
-
-
+
)
}
diff --git a/apps/renterd/components/Node/Layout.tsx b/apps/renterd/components/Node/Layout.tsx
new file mode 100644
index 000000000..dff2c72ee
--- /dev/null
+++ b/apps/renterd/components/Node/Layout.tsx
@@ -0,0 +1,18 @@
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+import { RenterdSidenav } from '../RenterdSidenav'
+import {
+ RenterdAuthedLayout,
+ RenterdAuthedPageLayoutProps,
+} from '../RenterdAuthedLayout'
+
+export const Layout = RenterdAuthedLayout
+export function useLayoutProps(): RenterdAuthedPageLayoutProps {
+ const { openDialog } = useDialog()
+ return {
+ title: 'Node',
+ routes,
+ sidenav:
,
+ openSettings: () => openDialog('settings'),
+ }
+}
diff --git a/apps/renterd/components/Node/index.tsx b/apps/renterd/components/Node/index.tsx
index c5cb79391..30535e654 100644
--- a/apps/renterd/components/Node/index.tsx
+++ b/apps/renterd/components/Node/index.tsx
@@ -4,10 +4,7 @@ import {
useSyncerPeers,
useTxPoolTransactions,
} from '@siafoundation/renterd-react'
-import { routes } from '../../config/routes'
import { useDialog } from '../../contexts/dialog'
-import { RenterdSidenav } from '../RenterdSidenav'
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
export function Node() {
const peers = useSyncerPeers()
@@ -28,32 +25,25 @@ export function Node() {
const { openDialog } = useDialog()
return (
-
}
- openSettings={() => openDialog('settings')}
- title="Node"
- >
-
-
-
-
-
-
-
openDialog('connectPeer')}
+
+
+
+
+
-
+
openDialog('connectPeer')}
+ />
+
-
-
-
+
+
+
)
}
diff --git a/apps/renterd/components/Wallet/Layout.tsx b/apps/renterd/components/Wallet/Layout.tsx
new file mode 100644
index 000000000..e20137f4a
--- /dev/null
+++ b/apps/renterd/components/Wallet/Layout.tsx
@@ -0,0 +1,47 @@
+import { WalletLayoutActions } from '@siafoundation/design-system'
+import { useWallet } from '@siafoundation/renterd-react'
+import { useDialog } from '../../contexts/dialog'
+import { routes } from '../../config/routes'
+import BigNumber from 'bignumber.js'
+import { RenterdSidenav } from '../RenterdSidenav'
+import {
+ RenterdAuthedLayout,
+ RenterdAuthedPageLayoutProps,
+} from '../RenterdAuthedLayout'
+import { useSyncStatus } from '../../hooks/useSyncStatus'
+import { WalletFilterBar } from './WalletFilterBar'
+
+export const Layout = RenterdAuthedLayout
+export function useLayoutProps(): RenterdAuthedPageLayoutProps {
+ const { openDialog } = useDialog()
+ const wallet = useWallet()
+ const { isSynced, isWalletSynced, syncPercent, walletScanPercent } =
+ useSyncStatus()
+ return {
+ title: 'Wallet',
+ routes,
+ sidenav: ,
+ openSettings: () => openDialog('settings'),
+ actions: (
+ openDialog('addressDetails')}
+ sendSiacoin={() => openDialog('sendSiacoin')}
+ />
+ ),
+ stats: ,
+ }
+}
diff --git a/apps/renterd/components/Wallet/index.tsx b/apps/renterd/components/Wallet/index.tsx
index 741cfe588..921d636b6 100644
--- a/apps/renterd/components/Wallet/index.tsx
+++ b/apps/renterd/components/Wallet/index.tsx
@@ -1,27 +1,10 @@
-import {
- BalanceEvolution,
- Table,
- WalletLayoutActions,
-} from '@siafoundation/design-system'
-import { useWallet } from '@siafoundation/renterd-react'
-import { useDialog } from '../../contexts/dialog'
-import { routes } from '../../config/routes'
-import BigNumber from 'bignumber.js'
-import { RenterdSidenav } from '../RenterdSidenav'
-import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
-import { useSyncStatus } from '../../hooks/useSyncStatus'
+import { BalanceEvolution, Table } from '@siafoundation/design-system'
import { useTransactions } from '../../contexts/transactions'
-import { WalletFilterBar } from './WalletFilterBar'
import { StateNoneMatching } from './StateNoneMatching'
import { StateNoneYet } from './StateNoneYet'
import { StateError } from './StateError'
export function Wallet() {
- const { openDialog } = useDialog()
- const wallet = useWallet()
- const { isSynced, isWalletSynced, syncPercent, walletScanPercent } =
- useSyncStatus()
-
const {
balances,
metrics,
@@ -37,64 +20,36 @@ export function Wallet() {
} = useTransactions()
return (
- }
- openSettings={() => openDialog('settings')}
- title="Wallet"
- actions={
- openDialog('addressDetails')}
- sendSiacoin={() => openDialog('sendSiacoin')}
- />
- }
- stats={}
- >
-
- {balances?.length ? (
-
- ) : null}
-
- ) : dataState === 'noneYet' ? (
-
- ) : dataState === 'error' ? (
-
- ) : null
- }
- pageSize={defaultPageSize}
- data={dataset}
- context={cellContext}
- columns={columns}
- sortableColumns={sortableColumns}
- sortDirection={sortDirection}
- sortField={sortField}
- toggleSort={toggleSort}
+
+ {balances?.length ? (
+
-
-
+ ) : null}
+
+ ) : dataState === 'noneYet' ? (
+
+ ) : dataState === 'error' ? (
+
+ ) : null
+ }
+ pageSize={defaultPageSize}
+ data={dataset}
+ context={cellContext}
+ columns={columns}
+ sortableColumns={sortableColumns}
+ sortDirection={sortDirection}
+ sortField={sortField}
+ toggleSort={toggleSort}
+ />
+
-
-
+
+
+
+
+
+
+
+
p.addr)}
+ connectPeer={() => openDialog('connectPeer')}
/>
-
-
-
-
-
p.addr)}
- connectPeer={() => openDialog('connectPeer')}
- />
-
- {/*
-
+
-
- ) : dataState === 'noneYet' ? (
-
- ) : dataState === 'error' ? (
-
- ) : null
- }
- pageSize={6}
- data={dataset}
- context={cellContext}
- columns={columns}
- sortableColumns={sortableColumns}
- sortDirection={sortDirection}
- sortField={sortField}
- toggleSort={toggleSort}
- />
-
+
+ ) : dataState === 'noneYet' ? (
+
+ ) : dataState === 'error' ? (
+
+ ) : null
+ }
+ pageSize={6}
+ data={dataset}
+ context={cellContext}
+ columns={columns}
+ sortableColumns={sortableColumns}
+ sortDirection={sortDirection}
+ sortField={sortField}
+ toggleSort={toggleSort}
+ />
+
+
+ {truncate(wallet?.name, 20)}
+
+
+ /
+
+
+ Addresses
+
+
+ ),
+ actions: ,
+ stats: ,
+ size: '3',
+ }
+}
diff --git a/apps/walletd/components/WalletAddresses/index.tsx b/apps/walletd/components/WalletAddresses/index.tsx
index 17a2ba68e..0bea96982 100644
--- a/apps/walletd/components/WalletAddresses/index.tsx
+++ b/apps/walletd/components/WalletAddresses/index.tsx
@@ -1,22 +1,10 @@
-import { Link, Table, Text, truncate } from '@siafoundation/design-system'
-import { routes } from '../../config/routes'
-import { useDialog } from '../../contexts/dialog'
-import { WalletdAuthedLayout } from '../WalletdAuthedLayout'
-import { WalletdSidenav } from '../WalletdSidenav'
-import { AddressesActionsMenu } from './AddressesActionsMenu'
-import { useRouter } from 'next/router'
+import { Table } from '@siafoundation/design-system'
import { useAddresses } from '../../contexts/addresses'
import { StateNoneMatching } from './StateNoneMatching'
import { StateNoneYet } from './StateNoneYet'
import { StateError } from './StateError'
-import { useWallets } from '../../contexts/wallets'
-import { AddressesFiltersBar } from './AddressesFilterBar'
export function WalletAddresses() {
- const router = useRouter()
- const id = router.query.id as string
- const { openDialog } = useDialog()
- const { wallet } = useWallets()
const {
dataset,
dataState,
@@ -29,61 +17,27 @@ export function WalletAddresses() {
} = useAddresses()
return (
- }
- openSettings={() => openDialog('settings')}
- title={wallet?.name}
- navTitle={
-
-
- {truncate(wallet?.name, 20)}
-
-
- /
-
-
- Addresses
-
-
- }
- actions={}
- stats={}
- size="3"
- >
-
-
- ) : dataState === 'noneYet' ? (
-
- ) : dataState === 'error' ? (
-
- ) : null
- }
- pageSize={6}
- data={dataset}
- context={cellContext}
- columns={columns}
- sortableColumns={sortableColumns}
- sortDirection={sortDirection}
- sortField={sortField}
- toggleSort={toggleSort}
- />
-
+
+ ) : dataState === 'noneYet' ? (
+
+ ) : dataState === 'error' ? (
+
+ ) : null
+ }
+ pageSize={6}
+ data={dataset}
+ context={cellContext}
+ columns={columns}
+ sortableColumns={sortableColumns}
+ sortDirection={sortDirection}
+ sortField={sortField}
+ toggleSort={toggleSort}
+ />
+
- {dataState === 'noneYet' &&
}
- {dataState !== 'noneYet' && (
-
- ) : dataState === 'error' ? (
-
- ) : null
- }
- pageSize={6}
- data={dataset}
- context={context}
- columns={columns}
- sortableColumns={sortableColumns}
- sortDirection={sortDirection}
- sortField={sortField}
- toggleSort={toggleSort}
- />
- )}
-
+ {dataState === 'noneYet' &&
}
+ {dataState !== 'noneYet' && (
+
+ ) : dataState === 'error' ? (
+
+ ) : null
+ }
+ pageSize={6}
+ data={dataset}
+ context={context}
+ columns={columns}
+ sortableColumns={sortableColumns}
+ sortDirection={sortDirection}
+ sortField={sortField}
+ toggleSort={toggleSort}
+ />
+ )}
+