Headless, type-safe, UI components for the next generation Web3.Storage APIs.
Documentation
Examples
React
Contributing
Feel free to join in. All welcome. Open an issue!
License
Dual-licensed under MIT + Apache 2.0
Feel free to join in. All welcome. Open an issue!
Dual-licensed under MIT + Apache 2.0
The code snippets on the website need updating. They are simplified, and mostly just have styles removed, but also have some code simplifications to make it as easy as possible to understand.
refs #117
I think it makes more sense to include these "headless UI" style components in the @w3ui/react-* packages rather than bundling them together in the react-ui package. It feels more intuitive given the naming - if we do want to have the "no UI" style components in a separate package I'd advocate for callling that package react-uploader-provider
or react-uploader-api
or something, but given how much code this is and the fact that tree shaking is pretty good, it seems ok to me to bundle them together.
the react-ui package will be reserved for higher level "customizable UI" style components and can now have opinions about the right way to do customization at the top level rather than having two different flavors of customizability in a single package.
@alanshaw @cmunns curious what you think about this - happy to move the uploader back if we decide that's a better structure
This PR makes breaking changes to core and framework components to integrate the access agent (+ucanto 0.9) and the new upload client.
resolves #127
BREAKING CHANGE: core and framework components have changed considerably.
TODO: be more explicit about changes
This adds .js
to the set of file extensions processed by babel.
I'm hoping that this will fix #160, since after running npm run build
with this change I no longer see any class private members in packages/react-keyring/build/esm/index.js
, which is where the example was failing before.
The downside of this change is that the rolled-up index.js
grew from 198kb to 300kb for react-keyring. I assume the other modules are affected as well.
I also haven't been able to test this in codesandbox, since I don't know how to make it depend on an unreleased npm package (or if that's even possible).
For the last 2 days, the react uploads list has been returning undefined for the dataCid
and carCids
. Some initial debugging of the network requests looks like the API is not returning the CIDs... has something recently changed?
Thanks for all of your hard work!
For reference, my code is here: http://github.com/codyzu/ipfs-drive
one slightly weird thing about this is that I realized we need to manually call next
to get the next page of results - not sure if that's intentional and we might want to add that to the react-uploads-list
package for developer convenience
the data passed back from list
has changed, so these
examples need to be updated. as I was digging in I realized
the examples don't seem to be working and I think we need
to dig deeper into the packages to understand why, so
I'm checkpointing here before I dig into that
This PR was generated with Release Please. See documentation.
autorelease: taggedThis PR was generated with Release Please. See documentation.
autorelease: taggedThis PR was generated with Release Please. See documentation.
autorelease: taggedThis PR was generated with Release Please. See documentation.
autorelease: taggedHi, I'm getting this error Unhandled Runtime Error: missing space
while trying to upload a file to ipfs using w3ui.
Here is the code I wrote for it
import React, { useState } from 'react'
import { useUploader } from '@w3ui/react-uploader'
export default function Component () {
const [, uploader] = useUploader()
const [file, setFile] = useState(null)
const [dataCid, setDataCid] = useState('')
const handleUploadSubmit = async e => {
e.preventDefault()
const cid = await uploader.uploadFile(file)
setDataCid(cid)
}
if (dataCid) {
return (
<div>
<h1>Done!</h1>
<p>{dataCid.toString()}</p>
<p><a href={`https://${dataCid}.ipfs.w3s.link`}>View {file.name} on IPFS Gateway.</a></p>
</div>
)
}
return (
<form onSubmit={handleUploadSubmit}>
<div>
<label htmlFor='file'>File:</label>
<input id='file' type='file' onChange={e => setFile(e.target.files[0])} required />
</div>
<button type='submit'>Upload</button>
</form>
)
}
App.jsx file
import { KeyringProvider, useKeyring } from '@w3ui/react-keyring'
import { UploaderProvider } from '@w3ui/react-uploader'
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<KeyringProvider>
<UploaderProvider>
<AgentLoader>
<Component {...pageProps} />
</AgentLoader>
</UploaderProvider>
</KeyringProvider>
)
}
function AgentLoader ({ children } : any) {
const [, { loadAgent }] = useKeyring()
// eslint-disable-next-line
useEffect(() => { loadAgent() }, []) // load agent - once.
return children
}
export default MyApp;
create-react-app
projects don't have the proper loaders to handle loading typescript in dependencies. vite
is used in our other examples so it makes sense to me that we'd use it for react as well.
putting this in a separate PR before I update all the other examples to get feedback before committing to this approach, and to avoid too many merge conflicts with the efforts underway to update examples by @cmunns and @natevw
This gets us on the same page as other web3-storage repos. It makes the development workflow more seamless thanks to workspace:
deps.
It also uses use publishConfig
to optimize dev workflow: by pointing main
at the typescript file in development, apps that support autoreloading autoreload when dependencies change - hooray! this gets rid of the build
step during development and feels very slick.
Additional changes:
import type
In both of these cases this new config resulted in broken builds without these changes.
As noted in #198, the Vue keyring used to call loadAgent automatically but no longer does. The React and SolidJS keyrings don't automatically call it, which forces the example apps to call it manually in a slightly unintuitive way.
while fixing the react uploads list example (https://github.com/web3-storage/w3ui/pull/195) I noticed that the useUploadsList hook doesn't automatically load the first page of results - I think this is a bug but figured I'd double check before changing the current behavior.
⚠️ This library is currently in alpha. Contributors wanted! tusken Postgres client from a galaxy far, far away. your database is the source-of-truth f
JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi
macaron comptime-css is now called macaron! macaron is a zero-runtime and type-safe CSS-in-JS library made with performance in mind Powered by vanilla
Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t
Zors ?? Next-gen framework for building modern, type-safe command-line applications. ?? Tiny (zero dependencies) ?? Runtime agonistic (supports both D
Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install
Starter React Typescript Ethers.js Hardhat Project This repo contains a Hardhat and React Dapp starter project. The React Dapp in the frontend dir of
?? Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.
PUX Build type-safe web applications with PureScript. Documentation | Examples | Chat Pux is a PureScript library for building web applications. Inter
hdot A sensible way to write HTML in JavaScript. Type-safe. Helps you follow the HTML spec. Terse. Almost character for character with plain HTML. Bui
tson Type Safe Object Notation & Validation ?? Work in Progress, not ready for production... Features ?? Functional ?? Immutable ✅ Well tested Why? Af
cloudy-ts These packages aren't yet published on npm. This is still highly experimental. Need to figure out a few things before releasing the first ve
?? magic-regexp A compiled-away, type-safe, readable RegExp alternative ✨ Changelog ?? Documentation ▶️ Online playground Features Runtime is zero-dep
?? typesafe-i18n A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. Advantages ?? lightwe
remix-sprites-example A script that combines a folder of .svg files into a single sprites.svg file and type definitions for safe usage. Technical Over
func-di English | 简体中文 A functional, immutable, type safe and simple dependency injection library inspired by Angular. Why func-di Installation Usage
Mindbody API Type safe library for interacting with Mindbody's Public API (v6) and Webhooks ⚠️ Read before installing This library is typed according