chore(docs): update vite example

ardriveapp · Nov 4, 2024 · 9c8bc47 · 9c8bc47
1 parent 1c7ce77
commit 9c8bc47
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 45 deletions.
diff --git a/examples/vite/README.md b/examples/vite/README.md
@@ -22,7 +22,7 @@ yarn start
 
 ## Polyfills
 
-The `@ar.io/sdk` uses some modern browser features that may not be available in all browsers. To ensure compatibility, you may need to include some polyfills. This example uses the [vite-plugin-node-polyfills] plugin to include the necessary polyfills.
+The `@ardrive/turbo-sdk` uses some modern browser features that may not be available in all browsers. To ensure compatibility, you may need to include some polyfills. This example uses the [vite-plugin-node-polyfills] plugin to include the necessary polyfills.
 
 The [tsconfig.json](./tsconfig.json) includes the following compiler options:
 

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ardrive/turbo-sdk": "^1.19.2",
+    "@ardrive/turbo-sdk": "^1.20.0",
     "arweave": "^1.15.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

diff --git a/examples/vite/public/screenshot.png b/examples/vite/public/screenshot.png
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
@@ -65,12 +65,10 @@ function App() {
 
     try {
       setUploadStatus('Uploading...');
-      console.log(selectedFile);
       const upload = await turbo.uploadFile({
         fileStreamFactory: () => fileToReadableStream(selectedFile),
         fileSizeFactory: () => selectedFile.size,
       });
-      console.log(upload);
       setUploadStatus(`Upload successful! ${JSON.stringify(upload, null, 2)}`);
     } catch (error) {
       setUploadStatus(
@@ -112,42 +110,68 @@ function App() {
 
   return (
     <div
-      className="App flex flex-col items-center"
+      className="App flex flex-col items-center justify-center"
       style={{ padding: '50px', height: '100vh' }}
     >
       <div
-        className="flex flex-col items-center"
+        className="flex flex-col items-center justify-center"
         style={{
           marginBottom: '20px',
           height: '100%',
         }}
       >
         <h2>File Upload with Turbo SDK</h2>
 
+        <h3>Provide a JWK</h3>
+
         {showJwkInput ? (
-          <div style={{ marginBottom: '20px' }}>
+          <div
+            style={{
+              marginBottom: '20px',
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
             <textarea
               placeholder="Paste your JWK here..."
               value={jwk}
               onChange={handleJwkChange}
               style={{ width: '300px', height: '100px', marginRight: '10px' }}
             />
-            <button onClick={generateRandomJwk}>Generate Random JWK</button>
+            or
+            <button
+              onClick={generateRandomJwk}
+              style={{ marginLeft: '10px', height: '20px' }}
+            >
+              Generate Random JWK
+            </button>
           </div>
         ) : (
-          <div style={{ marginBottom: '10px' }}>
+          <div style={{ marginBottom: '10px', display: 'flex' }}>
             <p>Using generated JWK - {address}</p>
             <button onClick={() => setShowJwkInput(true)}>
               Use Different JWK
             </button>
           </div>
         )}
-
-        <form onSubmit={handleUpload}>
+        <h3>Select a file to upload</h3>
+
+        <form
+          onSubmit={handleUpload}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            width: '300px',
+            margin: 'auto',
+            gap: '20px',
+          }}
+        >
           <input
             type="file"
             onChange={handleFileSelect}
-            style={{ marginRight: '10px' }}
+            style={{ display: 'block', marginTop: '10px' }}
           />
           <button type="submit">Upload File</button>
         </form>

diff --git a/examples/vite/yarn.lock b/examples/vite/yarn.lock
@@ -20,10 +20,10 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@ardrive/turbo-sdk@^1.19.2":
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/@ardrive/turbo-sdk/-/turbo-sdk-1.19.2.tgz#6e1cb8f956fd1c5100d344378b556557ff94e582"
-  integrity sha512-6ZncZhBPbP72oFqRMhXpREQ9djvQyqUVfEndcbGNdeRTm0vexZv/T8sTXQqxzQPRtjRnA05SvEAjYchZHkqm/g==
+"@ardrive/turbo-sdk@^1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@ardrive/turbo-sdk/-/turbo-sdk-1.20.0.tgz#059a414a45335b9714819f21b9a3d55af6cb3fea"
+  integrity sha512-Mc7T+1PCBxVOPOMBLzCGj7vNicvcEo043oJyfSOQHk9Tt/cBd9uJ3kcaYwAsisgIv1psbFozCqi6KjsAlcpmEw==
   dependencies:
     "@cosmjs/amino" "^0.32.4"
     "@cosmjs/crypto" "^0.32.4"
@@ -43,6 +43,7 @@
     mime-types "^2.1.35"
     plimit-lit "^3.0.1"
     prompts "^2.4.2"
+    starknet "^6.11.0"
     tweetnacl "^1.0.3"
     winston "^3.14.1"
 
@@ -2757,14 +2758,6 @@ filelist@^1.0.4:
   dependencies:
     minimatch "^5.0.1"
 
-filereader-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/filereader-stream/-/filereader-stream-2.0.0.tgz#b30d5a5bf6d14c638d7eb55e193abb986f8048a1"
-  integrity sha512-U1OzPNA5quv2/ejRikN/G8llfdtHpblOuKNgxooVjbr/i9uEJ/QIQ7eslx/RqHRJVuTqwr6v5/XG87935t/daA==
-  dependencies:
-    from2 "^2.1.0"
-    typedarray-to-buffer "^3.0.4"
-
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -2811,14 +2804,6 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-from2@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-
 fs-extra@^10.0.0, fs-extra@^10.0.1:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
@@ -3202,11 +3187,6 @@ is-typed-array@^1.1.3:
   dependencies:
     which-typed-array "^1.1.14"
 
-is-typedarray@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
-
 is-weakmap@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
@@ -4023,7 +4003,7 @@ react@^18.3.1:
   dependencies:
     loose-envify "^1.1.0"
 
-readable-stream@^2.0.0, readable-stream@^2.3.8:
+readable-stream@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
   integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@@ -4546,13 +4526,6 @@ tweetnacl@^1.0.3:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596"
   integrity sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==
 
-typedarray-to-buffer@^3.0.4:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
 typeforce@^1.11.5:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/typeforce/-/typeforce-1.18.0.tgz#d7416a2c5845e085034d70fcc5b6cc4a90edbfdc"