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 vercel/next.js#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.