Giter Club home page Giter Club logo

crypto-storefront's Introduction

Crypto Store

Crypto focused e-commerce Full stack application built with unchaiend engine 1.0 as a backend and unchained crypto pay gateway for processing transaction/orders on the ethereum blockchain.

Getting Started

You need to have docker compose installed on your machine, so if you have not already go to official docker compose website and install it for your platform.

Next you must set few required environment values to fire up your store. go to the root director and create a .env file and provide this values. There are additional environment you can set to change the default value and all of them are listed in the advanced configuration section.

.env

CRYPTOPAY_ETH_XPUB=
UNCHAINED_SEED_PASSWORD= (optional)(recommended)
UNCHAINED_ERC20_TOKEN_SYMBOL= (optional)
UNCHAINED_ERC20_TOKEN_CONTRACT_ADDRESS= (optional)

Definition

  • CRYPTOPAY_ETH_XPUB - The extended ethereum address of the account recieving payments in the store. the gateway will process every block in the blockchain for transactions to this account. because we are mainly targeting ethereum block chain this field is required to get up and running. However you can also provide CRYPTOPAY_BTC_XPUB value if you are accepting Bitcoin (BTC) as a payment too.

  • UNCHAINED_SEED_PASSWORD this is the initial password the admin account will be set to, default value is set to password.

  • UNCHAINED_ERC20_TOKEN_CONTRACT_ADDRESS - Holds the address of an ERC20 token. if the store accepts a particular token for payment for example SHIB you set its address using to this variable. it's optional and you can set it anytime even after the store is deployed through the admin panel.

currently there is support for only one token but accepting multiple token for payment is possible and will be included in future releases

  • UNCHAINED_ERC20_TOKEN_SYMBOL - Code of the ERC20 token you are accepting payment with.

After setting the required env above the final thing remaining is starting up the. To do that go to the root director and run

docker-compose up

Thats it, you store is ready. you can access your store by navigating to the following pages in the browser

DEFAULT credentials

username: [email protected]
password: whatever value set to UNCHAINED_SEED_PASSWORD by default its 'password'

Advanced Configuration

Below are list of variables available to configure to gain more control of the store

Variable Description Required Default
CRYPTOPAY_ETH_XPUB Extended public key of a Ethereum address that will recieve payment made in store YES None
UNCHAINED_ERC20_TOKEN_CONTRACT_ADDRESS Contract address a ERC20 token you are accepting payment with in store NO NONE
UNCHAINED_ERC20_TOKEN_SYMBOL Symbol/Code of the ERC20 you are accepting payment with. must relate to the contract specified by UNCHAINED_ERC20_TOKEN_CONTRACT_ADDRESS NO NODE
ETH_RPC_ENDPOINT Synchronized ethereum node where unchained crypto pay listens to any transaction/order made in store NO http://127.0.0.1:8545
BCOIN_API_KEY private API key of Bcoin NO None
CRYPTOPAY_BTC_XPUB Extended public key of a Bitcoin address that will recieve payment made in store NO None
CRYPTOPAY_SECRET hashing string used by the unchained cryptopay gateway and Unchained engine. even though it's not required, we highly recommend you change this value to have a secure connection NO secret
BCOIN_ENDPOINT Bcoin api URL NO http://127.0.0.1:18332
BCOIN_WALLET_ENDPOINT Bcoin wallet endpoint NO http://127.0.0.1:18334
CRYPTOPAY_WEBHOOK_PATH Used for communication between the engine and gateway when a transaction occurs. Usually not necessary to configure but in the case you have an unchained engine instance running elsewhere you can change this value accordingly NO /payment/cryptopay
UNCHAINED_CRYPTOPAY_WEBHOOK_PATH Used for communication between the engine and gateway when a transaction occurs. Usually not necessary to configure but in the case you have an unchained engine instance running elsewhere with different CRYPTOPAY_WEBHOOK_PATH you can change this value accordingly NO http://127.0.0.1:4010/payment/cryptopay
CRYPTOPAY_PRICING_WEBHOOK_PATH Used for communication between the engine and gateway to get a live feed of currencies rate in order to do accurate conversion for order prices. Usually not necessary to configure but in the case you have an unchained engine instance running elsewhere you can change this value accordingly NO /pricing/cryptopay
UNCHAINED_CRYPTOPAY_PRICING_WEBHOOK_PATH Used for communication between the engine and gateway to get a live feed of currencies rate in order to do accurate conversion for order prices. Usually not necessary to configure but in the case you have an unchained engine instance running elsewhere with a different value set to CRYPTOPAY_PRICING_WEBHOOK_PATH you can change this value accordingly NO http://127.0.0.1:4010/pricing/cryptopay
UNCHAINED_GRAPHQL_ENDPOINT Where the actual engine runs and used by the storefront & gateway. Usually not necessary to configure but in the case you have an unchained engine instance running elsewhere you can change this value accordingly NO http://127.0.0.1:4010/graphql
REDIS_PORT Redis is used to store relevant block related data. and this refers to the port in which a running redis instance exposes. NO 6379
REDIS_HOST Redis is used to store relevant block related data. and this refers to the url in which a running redis instance running. NO 127.0.0.1
MONGO_URL Storage of the store actual data. if you want to use a different database than what is provided by default. NO mongodb://my-mongoDB
ROOT_URL Endpoint for the Admin panel. NO http://localhost:4010
EMAIL_WEBSITE_NAME Used when generating an email for various resons like order confirmation, password reset, user enrollment etc... NO Unchained
EMAIL_WEBSITE_URL Used when generating an email for various resons like order confirmation, password reset, user enrollment etc... NO http://localhost:4010
UNCHAINED_SEED_PASSWORD Initial password for the admin panel. it's not required but we highly recommend you change it as soon as you open your app for the first time. NO password
GETH_NETWORK_ID Ethereum network you want to list transactions on. Default set to Goerli. NO 5 (goerli)

