`offline-pay-with-crypto-widget`

TODO: description

Usage

Wrap the root of your application with the ModalProvider provided by @chimoney/offline-pay-with-crypto-widget

import { ModalProvider } from '@chimoney/offline-pay-with-crypto-widget';

ReactDOM.render(
  <React.StrictMode>
  <ModalProvider>
    <App />
    <ModalProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

To make use of the components

import { ModalOverlay, Modal, ModalContainer, useModal } from '@chimoney/offline-pay-with-crypto-widget';

export default function DemoModal() {
    const { isOpen, toggleModal } = useModal();

    const config = {
    name: 'Chimoney app',
    store_img:
      'https://lh3.googleusercontent.com/-crMj-_7sKco/AAAAAAAAAAI/AAAAAAAAAAA/8wRiFKrmpe8/s88-p-k-no-ns-nd/photo.jpg',

    paymentDescription: 'Send a payment to chimoney.io',
    supportedCurrencies: {
      'CELO': {
        code: 'CELO',
        walletAddress: '0x3........', // change to celo wallet address here
        amount: 1,
      },
      'CUSD': {
        code: 'cUSD',
        walletAddress: '0x3........',
        amount: 1,
      },
    },
  }
    return (
        <>
            <button onClick={toggleModal}>Open Modal</button>
            <ModalContainer>
                {
                    isOpen &&
                    <ModalOverlay onClick={toggleModal}>
                        <Modal {...config} />
                    </ModalOverlay>
                }
            </ModalContainer>
        </>
    )
}

Local Development

Link peer-dependencies packages

<!-- link react from the landing page project -->

npm link ../offline-pay-with-crypto-landing-page/node_modules/react

<!-- link react-dom -->
npm link ../offline-pay-with-crypto-landing-page/node_modules/react-dom

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!