ethersphere / gateway-ui

Swarm Gateway website

Bee Gateway

Swarm Gateway website.

Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.

This project is intended to be used with Bee version 1.5.0-dda5606e. Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the official Discord and by keeping an eye on the releases tab.

Table of Contents

• Development
• Contribute
• Maintainers
• License

Development

git clone [email protected]:ethersphere/gateway.git

cd  gateway

npm start

The Gateway runs in development mode on http://localhost:3030/.

:warn: Don't forget to provide postage stamp via environment variable or edit directly the postageStamp constant in .src/constants.ts..

Environment variables

• REACT_APP_BEE_HOSTS - comma separated bee API URLs through which the gateway uploads and downloads. The api to upload is selected at random while on download the gateway checks all the hosts (defaults to [http://localhost:1633])
• REACT_APP_BZZ_LINK_DOMAIN - specifies what domain of Bzz Link should be used (defaults to bzz.link)
• REACT_APP_POSTAGE_STAMP - Postage stamp batch ID to be used for uploading (defaults to 00000...00000
• REACT_APP_GATEWAY_URL - URL on which the gateway is hosted (defaults to current window location)
• REACT_APP_DIRECT_DOWNLOAD_URL - URL for a direct download of asset, used for redirecting ENS requests (defaults to https://api.gateway.ethswarm.org/bzz/)

Contribute

There are some ways you can make this module better:

• Consult our open issues and take on one of them
• Help our tests reach 100% coverage!
• Join us in our Discord chat in the #develop-on-swarm channel if you have questions or want to give feedback

Maintainers

• vojtechsimetka
• Cafe137

See what "Maintainer" means here.

License

BSD-3-Clause

gateway-ui's Issues

link generation & share: share link

• social media -> pre-filled tweet/FB post
• email
  • mailto link with subject and body
  • from the gateway server
• add message/description

upload: drag and drop to upload

Rewrite postage stamps on ngingx

Alel files will be uploaded with postage stamp 0000...0000. This is in a header swarm-postage-batch-id and should be swapped for a real postage stamp on the nginx.

Missing logo on homepage

On the gateway/share the link should be add file not upload

missing units for size in file preview

Change loading indicator to white when uploading

Orange highlight in tab nav is wider than the button

download: info page before downloading

• minimum is a blank page with a download button
• display metadata about the content to be downloaded
  • size?
  • filename?
  • file type?
  • custom message/note by uploader?
  • could be just in the URL itself?

missing auto-select + copy (with tooltip feedback) when placing cursor in link or hash field on the share page

pressing enter in Access textfield should submit

icons in round buttons have slight transparency

Issues with text styles on top and bottom of pages

upload: single file

error handling

• upload fail
• download fail (link expired)
• technical handling (endpoint returns 4xx/5xx) and other errors
• UX explaining to users why this happened and what can that mean

Add HTML metadata so that gateway link is displayed nicely

feedback on wrong input for drag and drop file overlay

Right now we only support single file upload. We should detect if user is dragging and dropping single file and if that is the case, display error while they are dragging with explanation.

link generation & share: copy reference and URL to clipboard

upload: switch/remove file to be uploaded

branding and marketing

• link to Swarm site
• logo
• animated illustrations (help explain how the network works)

Use Kind instead of MIME Type in file preview

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

upload: add more files into existing link

Icons on main button should be orange

Layout is too wide on desktop

should be 546pt mx — see Zeplin

Padding on desktop should be 64

upload: network metrics and user education

• time to upload to the node (progress bar)
• time to being distributed to the network
• animation about uploading and distributing to the network (estimated)

missing image preview while accessing a file

link generation & share: rename/customize link

• ENS
• unstoppable domains

link generation & share: save link to uploaded file(s)

• email the link (e.g. to myself)
• info to remind me to save the link

Add privacy preserving analytics link

remove hover state on uploading / done "buttons"

after I click these buttons should be somehow "inactive", clicking on them does nothing, they act as a visual confirmation

note should be displayed at the bottom (above the button)

Missing "copied" feedback after clicking copy button

Browser alerts ?

Inform the user when trying to leave/close a tab when upload is not done or if I didn't copy the link, etc.

Text field style is incorrect

link generation & share: QR code

Generate QR code that points to the gateway + content hash.

Additional feature: show QR code fullscreen (for QR code for instance on mobile)

gateway on iOS is not fullscreen

There is a lot of solutions how this can be fixed e.g. https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ (does not work)

upload: add JSON metadata into manifest

link generation & share: needed text info

• privacy settings of the link -> nothing is private
• explain the need to save the link

After uploading a file we should stick to the done page

After the uploading is done, now it jumps directly to the share page, that's a bit too fast/confusing IMO. I don't have time to see the confirmation that the upload is done. I would like to stick to the preview page with the green done button at the bottom, Only after tapping done I would go to share

upload: list information about uploaded file(s)

mobile features

• accessing camera
• handling downloading/saving and uploading of files

Backend script to swap postage stamps

Because there is no top up, we need to periodically remove unusable postage stamps and add new ones.

1. get list of active postage stamps
2. check which are usable
3. if non (or not enough) are usable, buy new postage stamp(s)
4. write the usable and new postage stamps somehow to nginx

add progress on upload

Right now it is indeterminate action. How much has been uploaded to the gateway can be measured and therefore we should use progressbar.

upload: text information

• what kind of files can be uploaded, examples?
• explain limitations (file size, per IP, ...)
• clarify the “no warranties”
  • we can’t say how long the content will be available
  • we can’t guarantee that the link will work
  • can’t undo (remove content)

link generation & share: shorten download link

Maybe we can use external service like tiny.cc or bit.ly? (don’t want to have this due to privacy implications)

I should be able to always drag and drop files

it would make it much more user friendly, if I could just drag and drop file no matter where I am and I could upload.

i18n Support

As this tool is targeting broad audience, we should include internationalization / translations in the app sooner rather than later.

upload: folders

missing icon in the drag and drop overlay