svub / nimiq-popup-shop Goto Github PK

Subscribe to incoming transactions to the shop's address

• Shop Object (base class for shop)
• Shop Component (web component using shop object)

Parameters

• shop address
• shop name
• logo
• shop ID
• public key

Actions:

• can make purchase
  • collect metadata (simple callback? how to configure for shop owner?)
  • trigger Nimiq checkout
  • send metadata to storage #4 (with shop ID)

Assumptions for v1:

• No cart, just one product can be bought at a time
• can do checkout first and then store meta data - assuming nothing can go wrong storing the meta data

• Add to cart
  • Needs methods like addToCart(product), checkoutCart(), getCart():Product[] or getCart():Cart, ...
  • Enable to buy items right away or to put them in a cart - should be configured on the checkout-button.
• A new component is needed to open the cart
• Cart visualization:
  • Either implemented by shop owner by using JS only, or
  • When using the web components: a fully designed drop in cart, maybe as an overlay?

UI Designs are needed for this task!

• Dummy storage via localStorage
• IPFS

Parameters

• mode - production or development/testing switching online or local storage
• shop ID

Actions:

• store order for this shop
• get all orders of this shop

Assumptions:

• encryption is optional for a first prototype

IPFS will update the hash format from v0 to v1 - v1 is longer - so the code needs to be updated to

• request v1 hashes + use highest possible base encoding
• make sure it still fits in the 60 characters available for a TX's meta data field.

instead of Webpack for bundling.

An user should be a able to style <nimiq-checkout-button> using own CSS styles.

Used by storage #4.

Parameters

• private key - provided by shop backend
• public key - a parameter of the shop #3

Actions:

• encrypt order (needs public key)
• decrypt order (needs private key)

Assumptions:

• Ideally using web crypto to minimize external deps
• performance irrelevant

Nimiq Hub can take as parameter a promise, so, it's possible to push the order to IPFS and instead of waiting, calling the Hub directly with a Promise that resolves when IPFS returns the file hash. This way, Nimiq Checkout can start syncing while we wait for the hash from IPFS.

Besides being nice enhancement, if IPFS takes long, the browser will refuse to open the window (300ms limit for user interaction handlers!) - so this fix will avoid such an edge case by opening the window right away.

After pushing to IPFS, confirm the data is available by using one or more other gateways, e.g. https://cloudflare-ipfs.com/ipfs/<CID>.

Parameters for

• label
• price
• product name

Actions:

• trigger order process on shop #3

Assumptions for v1:

• Fixed style/CSS
• just one "global" shop object
• product name == product ID

Nice to have:

• optional product ID parameter

Guess using web components would be a good idea here.

Needed:

• Show aspects of order
  • Products, sum of products' prices, metadata, and maybe timestamp
  • Order status
• Mark as done - maybe more states? + update order state in local cache

• Load orders
• Show orders
• Validate payment TX
• Maybe: mark orders as done

Parameters:

• shop ID
• private key - provided by user

Actions:

• Update: get all orders from storage
  • sync with existing orders (stored in localStorage)
  • all orders show as list (with details and meta data)

Nice to have:

• highlight orders that just came in during the update
• add a "Done" button for the shop owner to keep track
• optionally store private key in localStorage of shop owner

Actions:

• Support shop owner in setting up shop
  • Create new key pair using encryption #5
  • Enter shop parameters, see #3
  • generate HTML code for shop owner to add shop and button

Assumption:

• Keep it minimal, maybe a textarea with JSON is good enough, whatever is quick to build.

When checkout

• was successful onSuccess
• was cancelled by user onCancel
• had an error onError

Create a web worker in the shop backend #7 or during setup #6 that will in regular intervals (24h?) get orders from the storage #4 and show a push notification if there are new ones.

The backend (the files from /backend/) should be available via GitHub Pages that that people can set up the shop without having to pull the code and run it locally.

Could the webpack be set up to automatically build the latest version of backend into, for example, docs/backend? (that way it would be deployed to GitHub Pages)

Right now the JS file is impressive 5MB big - still 1.3MB GZipped. Most of it AFAIK IPFS.
It's half size with minification, but that currently breaks IPFS.

Need to find a solution.

Could be:

• Code splitting: at least in the frontend, the heavy IPFS could be loaded later w/t a problem
• Repace the IPFS implementation:
  • Use the official client lib, i.e. don't start a node in the browser, just use an HTTP gateway
  • Try IPFS lite - neither official nor the full functional range but should be enough for storing and getting files