crypto-storefront's People

Contributors

joelmeiller avatar mikearaya avatar opencorech avatar pozylon avatar rdttkab avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

crypto-storefront's Issues

Fix Checkout Flow UX

Bildschirmfoto 2022-08-24 um 20 47 25

  1. Remove "vat included 7.7%" on the right
  2. "Sign Up" tab and "Register" button is wrong naming (it's a guest checkout) because it's only a sign up if you click the bottom box "create account"
  3. Login tab is active by default but the guest checkout should be active by default
  4. It should not be possible to "Confirm order" when billing information is not provided (the guest form) but currently cou can confirm the order without providing e-mail or address

Checkout Flow

Case 1: Metamask

On Cart, display Pay With Metamask, if clicked, show full screen backdrop, "waiting for metamask", after confirmation, show message: "your order is submitted, awaiting block confirmations". Auto refreshes and finds out when block is confirmed, then redirects to thank you page with payment done.

If rejected on metamask, keep cart a cart, show message "payment cancelled".

Case 2: QR Code

In the case of qr code payment, only show the QR code after "confirm order". The whole order fullfillment will be asynchronous because we don't know how and when the transactions gets confirmed and how long it can take on which blockchain.

Changes:

  1. Do not show QR Code on checkout review page
  2. Do not show Metamask button on thank you page, paying with QR code requires an order confirmation before
  3. "Lock the screen" when paying with metmask (see Case 1)

Can't make it process the payment

I've used:

CRYPTOPAY_ETH_XPUB=xpub6DCkxV3yvvk8eGye7t11DZ3vpWkJLxfqCiGdB6jieHXHDyzvZTVXG632jcoEPCw6NCPw2GqghAGjmqeXGnLEQEbGTAZSN8neBh3SAyVn5k9

Sign created the following public address:
0xF5F72AE7fa1fa990ebaF163208Ed7aD6a3f42DEA

And payment in goerli has been completed:
https://goerli.etherscan.io/tx/0x56b34400ff6d9c6c8de9bd2251d27cb415027d7e80b3eed803e91c0e3585eea2

log output crypto gateway:

Started processing block...
Started processing block...ode at  http://127.0.0.1:8555  successfully
Processing block from  None  to  6952992
Processing block from  b'6952992'  to  7187040
Processing

log output go etc client:
INFO [08-16|07:30:20.846] Imported new block headers count=1664 elapsed=146.922ms number=7,382,688 hash=ae7771..8e3483 age=5d6h17m
INFO [08-16|07:30:23.750] Imported new block headers count=132 elapsed=14.556ms number=7,382,820 hash=deabd6..1d6e2f age=5d5h44m
INFO [08-16|07:30:23.751] Imported new block headers count=2 elapsed="467.084ยตs" number=7,382,822 hash=7e4bde..1bc4b7 age=5d5h44m
INFO [08-16|07:30:24.571] Looking for peers peercount=1 tried=1 static=0
INFO [08-16|07:30:37.560] Looking for peers peercount=1 tried=1 static=0
INFO [08-16|07:30:48.554] Looking for peers peercount=1 tried=1 static=0
INFO [08-16|07:31:00.700] Looking for peers peercount=1 tried=1 static=0

Somehow it stopped importing new block headers at block 7382822

Price display and appropriate unit for ETH

When setting the ETH price on the product to 1, the price of the product is displayed like this:

  • Product overview: 1 ETH
  • Product detail page: 0.01 ETH
  • Cart: 0.01 ETH
  • Pay with Metamask: 1 ETH

Make sure that you re-use the same component to display a price in all components and change it in a way that the system treats ETH prices in an appropriate small unit, I select like this because we don't have BigInt support yet:

JS safe integer max: 9'007'199'254'740'991
Max cart price to represent: 1'000'000'000 USD equivalent
Currently translates to 872513 ETH

Bildschirmfoto 2022-07-11 um 11 51 47

  • 872'513'000'000 Szabo -> lower than Number.MAX_SAFE_INTEGER
  • 872'513'000'000'000 GWEI -> lower than Number.MAX_SAFE_INTEGER
  • 872'513'000'000'000'000 MWEI -> higher than Number.MAX_SAFE_INTEGER

-> thus i'd recommend to treat the ETH price as GWEI, so if I wanted to represent 1 ETH in the admin ui, i need to enter 1000000000

Draft Concept: Completely Re-Implement Cryptopay Plugin

The Unchained plugin is not working well and there is conceptual problems with it so I'm going to re-implement it:

  1. Webhooks delivering transactions should write into a DB collection that resembles the balances of each public key
  2. Webhooks delivering prices should just update a currency conversion table used for conversions in pricing calculation
  3. Webhooks should basically just try to checkout an order or process payment, the plugin should retrieve the transactional data from the db and only accept what is coming from there
  4. Flag transactions used when accepting a payment based on balance in wallet (no replay)

Refresh on Order View crash

http://localhost:3000/thank-you?orderId=c15036380b68bdee4803efc9
-> refresh -> crash

[Error] Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
	cu (framework-5f4595e5518b5600.js:1:82747)
	(anonyme Funktion) (framework-5f4595e5518b5600.js:1:85186)
	ha (framework-5f4595e5518b5600.js:1:48717)
	gu (framework-5f4595e5518b5600.js:1:86437)
	Ri (framework-5f4595e5518b5600.js:1:103117)
	Ri
	(anonyme Funktion) (framework-5f4595e5518b5600.js:1:129338)
	Oi (framework-5f4595e5518b5600.js:1:99852)
	bi (framework-5f4595e5518b5600.js:1:95938)
	bi
	(anonyme Funktion) (framework-5f4595e5518b5600.js:1:45206)
	(anonyme Funktion) (framework-5f4595e5518b5600.js:1:129338)
	Yl (framework-5f4595e5518b5600.js:1:45152)
	Kl (framework-5f4595e5518b5600.js:1:45087)
	hi (framework-5f4595e5518b5600.js:1:93090)
	es (framework-5f4595e5518b5600.js:1:109200)
	os (framework-5f4595e5518b5600.js:1:110216)
	(anonyme Funktion) (main-51819558574a1023.js:1:16850)
	fe (main-51819558574a1023.js:1:16856)
	l (main-51819558574a1023.js:1:97560)
	(anonyme Funktion) (main-51819558574a1023.js:1:97345)
	M (main-51819558574a1023.js:1:6560)
	i (main-51819558574a1023.js:1:6764)
	(anonyme Funktion) (main-51819558574a1023.js:1:6823)
	Promise
	(anonyme Funktion) (main-51819558574a1023.js:1:6714)
	(anonyme Funktion) (main-51819558574a1023.js:1:66188)
	l (main-51819558574a1023.js:1:97560)
	(anonyme Funktion) (main-51819558574a1023.js:1:97345)
	i (main-51819558574a1023.js:1:51566)
	u (main-51819558574a1023.js:1:51770)
	promiseReactionJob

Bug: Currency Code chaos

  • I added a product with a CHF 500 price. The checkout with metmask button wants me to pay 500 Goerlieth which is obviously wrong: When it's not possible to convert a price in X FIAT to Y ETH, it should not be possible to checkout
  • Even though when I switch from CHF to ETH, the cart shows the prices in CHF, after refresh, the selection is gone.

Please remove the "global" currency switcher on the top right completely and all code associated with it, it's a non standard non best-practice way allowing somebody to change the currency in a webshop (nobody wants that except weng ๐Ÿ˜‚).

For the demo case focus first on these pure-crypto cases:

    1. The only currency that is active is ETH. Products have an amount set in ETH.
    1. The only currency that is set is a ERC20 Token. Products have an amount set in ERC20 Token and when I fire up Metamask it should allow me to directly pay with tokens instead of ETH.

Let's skip the price conversion for now and do that after we have settled everything else.

Currency selection

Bildschirmfoto 2022-08-26 um 15 12 51

Do not show the select at all if i can't change it to another value and don't (obviously show the options double).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.