Last active
September 28, 2022 20:36
-
-
Save alanshaw/ce84644338cf5663f8f4923edae89ad5 to your computer and use it in GitHub Desktop.
Simplified examples for the W3UI website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react' | |
import { useUploader } from '@w3ui/react-uploader' | |
export default function Component () { | |
const { uploader } = useUploader() | |
const [file, setFile] = useState(null) | |
const [cid, setCid] = useState('') | |
const handleUploadSubmit = async e => { | |
e.preventDefault() | |
// Build a DAG from the file data to obtain the root CID. | |
const { cid, car } = await uploader.encodeFile(file) | |
// Upload the DAG to the service. | |
await uploader.uploadCar(car) | |
setCid(cid) | |
} | |
if (cid) { | |
return ( | |
<div> | |
<h1>Done!</h1> | |
<p>{cid}</p> | |
</div> | |
) | |
} | |
return ( | |
<form onSubmit={handleUploadSubmit}> | |
<label htmlFor='file'>File:</label> | |
<input id='file' type='file' onChange={e => setFile(e.target.files[0])} required /> | |
<button type='submit'>Upload</button> | |
</form> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react' | |
import { useUploadsList } from '@w3ui/react-uploads-list' | |
export default function Component () { | |
const { loading, data, error, reload } = useUploadsList() | |
if (error) return <p>⚠️ {err.message}</p> | |
return ( | |
<div> | |
<table> | |
{data.map(cid => ( | |
<tr key={cid}> | |
<td>{cid}</td> | |
</tr> | |
))} | |
</table> | |
<button type='button' onClick={reload}>🔄 Refresh</button> | |
{loading ? <p>Loading...</p> : null} | |
</div> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useState } from 'react' | |
import { useAuth, AuthStatus } from '@w3ui/react-wallet' | |
export default function Component () { | |
const { authStatus, identity, loadDefaultIdentity, registerAndStoreIdentity } = useAuth() | |
const [email, setEmail] = useState('') | |
useEffect(() => { loadDefaultIdentity() }, []) // try load default identity - once. | |
if (authStatus === AuthStatus.SignedIn) { | |
return ( | |
<div> | |
<h1>Welcome {identity.email}!</h1> | |
<p>You are logged in!!</p> | |
</div> | |
) | |
} | |
if (authStatus === AuthStatus.EmailVerification) { | |
return ( | |
<div> | |
<h1>Verify your email address!</h1> | |
<p>Click the link in the email we sent to {identity.email} to sign in.</p> | |
</div> | |
) | |
} | |
return ( | |
<form onSubmit={e => { e.preventDefault(); registerAndStoreIdentity(email) }}> | |
<label htmlFor='email'>Email address:</label> | |
<input id='email' type='email' value={email} onChange={e => setEmail(e.target.value)} required /> | |
<button type='submit'>Register</button> | |
</form> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createSignal, Switch, Match } from 'solid-js' | |
import { useUploader } from '@w3ui/solid-uploader' | |
export default function Component () { | |
const [, uploader] = useUploader() | |
const [file, setFile] = createSignal(null) | |
const [cid, setCid] = createSignal('') | |
const handleUploadSubmit = async e => { | |
e.preventDefault() | |
// Build a DAG from the file data to obtain the root CID. | |
const { cid, car } = await uploader.encodeFile(file()) | |
// Upload the DAG to the service. | |
await uploader.uploadCar(car) | |
setCid(cid) | |
} | |
return ( | |
<Switch> | |
<Match when={cid() !== ''}> | |
<div> | |
<h1>Done!</h1> | |
<p>{cid}</p> | |
</div> | |
</Match> | |
<Match when={cid() === ''}> | |
<form onSubmit={handleUploadSubmit}> | |
<label htmlFor='file'>File:</label> | |
<input id='file' type='file' onChange={e => setFile(e.target.files[0])} required /> | |
<button type='submit'>Upload</button> | |
</form> | |
</Match> | |
</Switch> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { AuthProvider, useAuth } from '@w3ui/solid-wallet' | |
import { createUploadsListResource } from '@w3ui/solid-uploads-list' | |
export default function Component () { | |
const [auth] = useAuth() | |
const [data, { refetch }] = createUploadsListResource(() => auth.identity, { initialValue: [] }) | |
return ( | |
<div> | |
<Switch> | |
<Match when={data.state === 'errored'}> | |
<p>⚠️ {err.message}</p> | |
</Match> | |
<Match when={data.state === 'ready'}> | |
<table> | |
{data().map(cid => ( | |
<tr key={cid}> | |
<td>{cid}</td> | |
</tr> | |
))} | |
</table> | |
</Match> | |
</Switch> | |
<button type='button' onClick={refetch}>🔄 Refresh</button> | |
{data.loading ? <p>Loading...</p> : null} | |
</div> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createSignal, Switch, Match } from 'solid-js' | |
import { useAuth, AuthStatus } from '@w3ui/solid-wallet' | |
export default function Component () { | |
const [auth, { loadDefaultIdentity, registerAndStoreIdentity }] = useAuth() | |
const [email, setEmail] = createSignal('') | |
loadDefaultIdentity() // try load default identity - once. | |
return ( | |
<Switch> | |
<Match when={auth.status === AuthStatus.SignedIn}> | |
<div> | |
<h1>Welcome {auth.identity.email}!</h1> | |
<p>You are logged in!!</p> | |
</div> | |
</Match> | |
<Match when={auth.status === AuthStatus.EmailVerification}> | |
<div> | |
<h1>Verify your email address!</h1> | |
<p>Click the link in the email we sent to {auth.identity.email} to sign in.</p> | |
</div> | |
</Match> | |
<Match when={auth.status === AuthStatus.SignedOut}> | |
<form onSubmit={e => { e.preventDefault(); registerAndStoreIdentity(email()) }}> | |
<div> | |
<label htmlFor='email'>Email address:</label> | |
<input id='email' type='email' value={email()} onInput={e => setEmail(e.target.value)} required /> | |
</div> | |
<button type='submit'>Register</button> | |
</form> | |
</Match> | |
</Switch> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import { UploaderProviderInjectionKey } from '@w3ui/vue-uploader' | |
export default { | |
inject: { | |
encodeFile: { from: UploaderProviderInjectionKey.encodeFile }, | |
uploadCar: { from: UploaderProviderInjectionKey.uploadCar } | |
}, | |
data () { | |
return { file: null, cid: null } | |
}, | |
methods: { | |
async handleUploadSubmit (e) { | |
e.preventDefault() | |
// Build a DAG from the file data to obtain the root CID. | |
const { cid, car } = await this.encodeFile(this.file) | |
// Upload the DAG to the service. | |
await this.uploadCar(car) | |
this.cid = cid.toString() | |
}, | |
handleFileChange (e) { | |
e.preventDefault() | |
this.file = e.target.files[0] | |
} | |
} | |
} | |
</script> | |
<template> | |
<div v-if="cid !== ''"> | |
<h1>Done!</h1> | |
<p>{{cid}}</p> | |
</div> | |
<form v-if="!cid" @submit="handleUploadSubmit"> | |
<label htmlFor='file'>File:</label> | |
<input id='file' type='file' @change="handleFileChange" required /> | |
<button type='submit'>Upload</button> | |
</form> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import { AuthProviderInjectionKey, AuthStatus } from '@w3ui/vue-wallet' | |
export default { | |
inject: { | |
identity: { from: AuthProviderInjectionKey.identity }, | |
status: { from: AuthProviderInjectionKey.status }, | |
registerAndStoreIdentity: { from: AuthProviderInjectionKey.registerAndStoreIdentity } | |
}, | |
data () { | |
return { email: '' } | |
}, | |
computed: { | |
AuthStatus: () => AuthStatus | |
}, | |
methods: { | |
async handleRegisterSubmit (e) { | |
e.preventDefault() | |
await this.registerAndStoreIdentity(this.email) | |
} | |
} | |
} | |
</script> | |
<template> | |
<div v-if="status === AuthStatus.SignedIn"> | |
<h1>Welcome {{identity.email}}!</h1> | |
<p>You are logged in!!</p> | |
</div> | |
<div v-if="status === AuthStatus.EmailVerification"> | |
<h1>Verify your email address!</h1> | |
<p>Click the link in the email we sent to {{identity.email}} to sign in.</p> | |
</div> | |
<form v-if="status === AuthStatus.SignedOut" @submit="handleRegisterSubmit"> | |
<label htmlFor="email">Email address:</label> | |
<input id="email" type="email" v-model="email" required /> | |
<button type="submit">Register</button> | |
</form> | |
</template> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment