suioutkit 1.0.1

package/dist/types/index.d.ts

@@ -0,0 +1,57 @@
+export type SomeType = any;
+export interface CheckoutSessionOptions {
+    amount: number;
+    currency: "NGN" | "SUI" | string;
+    merchantAddress: string;
+    metadata?: Record<string, any>;
+}
+export interface CheckoutSession {
+    token: string;
+    nonce: string;
+    amount: number;
+    currency: string;
+    merchantAddress: string;
+    walrusBlobId?: string;
+    packageId?: string;
+    cryptoRegistryId?: string;
+    cryptoRegistryName?: string;
+    coinType?: string;
+    estimatedRate?: number;
+}
+export type ChargeMethod = "bank_transfer" | "opay" | "crypto" | "sui_wallet" | "outpay" | "stripe";
+export interface VirtualAccount {
+    accountNumber: string;
+    bankName: string;
+    amount: number;
+    expirySeconds: number;
+}
+export interface ChargeResponse {
+    status: "success" | "pending" | "error";
+    virtualAccount?: VirtualAccount;
+    opayPrompt?: string;
+    clientSecret?: string;
+    stripePublicKey?: string;
+    message?: string;
+}
+export interface CryptoIntentResponse {
+    nonce: string;
+    receiverAddress: string;
+    amountBaseUnits: number;
+    coinType: string;
+    packageId?: string;
+    registryName?: string;
+    walrusBlobId?: string;
+    rate?: number;
+}
+export interface CryptoConfirmResponse {
+    status: "success" | "error";
+    txDigest?: string;
+    walrusBlobId?: string;
+    error?: string;
+}
+export interface CheckoutStatusResponse {
+    status: "PENDING" | "PROCESSING" | "SETTLED" | "EXPIRED";
+    txDigest?: string;
+    walrusBlobId?: string;
+    error?: string;
+}

package/dist/utils/format.d.ts

@@ -0,0 +1,12 @@
+/** Format a Naira amount with currency symbol and grouping. */
+export declare function formatNgn(amount: number): string;
+/** Convert base integer units into token float given decimals. */
+export declare function toTokenUnits(baseUnits: number, decimals?: number): number;
+/** Format token amounts with fixed decimals and trimming. */
+export declare function formatToken(amount: number, decimals?: number, digits?: number): string;
+declare const _default: {
+    formatNgn: typeof formatNgn;
+    toTokenUnits: typeof toTokenUnits;
+    formatToken: typeof formatToken;
+};
+export default _default;

package/dist/utils/http.d.ts

@@ -0,0 +1,11 @@
+export type RequestOptions = RequestInit & {
+    timeout?: number;
+    retries?: number;
+};
+export declare class HttpError extends Error {
+    status: number | null;
+    body: any | null;
+    constructor(message: string, status?: number | null, body?: any | null);
+}
+export declare function request<T = any>(input: string, opts?: RequestOptions): Promise<T>;
+export default request;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "suioutkit",
+  "version": "1.0.1",
+  "description": "Premium Universal Payment Gateway SDK for instant settlement on Sui",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "esbuild src/index.ts --bundle --platform=browser --format=esm --outfile=dist/index.js && tsc --emitDeclarationOnly --declaration",
+    "build:types": "tsc --emitDeclarationOnly --declaration"
+  },
+  "keywords": [
+    "sui",
+    "payment",
+    "fiat",
+    "nigeria",
+    "flutterwave",
+    "stripe",
+    "sdk"
+  ],
+  "author": "@CYBWithFlourish (https://github.com/CYBWithFlourish/)",
+  "license": "GPL-3.0",
+  "dependencies": {
+    "@mysten/dapp-kit-core": "^1.3.2",
+    "@mysten/payment-kit": "^0.1.11",
+    "@mysten/sui": "^2.17.0",
+    "@stripe/stripe-js": "^9.7.0",
+    "lucide-react": "^1.17.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.28.0",
+    "typescript": "^6.0.3"
+  },
+  "allowScripts": {
+    "esbuild@0.28.0": true
+  }
+}

package/src/components/PaymentStatusUI.tsx

