Simplified examples for the W3UI website

react-uploader.jsx

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>
  )
}

react-uploads-list.jsx

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>
  )
}

react-wallet.jsx

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>
  )
}

solid-uploader.jsx

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>
  )
}

solid-uploads-list.jsx

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>
  )
}

solid-wallet.jsx

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>
  )
}

vue-uploader.vue

<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>

vue-wallet.vue

<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>