got the libraries to load

desktop-node-react/package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@socketsupply/ssc-node": "1.7.1",
+    "@w3ui/react-keyring": "^1.0.1",
+    "@w3ui/react-uploader": "^2.1.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   }

desktop-node-react/src/render/App.jsx

@@ -1,5 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import './App.css';
+import React, { useEffect, useState } from "react";
+import { AuthProvider, useAuth, AuthStatus } from "@w3ui/react-keyring";
+import { UploaderProvider, useUploader } from "@w3ui/react-uploader";
+import "./App.css";
 
 function useEvent(event, handler, passive = false) {
   useEffect(() => {
@@ -29,13 +31,131 @@ function App() {
   })
   return (
     <>
-      <div>Messages sent from the main process: {messageCounter} ({clickCounter} clicks, {timerCounter} automatic (once per 5 seconds))</div>
-      <button className="button-increase" onClick={async () => {
-        const result = await window.system.send('increase counter')
-        console.log(`Result: ${result}`)
-      }}>Increase counter from the render process</button>
+      <AuthProvider>
+        <UploaderProvider>
+          <IdentityLoader>
+            <Uploader />
+          </IdentityLoader>
+        </UploaderProvider>
+      </AuthProvider>
+      <div>
+        Messages sent from the main process: {messageCounter} ({clickCounter}{" "}
+        clicks, {timerCounter} automatic (once per 5 seconds))
+      </div>
+      <button
+        className="button-increase"
+        onClick={async () => {
+          const result = await window.system.send("increase counter");
+          console.log(`Result: ${result}`);
+        }}
+      >
+        Increase counter from the render process
+      </button>
     </>
   );
 }
 
+function MyUploader() {
+  const [{ uploadedCarChunks }, uploader] = useUploader();
+  const [file, setFile] = useState(null);
+  const [dataCid, setDataCid] = useState('')
+  const [status, setStatus] = useState("");
+  const [error, setError] = useState(null);
+
+  if (!uploader) return null;
+
+  const handleUploadSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      setStatus("uploading");
+      const cid = await uploader.uploadFile(file);
+      setDataCid(cid);
+    } catch (err) {
+      console.error(err);
+      setError(err);
+    } finally {
+      setStatus("done");
+    }
+  };
+
+  return (
+    <form onSubmit={handleUploadSubmit}>
+      <div className="db mb3">
+        <label htmlFor="file" className="db mb2">
+          File:
+        </label>
+        <input
+          id="file"
+          className="db pa2 w-100 ba br2"
+          type="file"
+          onChange={(e) => setFile(e.target.files[0])}
+          required
+        />
+      </div>
+      <button type="submit" className="ph3 pv2">
+        Upload
+      </button>
+    </form>
+  );
+}
+
+const Uploader = withIdentity(MyUploader);
+
+export function withIdentity (Component) {
+  return props => (
+    <Authenticator>
+      <Component {...props} />
+    </Authenticator>
+  )
+}
+
+function Authenticator ({ children }) {
+  const { authStatus, identity, registerAndStoreIdentity, cancelRegisterAndStoreIdentity } = useAuth()
+  const [email, setEmail] = useState('')
+
+  if (authStatus === AuthStatus.SignedIn) {
+    return children
+  }
+
+  if (authStatus === AuthStatus.EmailVerification) {
+    return (
+      <div>
+        <h1 className='near-white'>Verify your email address!</h1>
+        <p>Click the link in the email we sent to {identity && identity.email} to sign in.</p>
+        <form onSubmit={e => { e.preventDefault(); cancelRegisterAndStoreIdentity() }}>
+          <button type='submit' className='ph3 pv2'>Cancel</button>
+        </form>
+      </div>
+    )
+  }
+
+  const handleRegisterSubmit = async e => {
+    e.preventDefault()
+    try {
+      await registerAndStoreIdentity(email)
+    } catch (err) {
+      throw new Error('failed to register', { cause: err })
+    }
+  }
+
+  return (
+    <form onSubmit={handleRegisterSubmit}>
+      <div className='mb3'>
+        <label htmlFor='email' className='db mb2'>Email address:</label>
+        <input id='email' className='db pa2 w-100' type='email' value={email} onChange={e => setEmail(e.target.value)} required />
+      </div>
+      <button type='submit' className='ph3 pv2'>Register</button>
+    </form>
+  )
+}
+
+function IdentityLoader({ children }) {
+  const { loadDefaultIdentity } = useAuth();
+  // eslint-disable-next-line
+  useEffect(() => {
+    loadDefaultIdentity();
+  }, []); // try load default identity - once.
+  return children;
+}
+
 export default App;