chimoney / offline-pay-with-crypto Goto Github PK

We want to enable users to Send Celo, cUSD, and other Crypto Payments without needing to have Crypto or know what crypto is.

We also want to enable people to use this Widget to start Offline p2p Businesses

Some use cases:

• A Chinese firm can accept crypto from a Farmer in Kenya by sending a Payment request to a Kenyan agent that the former recommends. Agent processes the Crypto payment which goes directly to the Chinese and the Farmer pays the agent with Mobile Money. This simplifies the manual back and forth as the link includes address, amount, and other metadata that the Chinese can use to track payment
• A Nigerian student can resell Crypto to their classmate, the classmate confirms how much they will pay in fiat from a payment link preview and then gives the p2p student agent cash and gets Celo in return

How this is enabled

To share a Payment request link with an Agent

• Create request as normal
• Payment page, enter Agent name and your name
• Click send and the Agent receives an email with payment details

Could you fix all styling and responsiveness issues? Highly recommend using a framework like material UI that gives you a base style.

Currently, there are lots of issues with responsively, positioning, layout etc.

Please, also test across multiple screens before opening a PR.

See some quick issues below:

Again, use a framework or base style instead of trying to style this frame scratch

• Wallet address form should be valid and responsive
• Also, if params are passed in the URL, fill the form with params and redirect to checkout
• Confirm that you can scan the generated QR code with the Valora app or any app that supports celo
• You could alternatively download the QR code and use https://celowallet.app/

With this Screen, users are able to initiate a payment and then have another person, an Agent, fulfill it.

Useful for situations where someone wants to pay with crypto or send crypto but does not have Crypto but then gives fiat to another person to fulfill said payment based on an offline rate

Also, could serve as an opportunity for anyone to start a non-custodial fully-decentralized crypto trading business without any 3rd party.

The Screen component should accept options/ptops for the following:

• Currency | Address array [{currency, address}]
• Amount to pay
• App/Company name

Currently, when I change the amount, the value is not synced to the crypto field values. Please either clear the fields or recalculate the amount to pay in CELO or cUSD

During request creation at https://offline-pay-with-crypto.onrender.com/, add a field for redirect URL. After payment, a user is redirected to the URL if set with some params

Params to send back:

• transaction hash
• currency
• amount

The current structure of the docs is repetitive and a bit confusing. Could we adopt a structure similar to the one below, please?

• Getting Started
  • Quick Start
  • What you can do with this (explain the different persona from the closed docs issue)
• Usage Guide
  • Merchant No-code Setup (this should include what they do at https://offline-pay-with-crypto.onrender.com/)
  • Web Developer Setup (Web devs can use Widget or React or other Lib)
  • Mobile Developer Setup (Mobile devs likely will use the popup widget)

Follows #4

Inspiration:

• https://commerce.coinbase.com/?lang=en or
• https://nearpay.co/

• Construct CELO transaction object
• Call the /celo/transaction/create endpoint from the backend
• Have the user sign the transaction
• Call the /celo/transaction/verfy endpoint from the Celo service

• Manually test the app
• Add unit tests
• Add e2e test using something like cypress

Implement a screen that can be embedded into any Website either by adding a <script> tag or importing the library

For this task, the modal will be empty.

Please, update the documentation to reflect the new changes to enable users to be able to integrate or use the project.

You might need to open issues as you run through them when testing out the project as the following users

Docs for User Personas

Developers

Devs want to integrate the app with their projects. Ideally, they should be able to generate the payment URL from the code.

Please, describe the required params and how they work so that any new dev can easily integrate

Merchants looking to Accept Celo

Merchants looking to accept Celo, cUSD or other supported currencies will need to be able to go to the payment request generation page.

Please, document the process of getting to that page potentially with screenshots

Users looking to send payments

When a user gets receives a payment link, please describe how they can pay from the various supported wallet

I have tested with https://celowallet.app/ and cUSD and Celo payments work. I have not tested with https://valoraapp.com/ app.

Payments should work with:

• https://valoraapp.com/
• https://celowallet.app/
• Metamask

Appropriate error messages should be returned.

Please, ask uchi for some test tokens as these are live payments. ideally, send payments between 2 wallets that you own

• Improve currency conversion by exploring a backend service.
• Fallback to allowing users to enter the rates manually for each supported token. I already enabled the input field so users are able to change the amounts even when we help them convert

• With the iframe, buttons leave the screen
• Please audit the UI and fix all issues.

• Lawal
• Bayo

• Use the latest options https://github.com/Chimoney/offline-pay-with-celo/blob/main/packages/offline-pay-with-crypto-widget/src/components/Modal/index.js#L39
• Include docs for the CDN import, @adebayoileri can help here

Description

base64-cryptocurrency-icons package contributes significantly to the application bundle size. the result is a large build size and slow to render app.

Steps to reproduce

• Run

yarn build

and

yarn analyze

Suggestion

• To reduce app bundle size, source an alternative Crypto Icon Provider

• Use material ui to set up the app
• Remove custom layout styles and use only Container, Grids for setting up layout, responsiveness etc

See https://mui.com/components/grid/

And example starters
https://github.com/mui-org/material-ui/tree/master/examples/create-react-app
and https://mui.com/getting-started/example-projects/

• If CELO is selected as the send option, set state to CELO
• Then use https://docs.celo.org/developer-guide/dappkit/usage to enable users to sign in to their wallet
• Then have them sign a transaction based on the input fields

Depends on #24

Resources:

• https://docs.celo.org/developer-guide/dappkit/usage
• https://web3js.readthedocs.io/en/v1.3.0/

• Implement the services architecture to support more than one token starting first with CELO and cUSD
• Implement the CELO Service to using method used at https://github.com/vercel/commerce/tree/main/framework for supporting more than one service

Currently Celo's use-contractkit enables all wallets. We want to be able to show only the wallets that work: Valora, Celo Web Wallet, Metamask and disable the others that we have not tested.

Extend the payment link generator to do:

• Data validation
• Include suggest exchange rates so that if someone first picks Celo, and then decides to add cUSD or another currency, we recommend the cUSD valud of the first Celo value

Think of the payment link generator as the merchant-facing experience but completely open-source and decentralized.

Also, if possible, validate the address or at least tell them to confirm it