Quickstart

You can get started in three easy steps:

1. Install the React Kit
2. Wrap your React components in the DawnProvider
3. Use useDawnPay to send payments

1. Install

Install the React Kit from NPM, using either yarn or npm:

yarn add @dawnpay/kit

npm install @dawnpay/kit

2. Wrap your components in the DawnProvider

All code that will make use of Dawn Kit React hooks needs to be wrapped in the DawnProvider.

Wrap your components like this:

import { DawnProvider } from "@dawnpay/kit"

export default function App() {

    return (
        <DawnProvider
            dappName="DAPP_NAME"
        >

            <Component {...props}></Component>
        </DawnProvider>
    )
}

The DawnProvider takes the following arguments:

• dappName: the unique name of your dapp

3. Use useDawnPay to send payments

That's it! Now you can use the React hook useDawnPay to trigger payments. See the example below.

import { useDawnPay } from "@dawnpay/kit"
import Button from "@mui/material/Button";

export default function App() {
    const { pay } = useDawnPay();

    const recipient = "0x64c4Bffb220818F0f2ee6DAe7A2F17D92b359c5d";
    const usdAmount = "10.5";

    const triggerPay = async () => {
        const { success, receipt, error } = await pay(recipient, usdAmount);

        if (success) {
            console.log("Transaction succeeded! Here's your receipt: ", receipt)
        }

        if (!success) {
            console.log("Transaction failed. Here's why: ", error)
        }
    };

    return (
        <div>
            <Button
                onClick={handlePayClick}
            >
                Pay using Dawn
            </Button>    
        </div>
    )

}

You can see that a recipient is passed to the the Dawn function pay - this is the address which you want to receive the payment.

There are use cases to be aware of:

1. Simple payments

The majority use case. Here you call pay() as above with both recipient and usdAmount defined:

const { success, receipt, error } = await pay(recipient, usdAmount);

The payment modal will be pre-populated with the amount you specify.

2. Tipping

There is a streamlined use for tipping. You call pay() as above but with just recipient (usdAmount is an optional parameter).

const { success, receipt, error } = await pay(recipient);

When called this way, the payment modal will allow the user to specify how much they want to tip with some suggestions.

---

Now when the user clicks the pay button, the modal will pop open and payment made!