opacity / webinterface Goto Github PK
View Code? Open in Web Editor NEWWeb interface that enables a user to upload, download, and manage files via the Opacity Protocol
License: Other
Web interface that enables a user to upload, download, and manage files via the Opacity Protocol
License: Other
The interface currently just shows a loading spinner, with no indication of progress. Streamable supports this, so that could be added for some extra UX points
Aha! Link: https://opacity.aha.io/features/OPQV1-32
DNS and hosting
Aha! Link: https://opacity.aha.io/features/OPQV1-26
Access to XMLHttpRequest at 'https://broker-1.opacitynodes.com:3000/api/v2/upload-sessions/b5e4fc0b-21da-44ef-8b01-2dfc99f5e068' from origin 'https://storage.opacity.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Aha! Link: https://opacity.aha.io/features/OPQV1-27
If I get the handle and leave the upload before it completes and start a new upload, it gets confused and thinks I'm on the first upload.
I made a 3rd upload and it's jumping progress bar back and forth as if polling both uploads
https://coss.io/c/trade?s=OPQ_BTC isn't working anymore, due to removing of the trading pair.
Should change to https://coss.io/c/trade?s=OPQ_ETH instead.
Add QR code to Send OPQ page like the Opacity Robot
They should use be using the Link
element from react-router-dom
which wraps an anchor tag with browser history navigation
Zeplin link has been posted in Slack and is pinned in the front end channel and development channel.
User should see list of paid options on main site and link to storage app setup.
Main site should be revised to include descriptions of new architecture.
Add roadmap to site.
The routing library we are using is no longer maintained: https://github.com/reactjs/react-router-redux
We should be switching to this: https://github.com/supasate/connected-react-router
I had a concern after some testing last week in the state handling of the sign up flow. It's impossible to leave the state at each step. So, for example, if I click next from step 1, I can't go back to look at the recovery words. If next from step 2, I can't go back from 3 to get my account handle. If I'm at payment step 3, I can't cancel and start over. After I've confirmed payment and login to account, I can't go back to sign up a new account again since it sends me to confirmation page. Some of this flow may be intended, but overall, it's too linear and inflexible. We need to revisit the UX a bit. (edited)
Aha! Link: https://opacity.aha.io/features/OPQV1-28
Wait for the response from a polling request before polling again
Nginx has an old server reference that needs to be deleted, named 'Storage'.
The syntax in the new version is different, we should stay up to date
At the moment the sorting works only for simple values.. we need extend it
You can not see the ETH address provided by the webpage.
Screenshot
Instead of injecting theme provider into every component, we should be creating an HOC method (https://reactjs.org/docs/higher-order-components.html) and just wrapping our components with it
Duplicate the build pipeline in the oyster/webinterface repo for this repo.
Opacity Website
Opacity Storage Portal
Opacity Blog
Opacity Twitter Page
Opacity Reddit
Opacity Telegram Channel
Opacity Trading Telegram Channel
Iโd also like to add some rotating text/illustration during file upload to keep people busy, like an in game loading screen transition. Hints/tips, interesting facts, idk, something...
Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at Module.decrypt (metadata.ts:10)
at MergeMapSubscriber.project (upload-epic.ts:105)
at MergeMapSubscriber../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
at MergeMapSubscriber../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
at MergeMapSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at FilterSubscriber../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
at FilterSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at Notification../node_modules/rxjs/_esm5/internal/Notification.js.Notification.observe (Notification.js:21)
at QueueAction../node_modules/rxjs/_esm5/internal/operators/observeOn.js.ObserveOnSubscriber.dispatch (observeOn.js:40)
at QueueAction../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:64)
at QueueAction../node_modules/rxjs/_esm5/internal/scheduler/QueueAction.js.QueueAction.execute (QueueAction.js:27)
at QueueScheduler../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:43)
at QueueAction../node_modules/rxjs/_esm5/internal/scheduler/QueueAction.js.QueueAction.schedule (QueueAction.js:21)
at QueueScheduler../node_modules/rxjs/_esm5/internal/Scheduler.js.Scheduler.schedule (Scheduler.js:13)
at QueueScheduler../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.schedule (AsyncScheduler.js:31)
at ObserveOnSubscriber../node_modules/rxjs/_esm5/internal/operators/observeOn.js.ObserveOnSubscriber.scheduleMessage (observeOn.js:45)
at ObserveOnSubscriber../node_modules/rxjs/_esm5/internal/operators/observeOn.js.ObserveOnSubscriber._next (observeOn.js:48)
at ObserveOnSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at MergeMapSubscriber../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
at InnerSubscriber../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
at InnerSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at MergeMapSubscriber../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
at InnerSubscriber../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
at InnerSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at MergeMapSubscriber../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
at InnerSubscriber../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
at InnerSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at Upload. (upload-epic.ts:70)
at Upload.emit (events.js:146)
at index.js:963
at Generator.next ()
at asyncGeneratorStep (index.js:11)
at _next (index.js:33)
at index.js:40
at new Promise ()
at index.js:29
at Upload.finishUpload (index.js:968)
at UploadStream.emit (events.js:151)
at finishMaybe (_stream_writable.js:620)
at UploadStream.finalCallback (_stream_writable.js:595)
at UploadStream._afterUpload (index.js:815)
at index.js:796
Aha! Link: https://opacity.aha.io/features/OPQV1-22
Aha! Link: https://opacity.aha.io/features/OPQV1-31
If a user leaves the page while their file is still uploading to the brokers and tangle attachment has not yet begun, their upload will not succeed and they will not get their money back.
Make it difficult for them to leave the page accidentally during the upload process by having some kind of "Are you sure?" popup. If they want to abandon their upload and lose their money, they must consciously click "yes" or "ok".
Make people check a box that says something like "I have read the terms and conditions and/or privacy policy" (with a link to those conditions that the user can read) before they can upload. Disable upload button if they haven't checked the box.
For this issue we will have to do a little bit of research to figure out what all should be in the terms and conditions and/or privacy policy. One of the terms (the first one) should be something like "By using this website I agree to all the terms and conditions" and another should be "I will not upload anything illegal or copyrighted".
We should contain all the CSS using styled-components. The CSS file should almost be empty.
This is a refactor to pay off tech debt we accumulated during the launch last year.
Aha! Link: https://opacity.aha.io/features/OPQV1-29
Cypress will be disabled until the tests are updated (as of #60 assuming it merges). The tests should be updated to ensure that the interface builds and runs as expected
Aha! Link: https://opacity.aha.io/features/OPQV1-30
If the user has created an account but has not yet paid and subsequently tries to do an upload, the backend will send back a response that is exactly the same as the create account response. It'll look like this:
{
"expirationDate": "2020-03-20T19:50:10.109358022Z",
"invoice": {
"cost": 1.56,
"ethAddress": "someEthAddress"
}
}
If we get a response like this while trying to do an upload, just redirect them back to the invoice screen.
We may wish to show some kind of error as well, but it would be nice for them to still be shown the ethAddress and cost, in case they created an account earlier but forgot to pay or something, or they closed their browser, or their power went out, etc.
Vulnerabilities:
handlebars
(dependency of jest
)Deprecated/outdated:
redux@^3.7.2
must be 4
react-redux@^5.1.1
must be 6
react-router-redux
Missing:
[email protected]
requires a peer of eslint@^4.1.1
[email protected]
requires a peer of eslint-plugin-import@>=2.13.0
[email protected]
requires a peer of [email protected] - 4.x
[email protected]
requires a peer of eslint@^2.10.2 || ^3 || ^4
[email protected]
requires a peer of eslint@^3.0.0 || ^4.0.0
[email protected]
requires a peer of webpack@^3.1.0
[email protected]
requires a peer of webpack@^1 || ^2 || ^2.1.0-beta || ^2.2.0-beta || ^3
[email protected]
requires a peer of jest@>=22 <24
@types/react-router
@types/react-router-dom
Incorrect:
babel-jest
(set as both dev and regular dependency)Extra:
preact
lodash
(?)postcss
(?)react-showdown
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.