const pieceInfo = Piece.fromLink(aggregate).toInfo()
return (
@@ -240,7 +240,7 @@ function InclusionProof ({ proof, piece, style }: { proof: ProofData, piece: Pie
return (
{archy(data).split('\n').map(line => {
- if (!line) return
+ if (!line) return
if (line.indexOf(' ') === -1) {
return (
diff --git a/src/app/space/[did]/share/page.tsx b/src/app/space/[did]/share/page.tsx
index 6544f88..cba51d7 100644
--- a/src/app/space/[did]/share/page.tsx
+++ b/src/app/space/[did]/share/page.tsx
@@ -2,8 +2,8 @@
import { ShareSpace } from '@/share'
-export default function SharePage (): JSX.Element {
+export default function SharePage ({params}): JSX.Element {
return (
-
+
)
}
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
new file mode 100644
index 0000000..95dbddd
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+function Tooltip({ text, title, children }: { text: string[], title?: string, children: React.ReactNode }) {
+ const [visible, setVisible] = useState(false);
+
+ return (
+ setVisible(true)}
+ onMouseLeave={() => setVisible(false)}
+ className="relative cursor-pointer flex items-center"
+ >
+ {children}
+ {visible && (
+
+ {title && <>{title}
}
+ {text.join('\n')}
+
+ )}
+
+ );
+}
+
+export default Tooltip
\ No newline at end of file
diff --git a/src/share.tsx b/src/share.tsx
index 9914928..d59ce9b 100644
--- a/src/share.tsx
+++ b/src/share.tsx
@@ -1,13 +1,15 @@
-import { ChangeEvent, useState } from 'react'
-import { useW3 } from '@w3ui/react'
-import * as DID from '@ipld/dag-ucan/did'
+import { ChangeEvent, useEffect, useState } from 'react'
+import { SpaceDID, useW3 } from '@w3ui/react'
import { extract } from '@ucanto/core/delegation'
import type { PropsWithChildren } from 'react'
import type { Delegation } from '@ucanto/interface'
import { SpacePreview } from './components/SpaceCreator'
import { H2 } from '@/components/Text'
import CopyButton from './components/CopyButton'
-import { ArrowDownOnSquareStackIcon, CloudArrowDownIcon, PaperAirplaneIcon } from '@heroicons/react/24/outline'
+import Tooltip from './components/Tooltip'
+import { ArrowDownOnSquareStackIcon, CloudArrowDownIcon, PaperAirplaneIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
+import * as DIDMailTo from '@web3-storage/did-mailto'
+import { DID } from '@ucanto/core'
function Header(props: PropsWithChildren): JSX.Element {
return (
@@ -17,10 +19,111 @@ function Header(props: PropsWithChildren): JSX.Element {
)
}
-export function ShareSpace (): JSX.Element {
+function isDID(value: string): boolean {
+ try {
+ DID.parse(value.trim())
+ return true
+ } catch {
+ return false
+ }
+}
+
+function isEmail(value: string): boolean {
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ return !isDID(value) && emailRegex.test(value)
+}
+
+export function ShareSpace({ spaceDID }: { spaceDID: SpaceDID }): JSX.Element {
const [{ client }] = useW3()
const [value, setValue] = useState('')
const [downloadUrl, setDownloadUrl] = useState('')
+ const [sharedEmails, setSharedEmails] = useState<{ email: string, capabilities: string[] }[]>([])
+
+ const updateSharedEmails = (delegations: { email: string, capabilities: string[] }[]) => {
+ setSharedEmails(prev => {
+ const newEmails = delegations.filter(d => !prev.some(item => item.email === d.email))
+ return [...prev, ...newEmails]
+ })
+ }
+
+ useEffect(() => {
+ if (client && spaceDID) {
+ // Find all delegations via email where the spaceDID is present
+ const delegations = client.delegations()
+ .filter(d => d.capabilities.some(c => c.with === spaceDID))
+ .filter(d => d.audience.did().startsWith('did:mailto:'))
+ .map(d => ({
+ email: DIDMailTo.toEmail(DIDMailTo.fromString(d.audience.did())),
+ capabilities: d.capabilities.map(c => c.can)
+ }))
+ updateSharedEmails(delegations)
+ }
+ }, [client, spaceDID])
+
+ async function shareViaEmail(email: string): Promise {
+ if (!client) {
+ throw new Error(`Client not found`)
+ }
+
+ const currentSpace = client.agent.currentSpace()
+ try {
+ const space = client.spaces().find(s => s.did() === spaceDID)
+ if (!space) {
+ throw new Error(`Could not find space to share`)
+ }
+
+ const delegatedEmail = DIDMailTo.email(email)
+
+ // FIXME (fforbeck): enable shareSpace function call after @w3ui/react lib is updated to v2.4.0 and the issue with blobs are solved
+ // const delegation = await client.shareSpace(delegatedEmail, space.did())
+
+ // Make sure the agent is using the shared space before delegating
+ await client.agent.setCurrentSpace(spaceDID)
+
+ // Delegate capabilities to the delegate account to access the **current space**
+ const delegation = await client.createDelegation(
+ {
+ did: () => DIDMailTo.fromEmail(delegatedEmail),
+ },
+ [
+ 'space/*',
+ 'store/*',
+ 'upload/*',
+ 'access/*',
+ 'usage/*',
+ // @ts-expect-error (FIXME: https://github.com/storacha/w3up/issues/1554)
+ 'filecoin/*',
+ ], {
+ expiration: Infinity
+ }
+ )
+
+ const sharingResult = await client.capability.access.delegate({
+ space: spaceDID,
+ delegations: [delegation],
+ })
+
+ if (sharingResult.error) {
+ throw new Error(
+ `failed to share space with ${delegatedEmail}: ${sharingResult.error.message}`,
+ {
+ cause: sharingResult.error,
+ }
+ )
+ }
+
+ const next = { email: delegatedEmail, capabilities: delegation.capabilities.map(c => c.can) }
+ updateSharedEmails([next])
+ setValue('')
+ } catch (err) {
+ console.error(err)
+ } finally {
+ // Reset to the original space if it was different
+ if (currentSpace && currentSpace !== spaceDID) {
+ await client.agent.setCurrentSpace(currentSpace)
+ }
+ }
+ }
async function makeDownloadLink(input: string): Promise {
if (!client) return
@@ -28,7 +131,7 @@ export function ShareSpace (): JSX.Element {
let audience
try {
audience = DID.parse(input.trim())
- } catch (err) {
+ } catch {
setDownloadUrl('')
return
}
@@ -51,12 +154,17 @@ export function ShareSpace (): JSX.Element {
function onSubmit(e: React.FormEvent): void {
e.preventDefault()
- void makeDownloadLink(value)
+ if (isDID(value)) {
+ void makeDownloadLink(value)
+ } else if (isEmail(value)) {
+ void shareViaEmail(value)
+ } else {
+ setDownloadUrl('')
+ }
}
function onChange(e: ChangeEvent): void {
const input = e.target.value
- void makeDownloadLink(input)
setValue(input)
}
@@ -71,7 +179,7 @@ export function ShareSpace (): JSX.Element {
- Ask your friend for their Decentralized Identifier (DID) and paste it
+ Ask your friend for their Email or Decentralized Identifier (DID) and paste it
below:
+
+
+ {sharedEmails.length > 0 && (
+
+
+ Shared With:
+
+
+ {sharedEmails.map(({ email, capabilities }) => (
+ -
+
+ {email}
+
+
+
+
+
+ ))}
+
+
)
}
-export function ImportSpace () {
+export function ImportSpace() {
const [{ client }] = useW3()
const [proof, setProof] = useState
()
@@ -117,14 +265,14 @@ export function ImportSpace () {
}
delegation = res.ok
} catch (err) {
- console.log(err)
+ console.error(err)
return
}
try {
await client.addSpace(delegation)
setProof(delegation)
} catch (err) {
- console.log(err)
+ console.error(err)
}
}
@@ -142,7 +290,7 @@ export function ImportSpace () {
Instruct your friend to use the web console or CLI to create a UCAN, delegating your DID acces to their space.