https://github.com/suiware/mersui
Simple "Buy Me a Coffee" React button with payments in SUI
https://github.com/suiware/mersui
buy-me-a-coffee component-library react sui
Last synced: about 2 months ago
JSON representation
Simple "Buy Me a Coffee" React button with payments in SUI
- Host: GitHub
- URL: https://github.com/suiware/mersui
- Owner: suiware
- License: mit
- Created: 2024-11-09T02:52:07.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-11T16:00:19.000Z (10 months ago)
- Last Synced: 2025-04-19T11:16:41.583Z (6 months ago)
- Topics: buy-me-a-coffee, component-library, react, sui
- Language: TypeScript
- Homepage: https://mersui.xyz
- Size: 374 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MerSui
[](https://badge.fury.io/js/mersui)
[](https://bundlephobia.com/result?p=mersui)
[](https://discord.com/invite/HuDPpXz4Hx)
Simple "Buy Me a Coffee" React button with payments in SUI.
No intermediaries, you receive donations directly to your Sui address.
## Demo
[mersui.xyz](https://mersui.xyz)
## Installation
```bash
pnpm add mersui || yarn add mersui || npm install mersui
```
## Usage
First of all, wrap your main app component into the `MerSuiProvider` component.
```tsx
import { MerSuiProvider } from "mersui";
function App() {
return (
);
}
```
Then, use the `MerSuiWidget` component to render the button.
```tsx
import { MerSuiWidget } from "mersui";
function App() {
return (
);
}
```
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](https://docs.pyth.network/price-feeds/sponsored-feeds/sui) to properly calculate the transaction amount in SUI.
See [lib/MerSuiWidget.tsx/fetchSuiPrice](/lib/components/MerSuiWidget.tsx#L184).
## 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:
```bash
pnpm dev
```
## Build the library
```bash
pnpm build
```
## License & copyright
Copyright (c) 2024 Konstantin Komelin
Licensed under the [MIT License](LICENSE).