feat: add warnings about the public and permanent nature of w3up uplo…

…ads (#502) we'll probably want to rework this in the future, but I think this probably looks good enough for now: <img width="1223" alt="Screenshot 2023-04-07 at 1 47 15 PM" src="https://user-images.githubusercontent.com/1113/230676964-186cb768-c7a6-4fe2-8e92-b8e153e57418.png"> <img width="369" alt="Screenshot 2023-04-07 at 1 47 29 PM" src="https://user-images.githubusercontent.com/1113/230676965-589803a8-9fde-4505-8d92-5273aaa3ad83.png"> resolves #464
storacha · Apr 10, 2023 · 6cc58f8 · 6cc58f8
1 parent adac99c
commit 6cc58f8
Showing 1 changed file with 28 additions and 9 deletions.
diff --git a/examples/react/w3console/src/components/Uploader.tsx b/examples/react/w3console/src/components/Uploader.tsx
@@ -72,15 +72,34 @@ const UploaderForm = (): JSX.Element => {
   const [{ status, file }] = useUploaderComponent()
   const hasFile = file !== undefined
   return (
-    <UploaderCore.Form>
-      <div className={`relative h-52 p-8 rounded-md bg-white/5 hover:bg-white/10 border-2 border-dashed border-gray-600 flex flex-col justify-center items-center`}>
-        {hasFile ? '' : <span className='mb-5'><CloudArrowUpIcon className='w-8 h-8 text-gray-600'/></span>}
-        <label className={`${hasFile ? 'hidden' : 'block h-px w-px overflow-hidden absolute whitespace-nowrap'}`}>File:</label>
-        <UploaderCore.Input className={`${hasFile ? 'hidden' : 'block absolute inset-0 cursor-pointer w-full opacity-0'}`} />
-        <UploaderContents />
-        {hasFile ? '' : <span>Drag files or Click to Browse</span>}
+    <>
+      <UploaderCore.Form>
+        <div className={`relative h-52 p-8 rounded-md bg-white/5 hover:bg-white/10 border-2 border-dashed border-gray-600 flex flex-col justify-center items-center text-center`}>
+          {hasFile ? '' : <span className='mb-5'><CloudArrowUpIcon className='w-8 h-8 text-gray-600' /></span>}
+          <label className={`${hasFile ? 'hidden' : 'block h-px w-px overflow-hidden absolute whitespace-nowrap'}`}>File:</label>
+          <UploaderCore.Input className={`${hasFile ? 'hidden' : 'block absolute inset-0 cursor-pointer w-full opacity-0'}`} />
+          <UploaderContents />
+          {hasFile ? '' : <span>Drag files or Click to Browse</span>}
+        </div>
+      </UploaderCore.Form>
+      <div className='flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 mt-4 text-center lg:text-left'>
+        <div className=''>
+          <h4 className='text-sm mb-2'>🌎&nbsp;&nbsp;Public Data</h4>
+          <p className='text-xs'>
+            All data uploaded to w3up is available to anyone who requests it using the correct CID.
+            Do not store any private or sensitive information in an unencrypted form using w3up.
+          </p>
+        </div>
+        <div className=''>
+          <h4 className='text-sm mb-2'>♾️&nbsp;&nbsp;Permanent Data</h4>
+          <p className='text-xs'>
+            Removing files from w3up will remove them from the file listing for your account, but that
+            doesn’t prevent nodes on the decentralized storage network from retaining copies of the data
+            indefinitely. Do not use w3up for data that may need to be permanently deleted in the future.
+          </p>
+        </div>
       </div>
-    </UploaderCore.Form>
+    </>
   )
 }
 
@@ -132,7 +151,7 @@ const UploaderContents = (): JSX.Element => {
             </button>
           </div>
         </>
-        )
+      )
       : <></>
   } else {
     return (