MerSui

Simple "Buy Me a Coffee" React button with payments in SUI.
No intermediaries, you receive donations directly to your Sui address.

Demo

mersui.xyz

Installation

pnpm add mersui || yarn add mersui || npm install mersui

Usage

First of all, wrap your main app component into the MerSuiProvider component.

import { MerSuiProvider } from "mersui";

function App() {
  return (
    <MerSuiProvider>
      <YourApp />
    </MerSuiProvider>
  );
}

Then, use the MerSuiWidget component to render the button.

import { MerSuiWidget } from "mersui";

function App() {
  return (
    <div>
      <MerSuiWidget recipientAddress="0x..." />
    </div>
  );
}

Enjoy!

Props

| Prop | Type | Default | Description | | ------------------- | -------- | ------- | ----------- | | recipientAddress | string | - | Sui address of the recipient | | amount | number | 3 | Optional amount in USD | | buttonLabel | string | MerSui | Optional button label | | containerClassName | string | - | Optional class name for the button container | | buttonClassName | string | - | Optional class name for the button | | statusClassName | string | - | Optional class name for the status message. The status-success and status-error classes are automatically added for your convenience. |

Pyth integration

MerSui uses Pyth's Sponsored Feed for SUI/USD to properly calculate the transaction amount in SUI. See lib/MerSuiWidget.tsx/fetchSuiPrice.

Known issues

• Next.js: Global CSS cannot be imported from within node_modules https://github.com/vercel/next.js/issues/19936

Development

The lib folder contains the source code of the library.

The src folder contains a demo app that you can use to play with the library locally.

But before that, you need to set up the environment variables:

# .env.local
VITE_RECIPIENT_ADDRESS=0x...

Then, run the development server:

pnpm dev

Build the library

pnpm build

License & copyright

Copyright (c) 2024 Konstantin Komelin

Licensed under the MIT License.