0.3.0 • Published 7 months ago

mersui v0.3.0

Weekly downloads
-
License
MIT
Repository
-
Last release
7 months ago

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

PropTypeDefaultDescription
recipientAddressstring-Sui address of the recipient
amountnumber3Optional amount in USD
buttonLabelstringMerSuiOptional button label
containerClassNamestring-Optional class name for the button container
buttonClassNamestring-Optional class name for the button
statusClassNamestring-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

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.

0.3.0

7 months ago

0.2.0

8 months ago

0.1.2

8 months ago

0.1.1

8 months ago

0.1.0

8 months ago