@@ -0,0 +1,58 @@
+// SPDX-License-Identifier: GPL-3.0
+// Copyright (c) 2026 The3rdWebLabs (https://github.com/the3rdweblabs)
+// Author: @CYBWithFlourish (https://github.com/CYBWithFlourish)
+
+import React from "react";
+import { usePaymentStatus } from "../hooks/usePaymentStatus";
+import { ProgressStepper } from "./ProgressStepper";
+
+type Props = {
+  backendUrl: string;
+  nonce: string;
+};
+
+export default function PaymentStatusUI({ backendUrl, nonce }: Props) {
+  const update = usePaymentStatus(backendUrl, nonce);
+
+  const isProcessing = update.status === "PROCESSING";
+  const isSettled = update.status === "SETTLED";
+  const hasReceipt = !!update.walrusBlobId || isSettled;
+
+  const steps = [
+    { label: "Transfer sent", completed: isProcessing || hasReceipt },
+    { label: "Webhook received", completed: isProcessing || hasReceipt },
+    { label: "Receipt minted", completed: hasReceipt },
+    { label: "Settled on-chain", completed: isSettled },
+  ];
+
+  // Determine badge status
+  let badgeStatus: "PENDING" | "PROCESSING" | "BANK_CONFIRMED" | "SETTLED" | "ERROR" = "PENDING";
+  if (update.error) {
+    badgeStatus = "ERROR";
+  } else if (update.status === "SETTLED") {
+    badgeStatus = "SETTLED";
+  } else if (update.status === "PROCESSING") {
+    badgeStatus = "PROCESSING";
+  } else if (update.walrusBlobId) {
+    badgeStatus = "BANK_CONFIRMED";
+  } else {
+    badgeStatus = "PENDING";
+  }
+
+  const copy = update.error
+    ? "Payment monitoring lost connection."
+    : isSettled
+      ? "Payment settled. Receipt has been generated and the on-chain transaction is complete."
+      : isProcessing
+        ? "Bank transfer received. Webhook confirmed the payment and settlement is in progress..."
+        : hasReceipt
+          ? "Receipt minted. Final settlement is being confirmed on-chain..."
+          : "Waiting for the bank transfer to arrive. Once received, the progress steps will advance automatically.";
+
+  return (
+    <div className="payment-status-ui" style={{ marginTop: "12px" }}>
+      <div className="payment-status-copy">{copy}</div>
+      <ProgressStepper steps={steps} />
+    </div>
+  );
+}

package/src/components/ProgressStepper.tsx

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: GPL-3.0
+// Copyright (c) 2026 The3rdWebLabs (https://github.com/the3rdweblabs)
+// Author: @CYBWithFlourish (https://github.com/CYBWithFlourish)
+
+import React from "react";
+
+type Step = { label: string; completed?: boolean };
+
+type Props = { steps: Step[] };
+
+export function ProgressStepper({ steps }: Props) {
+  return (
+    <div className="stepper">
+      {steps.map((s, i) => (
+        <div className="step" key={i} id={`step-${i}`}>
+          <div className={`circle ${s.completed ? "filled" : ""}`}>{i + 1}</div>
+          <div className="label">{s.label}</div>
+          {i < steps.length - 1 && <div className="line" />}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: GPL-3.0
+// Copyright (c) 2026 The3rdWebLabs (https://github.com/the3rdweblabs)
+// Author: @CYBWithFlourish (https://github.com/CYBWithFlourish)
+
+import React from "react";
+import { Loader2, CheckCircle, XCircle } from "lucide-react";
+import "./style.css";
+
+type Props = {
+  status: "PENDING" | "PROCESSING" | "SUCCESS" | "ERROR" | "BANK_CONFIRMED" | "SETTLED";
+};
+
+export function StatusBadge({ status }: Props) {
+  if (status === "SUCCESS" || status === "BANK_CONFIRMED" || status === "SETTLED") {
+    return <CheckCircle className="icon success" />;
+  }
+  if (status === "ERROR") {
+    return <XCircle className="icon error" />;
+  }
+  // pending spinner
+  return <Loader2 className="icon spin" />;
+}