🌎 Public Data
@@ -155,9 +155,9 @@ function humanFileSize (bytes: number): string {
}
const UploaderContents = (): JSX.Element => {
- const [{ status, file }] = useUploaderComponent()
+ const [{ status, file }] = useUploader()
const hasFile = file !== undefined
- if (status === Status.Idle) {
+ if (status === UploadStatus.Idle) {
return hasFile
? (
<>
@@ -195,18 +195,18 @@ const UploaderContents = (): JSX.Element => {
const UploaderConsole = (): JSX.Element => {
const [{ status, file, error, dataCID, storedDAGShards, uploadProgress }] =
- useUploaderComponent()
+ useUploader()
switch (status) {
- case Status.Uploading: {
+ case UploadStatus.Uploading: {
return
}
- case Status.Succeeded: {
+ case UploadStatus.Succeeded: {
return (
)
}
- case Status.Failed: {
+ case UploadStatus.Failed: {
return
}
default: {
@@ -223,11 +223,11 @@ export const Uploader = ({
onUploadComplete
}: SimpleUploaderProps): JSX.Element => {
return (
-
-
+
)
}
diff --git a/src/components/UploadsList.tsx b/src/components/UploadsList.tsx
index 76ac9de..9f9bc06 100644
--- a/src/components/UploadsList.tsx
+++ b/src/components/UploadsList.tsx
@@ -1,34 +1,34 @@
import React from 'react'
import { ChevronLeftIcon, ChevronRightIcon, ArrowPathIcon } from '@heroicons/react/20/solid'
-import type { UploadListResult } from '@w3ui/uploads-list-core'
-import { UploadsList as UploadsListCore } from '@w3ui/react-uploads-list'
-import { gatewayHost } from '../components/services'
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-import { H2 } from './Text'
+import { Space, UnknownLink, UploadListSuccess } from '@w3ui/react'
interface UploadsProps {
- uploads?: UploadListResult[]
+ space: Space
+ uploads: UploadListSuccess['results']
loading: boolean
+ validating: boolean
+ onSelect: (root: UnknownLink) => void
+ onNext: (() => void) | undefined
+ onPrev: (() => void) | undefined
+ onRefresh: () => void
}
-function Uploads ({ uploads, loading }: UploadsProps): JSX.Element {
- const pathname = usePathname()
+function Uploads ({ uploads, loading, validating, onSelect, onNext, onPrev, onRefresh }: UploadsProps): JSX.Element {
return uploads === undefined || uploads.length === 0
? (
<>
-
No uploads
+ {loading ? null :
No uploads
}
)
: (
-
+
)
}
-export const UploadsList = (): JSX.Element => {
+export const UploadsList = (props: UploadsProps): JSX.Element => {
return (
-
- {(props) => (
-
-
-
- )}
-
+
+
+
)
}
diff --git a/src/components/UsageBar.tsx b/src/components/UsageBar.tsx
index 0a719f0..428b623 100644
--- a/src/components/UsageBar.tsx
+++ b/src/components/UsageBar.tsx
@@ -1,66 +1,73 @@
'use client'
-import { ReactNode, useEffect, useState } from 'react'
-import { useKeyring, Plan } from '@w3ui/react-keyring'
+import { ReactNode } from 'react'
+import { useW3, PlanGetSuccess, SpaceDID } from '@w3ui/react'
+import useSWR from 'swr'
+import { GB, TB, filesize } from '@/lib'
-const B = 1024
-const MB = 1024 * B
-const GB = 1024 * MB
-const TB = 1024 * GB
const BarHeight = 10
-const PlanLimit: Record<`did:${string}`, number> = {
- 'did:web:starter.web3.storage': 5 * GB,
- 'did:web:lite.web3.storage': 100 * GB,
- 'did:web:business.web3.storage': 2 * TB
-}
-
-const PlanNames: Record<`did:${string}`, string> = {
- 'did:web:starter.web3.storage': 'Starter',
- 'did:web:lite.web3.storage': 'Lite',
- 'did:web:business.web3.storage': 'Business'
+const Plans: Record<`did:${string}`, { name: string, limit: number }> = {
+ 'did:web:starter.web3.storage': { name: 'Starter', limit: 5 * GB },
+ 'did:web:lite.web3.storage': { name: 'Lite', limit: 100 * GB },
+ 'did:web:business.web3.storage': { name: 'Business', limit: 2 * TB }
}
export function UsageBar (): ReactNode {
- const [{ account }, { getPlan }] = useKeyring()
- const [plan, setPlan] = useState()
- const [usage, setUsage] = useState>()
+ const [{ client, accounts }] = useW3()
+ // TODO: introduce account switcher
+ const account = accounts[0]
- useEffect(() => {
- if (!account) return
- (async () => {
- if (account) {
- try {
- const result = await getPlan(account as `${string}@${string}`)
- if (result.error) throw new Error('getting plan', { cause: result.error })
- setPlan(result.ok)
- } catch (err) {
- console.error(err)
- }
- }
- })()
- }, [account, getPlan])
+ const { data: plan } = useSWR(`/plan/${account?.did() ?? ''}`, {
+ fetcher: async () => {
+ if (!account) return
+ const result = await account.plan.get()
+ if (result.error) throw new Error('getting plan', { cause: result.error })
+ return result.ok
+ },
+ onError: err => console.error(err.message, err.cause)
+ })
- useEffect(() => {
- if (!account) return
- // TODO: get usage by space
- }, [account])
+ const { data: usage } = useSWR|undefined>(`/usage/${account ?? ''}`, {
+ fetcher: async () => {
+ const usage: Record = {}
+ if (!account || !client) return
- // if (!plan) setPlan({ product: 'did:web:starter.web3.storage' })
- // if (!usage) setUsage({
- // 'did:key:z6MkjCoKJcunQgzihb4tXBYDd9xunhpGNoC14HEypgAe5cNW': 500_000_000,
- // 'did:key:z6MketbAFtbeqDeVHxSzSSDH2PfMTquQ3vzZCcPFweXBGe3R': 200_000_000,
- // 'did:key:z6MkoEBnTj96thGj7H7c1DrdNHF4AiA9VPDRVqTmp4teYd6B': 78_000_000,
- // })
+ const now = new Date()
+ const period = {
+ // we may not have done a snapshot for this month _yet_, so get report
+ // from last month -> now
+ from: startOfLastMonth(now),
+ to: now,
+ }
+ const subscriptions = await client.capability.subscription.list(account.did())
+ for (const { consumers } of subscriptions.results) {
+ for (const space of consumers) {
+ try {
+ const result = await client.capability.usage.report(space, period)
+ for (const [, report] of Object.entries(result)) {
+ usage[report.space] = report.size.final
+ }
+ } catch (err) {
+ // TODO: figure out why usage/report cannot be used on old spaces
+ console.error(err)
+ }
+ }
+ }
+ return usage
+ },
+ onError: err => console.error(err.message, err.cause)
+ })
+
const allocated = Object.values(usage ?? {}).reduce((total, n) => total + n, 0)
- const limit = plan?.product ? PlanLimit[plan.product] : null
+ const limit = plan?.product ? Plans[plan.product]?.limit : null
return (
{plan?.product ? (
- Plan:
{PlanNames[plan.product] ?? plan.product} change
+ Plan:
{Plans[plan.product]?.name ?? plan.product} change
) : null}
{usage && limit ? (
@@ -87,9 +94,18 @@ export function UsageBar (): ReactNode {
)
}
-function filesize (bytes: number) {
- if (bytes < B / 2) return `${bytes}B` // avoid 0.0KB
- if (bytes < MB / 2) return `${(bytes / 1024).toFixed(1)}KB` // avoid 0.0MB
- if (bytes < GB / 2) return `${(bytes / 1024 / 1024).toFixed(1)}MB` // avoid 0.0GB
- return `${(bytes / 1024 / 1024 / 1024).toFixed(1)}GB`
+const startOfMonth = (now: string|number|Date) => {
+ const d = new Date(now)
+ d.setUTCDate(1)
+ d.setUTCHours(0)
+ d.setUTCMinutes(0)
+ d.setUTCSeconds(0)
+ d.setUTCMilliseconds(0)
+ return d
+}
+
+const startOfLastMonth = (now: string|number|Date) => {
+ const d = startOfMonth(now)
+ d.setUTCMonth(d.getUTCMonth() - 1)
+ return d
}
diff --git a/src/components/W3API.tsx b/src/components/W3API.tsx
deleted file mode 100644
index e2e3d6a..0000000
--- a/src/components/W3API.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-
-import { ReactNode, useMemo } from 'react'
-import {
- useUploader,
- UploaderContextValue,
- UploaderProvider
-} from '@w3ui/react-uploader'
-import {
- useUploadsList,
- UploadsListContextValue,
- UploadsListProvider
-} from '@w3ui/react-uploads-list'
-import {
- Authenticator,
- useKeyring,
- KeyringContextValue,
- KeyringProvider
-} from '@w3ui/react-keyring'
-import { serviceConnection, servicePrincipal } from './services'
-
-export interface W3APIContextValue {
- keyring: KeyringContextValue
- uploader: UploaderContextValue
- uploadsList: UploadsListContextValue
-}
-
-export interface W3APIProviderProps {
- children: ReactNode
- uploadsListPageSize?: number
-}
-
-export function W3APIProvider ({
- children,
- uploadsListPageSize
-}: W3APIProviderProps): ReactNode {
- return (
-
-
-
-
- {children}
-
-
-
-
- )
-}
-
-export function useW3API (): W3APIContextValue {
- const keyring = useKeyring()
- const uploader = useUploader()
- const uploadsList = useUploadsList()
- const value = useMemo
(
- () => ({
- keyring,
- uploader,
- uploadsList
- }),
- [keyring, uploader, uploadsList]
- )
- return value
-}
diff --git a/src/components/W3UIProvider.tsx b/src/components/W3UIProvider.tsx
new file mode 100644
index 0000000..1807839
--- /dev/null
+++ b/src/components/W3UIProvider.tsx
@@ -0,0 +1,13 @@
+'use client'
+import { Provider } from '@w3ui/react'
+import { serviceConnection, servicePrincipal } from '@/components/services'
+import { ReactNode } from 'react'
+
+
+export default function W3UIProvider ({ children }: { children: ReactNode }) {
+ return (
+
+ <>{children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/W3Upload.tsx b/src/components/W3Upload.tsx
deleted file mode 100644
index 9578769..0000000
--- a/src/components/W3Upload.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { W3APIProvider } from './providers/W3API'
-import { Authenticator } from './Authenticator'
-import { Uploader } from './Uploader'
-import { UploadsList } from './UploadsList'
-
-export function W3Upload (): JSX.Element {
- return (
-
-
-
-
-
-
- )
-}
diff --git a/src/components/services.ts b/src/components/services.ts
index 9def116..a6cffa4 100644
--- a/src/components/services.ts
+++ b/src/components/services.ts
@@ -1,5 +1,4 @@
-import type { Service as AccessService } from '@w3ui/react-keyring'
-import type { Service as UploadService } from '@w3ui/react-uploader'
+import type { Service } from '@w3ui/react'
import { connect } from '@ucanto/client'
import { CAR, HTTP } from '@ucanto/transport'
import * as DID from '@ipld/dag-ucan/did'
@@ -14,7 +13,7 @@ export const servicePrincipal = DID.parse(
process.env.NEXT_PUBLIC_W3UP_SERVICE_DID ?? 'did:web:web3.storage'
)
-export const serviceConnection = connect({
+export const serviceConnection = connect({
id: servicePrincipal,
codec: CAR.outbound,
channel: HTTP.open({
diff --git a/src/lib.ts b/src/lib.ts
new file mode 100644
index 0000000..5c0b512
--- /dev/null
+++ b/src/lib.ts
@@ -0,0 +1,25 @@
+import { DID, UnknownLink } from '@w3ui/react'
+
+export const B = 1024
+export const MB = 1024 * B
+export const GB = 1024 * MB
+export const TB = 1024 * GB
+
+export function shortenCID(cid: UnknownLink) {
+ return shorten(cid.toString(), 5, 4)
+}
+
+export function shortenDID(did: DID) {
+ return shorten(did, 14, 4)
+}
+
+function shorten(text: string, front: number = 3, back: number = 3): string {
+ return `${text.slice(0, front)}…${text.slice(-back)}`
+}
+
+export function filesize (bytes: number) {
+ if (bytes < B / 2) return `${bytes}B` // avoid 0.0KB
+ if (bytes < MB / 2) return `${(bytes / 1024).toFixed(1)}KB` // avoid 0.0MB
+ if (bytes < GB / 2) return `${(bytes / 1024 / 1024).toFixed(1)}MB` // avoid 0.0GB
+ return `${(bytes / 1024 / 1024 / 1024).toFixed(1)}GB`
+}
diff --git a/src/share.tsx b/src/share.tsx
index cfce55e..803b24b 100644
--- a/src/share.tsx
+++ b/src/share.tsx
@@ -1,11 +1,11 @@
import { ChangeEvent, useState } from 'react'
-import { useKeyring } from '@w3ui/react-keyring'
+import { useW3 } from '@w3ui/react'
import * as DID from '@ipld/dag-ucan/did'
import { CarWriter } from '@ipld/car/writer'
import { CarReader } from '@ipld/car/reader'
import { importDAG } from '@ucanto/core/delegation'
import type { PropsWithChildren } from 'react'
-import type { Delegation, DIDKey } from '@ucanto/interface'
+import type { Delegation } from '@ucanto/interface'
import { SpacePreview } from './components/SpaceCreator'
import { H2 } from '@/components/Text'
@@ -45,11 +45,13 @@ export async function toDelegation(car: Blob): Promise {
}
export function ShareSpace (): JSX.Element {
- const [, { createDelegation }] = useKeyring()
+ const [{ client }] = useW3()
const [value, setValue] = useState('')
const [downloadUrl, setDownloadUrl] = useState('')
async function makeDownloadLink(input: string): Promise {
+ if (!client) return
+
let audience
try {
audience = DID.parse(input.trim())
@@ -59,7 +61,7 @@ export function ShareSpace (): JSX.Element {
}
try {
- const delegation = await createDelegation(audience, ['*'], {
+ const delegation = await client.createDelegation(audience, ['*'], {
expiration: Infinity,
})
const blob = await toCarBlob(delegation)
@@ -124,12 +126,12 @@ export function ShareSpace (): JSX.Element {
}
export function ImportSpace () {
- const [{ agent }, { addSpace }] = useKeyring()
+ const [{ client }] = useW3()
const [proof, setProof] = useState()
async function onImport(e: ChangeEvent): Promise {
const input = e.target.files?.[0]
- if (input === undefined) return
+ if (!client || input === undefined) return
let delegation
try {
delegation = await toDelegation(input)
@@ -138,7 +140,7 @@ export function ImportSpace () {
return
}
try {
- await addSpace(delegation)
+ await client.addSpace(delegation)
setProof(delegation)
} catch (err) {
console.log(err)
@@ -149,7 +151,7 @@ export function ImportSpace () {
<>
Send your DID to your friend, and click import to use the UCAN they send you.
- {agent?.did()}
+ {client?.did()}