Changed component names. Added documentation.

kkomelin · kkomelin · commit a9786eb6ab5b · 2024-11-14T23:30:44.000+07:00
diff --git a/README.md b/README.md
@@ -1,10 +1,62 @@
-# Mersui Widget (library)
+# MerSui
+Basically "Buy Me a Coffee" button with payments in SUI.
 
-## Local development
+## Installation
 
-To play with the library locally, run the following command:
+```bash
+pnpm add mersui || yarn add mersui || npm install mersui
+```
+
+## Usage
+
+Wrap your main app component with the `MersuiProvider` component.
+
+```tsx
+import { MersuiProvider } from "mersui";
+
+function App() {
+  return (
+    <MersuiProvider>
+      <YourApp />
+    </MersuiProvider>
+  );
+}
+```
+
+Then, use the `MersuiWidget` component to render the button.
+
+```tsx
+import { MersuiWidget } from "mersui";
+
+function App() {
+  return (
+    <div>
+      <MersuiWidget recipientAddress="0x..." buttonLabel="Support" />
+    </div>
+  );
+}
+```
+
+### Props
+
+| Prop                | Type     | Default | Description |
+| ------------------- | -------- | ------- | ----------- |
+| buttonLabel         | string   | -       | Button label |
+| recipientAddress    | string   | -       | Sui address of the recipient |
+| 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 convinience. |
+
+## Pyth Integration
+
+MerSui uses Pyth's Sponsored Feed for SUI/USD to properly calculate the transaction amount in SUI.
+
+## Development
+
+The `src` folder contains a demo app that you can use to play with the library locally.
 
 ```bash
 pnpm dev
 ```
 
+The `lib` folder contains tsource code of the library.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mersui Widget: Playground</title>
+    <title>MerSui Widget: Playground</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/lib/components/MerSuiProvider.css b/lib/components/MerSuiProvider.css
diff --git a/lib/components/MerSuiProvider.tsx b/lib/components/MerSuiProvider.tsx
@@ -7,17 +7,17 @@ import "@mysten/dapp-kit/dist/index.css";
 import { getFullnodeUrl } from "@mysten/sui/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { FC, PropsWithChildren } from "react";
-import "./MersuiProvider.css";
+import "./MerSuiProvider.css";
 
 const { networkConfig } = createNetworkConfig({
-  localnet: { url: getFullnodeUrl('localnet') },
-	devnet: { url: getFullnodeUrl('devnet') },
-	testnet: { url: getFullnodeUrl('testnet') },
-	mainnet: { url: getFullnodeUrl('mainnet') },
+  localnet: { url: getFullnodeUrl("localnet") },
+  devnet: { url: getFullnodeUrl("devnet") },
+  testnet: { url: getFullnodeUrl("testnet") },
+  mainnet: { url: getFullnodeUrl("mainnet") },
 });
 const queryClient = new QueryClient();
 
-export const MersuiProvider: FC<PropsWithChildren> = ({ children }) => {
+export const MerSuiProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <QueryClientProvider client={queryClient}>
       <SuiClientProvider networks={networkConfig} defaultNetwork="localnet">
diff --git a/lib/components/MerSuiWidget.tsx b/lib/components/MerSuiWidget.tsx
@@ -19,15 +19,15 @@ import {
   TRANSACTION_AMOUNT_FALLBACK,
 } from "../constants";
 
-interface IMersuiWidget {
+interface IMerSuiWidget {
   recipientAddress: string;
   buttonLabel?: string;
   containerClassName?: string;
   buttonClassName?: string;
   statusClassName?: string;
 }
 
-export const MersuiWidget: FC<IMersuiWidget> = ({
+export const MerSuiWidget: FC<IMerSuiWidget> = ({
   recipientAddress,
   buttonLabel,
   containerClassName,
@@ -81,7 +81,7 @@ export const MersuiWidget: FC<IMersuiWidget> = ({
 
   if (currentAccount) {
     return (
-      <MersuiButton
+      <MerSuiButton
         onClick={() => performTransaction()}
         connected={true}
         status={status}
@@ -90,27 +90,27 @@ export const MersuiWidget: FC<IMersuiWidget> = ({
         statusClassName={statusClassName}
       >
         {buttonLabel || DEFAULT_BUTTON_LABEL} ${AMOUNT_USD}
-      </MersuiButton>
+      </MerSuiButton>
     );
   }
 
   return (
     <ConnectModal
       trigger={
-        <MersuiButton
+        <MerSuiButton
           disabled={!!currentAccount}
           containerClassName={containerClassName}
           buttonClassName={buttonClassName}
           statusClassName={statusClassName}
         >
           {buttonLabel || DEFAULT_BUTTON_LABEL} ${AMOUNT_USD}
-        </MersuiButton>
+        </MerSuiButton>
       }
     />
   );
 };
 
-interface IMersuiButton {
+interface IMerSuiButton {
   disabled?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   connected?: boolean;
@@ -120,7 +120,7 @@ interface IMersuiButton {
   statusClassName?: string;
 }
 
-const MersuiButton: FC<PropsWithChildren<IMersuiButton>> = ({
+const MerSuiButton: FC<PropsWithChildren<IMerSuiButton>> = ({
   disabled,
   onClick,
   children,
diff --git a/lib/main.ts b/lib/main.ts
@@ -1,2 +1,2 @@
-export { MersuiProvider } from "./components/MersuiProvider";
-export { MersuiWidget } from "./components/MersuiWidget";
+export { MerSuiProvider } from "./components/MerSuiProvider";
+export { MerSuiWidget } from "./components/MerSuiWidget";
diff --git a/package.json b/package.json
@@ -1,7 +1,6 @@
 {
-  "name": "mersui-widget",
-  "private": true,
-  "version": "0.0.0",
+  "name": "mersui",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,12 @@
-import { MersuiWidget } from "../lib/main";
+import { MerSuiWidget } from "../lib/main";
 import "./App.css";
 
 function App() {
   return (
     <>
-      <h1 className="text-4xl">Mersui Widget</h1>
+      <h1 className="text-4xl">MerSui Widget</h1>
       <div className="card">
-        <MersuiWidget
+        <MerSuiWidget
           recipientAddress={import.meta.env.VITE_TARGET_ADDRESS}
           buttonLabel="Support"
         />
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,13 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { MersuiProvider } from "../lib/components/MersuiProvider.tsx";
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { MerSuiProvider } from "../lib/components/MerSuiProvider.tsx";
+import App from "./App.tsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <MersuiProvider>
+    <MerSuiProvider>
       <App />
-    </MersuiProvider>
+    </MerSuiProvider>
   </StrictMode>
 );
