Skip to content

Commit

Permalink
Beautify drive info
Browse files Browse the repository at this point in the history
  • Loading branch information
d0rich committed Oct 29, 2023
1 parent c156b9d commit 5768386
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 26 deletions.
35 changes: 9 additions & 26 deletions ton-drive-frontend/src/pages/FilesListPage.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,14 @@
import FilesNavigation from "../widgets/FilesNavigation"
import FileUpload from "../widgets/FileUpload"
import {useCollectionInfo} from "../widgets/hooks/useCollectionInfo";
import {fromNano} from "ton";
import {useMyCollection} from "../widgets/hooks/useMyCollection";
import DriveInfo from "../widgets/DriveInfo";

export default function FilesListPage() {
const myCollection = useMyCollection()
const collectionInfo = useCollectionInfo()
let balancePretty = 'Loading';
if (collectionInfo != null) {
balancePretty = fromNano(collectionInfo!!.balance)
}
return (
<>
<h1 className="font-bold text-3xl">My Files</h1>
<h2>Address</h2>
<h2>{collectionInfo?.address?.toString()}</h2>
<h2>Balance</h2>
<h2>{balancePretty} TON</h2>
<button className={"btn btn-outline btn-md btn-primary"} onClick={() => myCollection?.closeCollection()}>
Close Collection
</button>
<button className={"btn btn-outline btn-md btn-secondary"} onClick={() => myCollection?.createCollection()}>
Create Collection
</button>
<FileUpload/>
<FilesNavigation/>
</>
)
return (
<>
<h1 className="font-bold text-3xl">My Files</h1>
<DriveInfo className="my-2" />
<FileUpload/>
<FilesNavigation/>
</>
)
}
42 changes: 42 additions & 0 deletions ton-drive-frontend/src/widgets/DriveInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {useCollectionInfo} from "./hooks/useCollectionInfo";
import {fromNano} from "ton";
import {useMyCollection as useFilesCollection} from "./hooks/useMyCollection";

export interface AccountInfoProps {
className?: string
}

export default function DriveInfo({className = ""}: AccountInfoProps) {
const myCollection = useFilesCollection()
const collectionInfo = useCollectionInfo()
let balance = collectionInfo?.balance;
return (
<div className={"card card-compact bg-base-200 shadow-md " + className}>
<div className="card-body">
<h2 className="card-title">My Drive</h2>
<div className="overflow-x-auto">
<table className="table table-sm">
<tbody>
<tr>
<th>Address</th>
<td>{collectionInfo?.address?.toString()}</td>
</tr>
<tr>
<th>Balance</th>
<td>{balance ? <> {fromNano(balance)} TON </> : <span className="loading loading-bars loading-sm" />}</td>
</tr>
</tbody>
</table>
</div>
<div className="card-actions justify-end">
<button className="btn btn-outline btn-sm btn-primary" onClick={() => myCollection?.closeCollection()}>
Close Collection
</button>
<button className="btn btn-outline btn-sm btn-secondary" onClick={() => myCollection?.createCollection()}>
Create Collection
</button>
</div>
</div>
</div>
)
}

0 comments on commit 5768386

Please sign in to comment.