Keyrxng's Web3 Payment Portal

Stacks Used:

Installation

What to change:

/.env.example => /.env
Input appropriate keys

/Payments/payments
const Pay = () => {...
... accept: [] <---- enter your own address and your accepted token addresses

/Payments/Onramp
const allowedTokens = {} <---- enter your own accepted tokens using the token symbol

How to run:

yarn install
yarn start

TODOs

# 0. Handling payment tracking via onramper

# 1. Handling transaction response from Depay

# 3. Handle donations info display i.e total to date, biggest donation, repeat donators

# 4. Include a more comprehensive list of available donation routes

# 5. Tutorialize things more for non web3 educated visitors i.e detect metamask, offer install if not, be more granular with 'How to use:' component and display it more effectively

Limitations

# 1. Onramper allows the purchasing of any token with a liquidity pair while Depay is has preset tokens

# 2. Spoofing the Onramper api is possible for purchase response but without a depay having testnet access it's harder to spoof the blockchain response

Tidbit

This was a pet project to learn some typescript as well as build a small scale contained dApp which if you ask me I've succeeded on one half while the typescipt written is a disaster but it's a work in progress.