@fedimint/react 0.0.0-20250617190659

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 fedimint
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+<p align="center">
+  <img src="../../docs/public/icon.png" alt="Fedimint Logo" width="300" />
+  <!-- Removes the border below the header tag -->
+  <div id="toc"><ul align="center" style="list-style: none;"><summary>
+    <h1><b>@fedimint/react</b></h1>
+    <p>Helpful React hooks for building with the Fedimint Web SDK.</p>
+  </summary></ul></div>
+
+# @fedimint/react
+
+## Install
+
+```bash
+pnpm install @fedimint/core-web @fedimint/react
+```
+
+## Usage
+
+```tsx
+import { FedimintWalletProvider, setupFedimintWallet } from '@fedimint/react'
+
+setupFedimintWallet({
+  lazy: false,
+  debug: true,
+})
+
+// Wrap your app in the FedimintWalletProvider
+<FedimintWalletProvider>
+  <App />
+</FedimintWalletProvider>
+
+
+// App.tsx
+
+
+// Balance
+
+import { useBalance } from '@fedimint/react'
+
+const balance = useBalance()
+
+// Wallet
+
+import { useOpenWallet } from '@fedimint/react'
+
+const {
+  walletStatus, // 'open' | 'closed' | 'connecting' | 'failed'
+  openWallet, // () => Promise<boolean> - Returns true if wallet was opened successfully.
+  joinFederation, // () => Promise<boolean> - Returns true if joined federation successfully.
+} = useOpenWallet()
+
+// Receive Lightning
+
+import { useReceiveLightning } from '@fedimint/react'
+
+const {
+  generateInvoice, // (amount: number) => Promise<void>
+  bolt11, // string
+  invoiceStatus, // 'pending' | 'confirmed' | 'failed'
+  error, // Error | undefined
+} = useReceiveLightning()
+
+// Send Lightning
+
+import { useSendLightning } from '@fedimint/react'
+
+const {
+  payInvoice, // (bolt11: string) => Promise<void>
+  paymentStatus, // 'pending' | 'confirmed' | 'failed'
+  paymentError, // Error | undefined
+} = useSendLightning()
+
+```

package/dist/contexts/FedimintWalletContext.d.ts

@@ -0,0 +1,20 @@
+import { FedimintWallet } from '@fedimint/core-web';
+type FedimintWalletConfig = {
+    lazy?: boolean;
+    debug?: boolean;
+};
+export type WalletStatus = 'open' | 'closed' | 'opening';
+export declare const setupFedimintWallet: (config: FedimintWalletConfig) => void;
+export declare const FedimintWalletContext: import('react').Context<{
+    wallet: FedimintWallet;
+    walletStatus: WalletStatus;
+    setWalletStatus: (status: WalletStatus) => void;
+} | undefined>;
+export type FedimintWalletProviderProps = {};
+export declare const FedimintWalletProvider: (parameters: React.PropsWithChildren<FedimintWalletProviderProps>) => import('react').FunctionComponentElement<import('react').ProviderProps<{
+    wallet: FedimintWallet;
+    walletStatus: WalletStatus;
+    setWalletStatus: (status: WalletStatus) => void;
+} | undefined>>;
+export {};
+//# sourceMappingURL=FedimintWalletContext.d.ts.map

package/dist/contexts/FedimintWalletContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FedimintWalletContext.d.ts","sourceRoot":"","sources":["../../lib/contexts/FedimintWalletContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAWnD,KAAK,oBAAoB,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExD,eAAO,MAAM,mBAAmB,GAAI,QAAQ,oBAAoB,SAK/D,CAAA;AAED,eAAO,MAAM,qBAAqB;YAEpB,cAAc;kBACR,YAAY;qBACT,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI;cAGzC,CAAA;AAEZ,MAAM,MAAM,2BAA2B,GAAG,EAAE,CAAA;AAE5C,eAAO,MAAM,sBAAsB,GACjC,YAAY,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC;YAVpD,cAAc;kBACR,YAAY;qBACT,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI;eAsCpD,CAAA"}

package/dist/contexts/index.d.ts

@@ -0,0 +1,3 @@
+import { FedimintWalletContext, FedimintWalletProvider, setupFedimintWallet } from './FedimintWalletContext';
+export { FedimintWalletContext, FedimintWalletProvider, setupFedimintWallet };
+//# sourceMappingURL=index.d.ts.map

package/dist/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/contexts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { useBalance } from './useBalance';
+export { useOpenWallet } from './useOpenWallet';
+export { useFedimintWallet } from './useFedimintWallet';
+export { useReceiveLightning } from './useReceiveLightning';
+export { useSendLightning } from './useSendLightning';
+export { useSpendEcash } from './useSpendEcash';
+export { useReceiveEcash } from './useReceiveEcash';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/hooks/useBalance.d.ts

@@ -0,0 +1,2 @@
+export declare const useBalance: () => number | undefined;
+//# sourceMappingURL=useBalance.d.ts.map

package/dist/hooks/useBalance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBalance.d.ts","sourceRoot":"","sources":["../../lib/hooks/useBalance.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,0BAkBtB,CAAA"}

package/dist/hooks/useFedimintWallet.d.ts

@@ -0,0 +1,2 @@
+export declare const useFedimintWallet: () => import('@fedimint/core-web').FedimintWallet;
+//# sourceMappingURL=useFedimintWallet.d.ts.map

package/dist/hooks/useFedimintWallet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFedimintWallet.d.ts","sourceRoot":"","sources":["../../lib/hooks/useFedimintWallet.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,mDAQ7B,CAAA"}

package/dist/hooks/useOpenWallet.d.ts

@@ -0,0 +1,6 @@
+export declare const useOpenWallet: () => {
+    walletStatus: import('../contexts/FedimintWalletContext').WalletStatus;
+    openWallet: () => void;
+    joinFederation: (invite: string) => Promise<void>;
+};
+//# sourceMappingURL=useOpenWallet.d.ts.map

package/dist/hooks/useOpenWallet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenWallet.d.ts","sourceRoot":"","sources":["../../lib/hooks/useOpenWallet.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;6BAqBP,MAAM;CAaxB,CAAA"}

package/dist/hooks/useReceiveEcash.d.ts

@@ -0,0 +1,7 @@
+import { ReissueExternalNotesState } from '@fedimint/core-web';
+export declare const useReceiveEcash: () => {
+    redeemEcash: (notes: string) => Promise<void>;
+    state: "Error" | ReissueExternalNotesState | undefined;
+    error: string | undefined;
+};
+//# sourceMappingURL=useReceiveEcash.d.ts.map

package/dist/hooks/useReceiveEcash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReceiveEcash.d.ts","sourceRoot":"","sources":["../../lib/hooks/useReceiveEcash.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAA;AAE9D,eAAO,MAAM,eAAe;yBA2BV,MAAM;;;CAkBvB,CAAA"}

package/dist/hooks/useReceiveLightning.d.ts

@@ -0,0 +1,8 @@
+import { LnReceiveState } from '@fedimint/core-web';
+export declare const useReceiveLightning: () => {
+    generateInvoice: (amount: number, description: string) => Promise<string>;
+    bolt11: string | undefined;
+    invoiceStatus: LnReceiveState | undefined;
+    error: string | undefined;
+};
+//# sourceMappingURL=useReceiveLightning.d.ts.map

package/dist/hooks/useReceiveLightning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReceiveLightning.d.ts","sourceRoot":"","sources":["../../lib/hooks/useReceiveLightning.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAA6B,MAAM,oBAAoB,CAAA;AAE9E,eAAO,MAAM,mBAAmB;8BASb,MAAM,eAAe,MAAM;;;;CAgC7C,CAAA"}

package/dist/hooks/useSendLightning.d.ts

@@ -0,0 +1,8 @@
+import { LnPayState, OutgoingLightningPayment } from '@fedimint/core-web';
+export declare const useSendLightning: () => {
+    payInvoice: (bolt11: string) => Promise<OutgoingLightningPayment>;
+    payment: OutgoingLightningPayment | undefined;
+    paymentStatus: LnPayState | undefined;
+    paymentError: string | undefined;
+};
+//# sourceMappingURL=useSendLightning.d.ts.map

package/dist/hooks/useSendLightning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSendLightning.d.ts","sourceRoot":"","sources":["../../lib/hooks/useSendLightning.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,wBAAwB,EAC9B,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,gBAAgB;yBAQV,MAAM;;;;CAiCxB,CAAA"}

package/dist/hooks/useSpendEcash.d.ts

@@ -0,0 +1,8 @@
+import { SpendNotesState } from '@fedimint/core-web';
+export declare const useSpendEcash: () => {
+    spendEcash: (amountSats: number, reclaimAfter?: number) => Promise<string>;
+    notes: string | undefined;
+    state: SpendNotesState | "Error" | undefined;
+    error: string | undefined;
+};
+//# sourceMappingURL=useSpendEcash.d.ts.map

package/dist/hooks/useSpendEcash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpendEcash.d.ts","sourceRoot":"","sources":["../../lib/hooks/useSpendEcash.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEzD,eAAO,MAAM,aAAa;6BA8BH,MAAM,iBAAiB,MAAM;;;;CAmBnD,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './contexts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,202 @@
+import { useState as r, useEffect as h, createContext as y, useMemo as W, createElement as F, useContext as f, useCallback as m } from "react";
+import { FedimintWallet as I } from "@fedimint/core-web";
+const L = () => {
+  const e = g(), { walletStatus: n } = E(), [t, o] = r();
+  return h(() => {
+    if (n !== "open") return;
+    const a = e.balance.subscribeBalance((c) => {
+      o(c);
+    });
+    return () => {
+      a();
+    };
+  }, [n]), t;
+};
+let w;
+const R = (e) => {
+  w = new I(!!e.lazy), e.debug && w.setLogLevel("debug");
+}, v = y(void 0), O = (e) => {
+  const [n, t] = r("closed"), { children: o } = e;
+  if (!w)
+    throw new Error(
+      "You must call setupFedimintWallet() first. See the getting started guide."
+    );
+  const a = W(
+    () => ({
+      wallet: w,
+      walletStatus: n,
+      setWalletStatus: t
+    }),
+    [n]
+  );
+  return h(() => {
+    w.waitForOpen().then(() => {
+      t("open");
+    });
+  }, [w]), F(
+    v.Provider,
+    { value: a },
+    o
+  );
+}, E = () => {
+  const e = f(v);
+  if (!e)
+    throw new Error(
+      "useOpenWallet must be used within a FedimintWalletProvider"
+    );
+  const { wallet: n, walletStatus: t, setWalletStatus: o } = e, a = m(() => {
+    t !== "open" && (o("opening"), n.open().then((l) => {
+      o(l ? "open" : "closed");
+    }));
+  }, [n]), c = m(
+    async (l) => {
+      t !== "open" && (o("opening"), await n.joinFederation(l).then((u) => {
+        o(u ? "open" : "closed");
+      }));
+    },
+    [n]
+  );
+  return { walletStatus: t, openWallet: a, joinFederation: c };
+}, g = () => {
+  const e = f(v);
+  if (!(e != null && e.wallet))
+    throw new Error(
+      "useFedimintWallet must be used within a FedimintWalletProvider"
+    );
+  return e.wallet;
+}, C = () => {
+  const e = g(), { walletStatus: n } = E(), [t, o] = r(), [a, c] = r(), [l, u] = r(), p = m(
+    async (i, s) => {
+      if (n !== "open") throw new Error("Wallet is not open");
+      const d = await e.lightning.createInvoice(i, s);
+      return o(d), d.invoice;
+    },
+    [e, n]
+  );
+  return h(() => {
+    if (n !== "open" || !t) return;
+    const i = e.lightning.subscribeLnReceive(
+      t.operation_id,
+      (s) => {
+        c(s);
+      },
+      (s) => {
+        u(s);
+      }
+    );
+    return () => {
+      i();
+    };
+  }, [n, t]), {
+    generateInvoice: p,
+    bolt11: t == null ? void 0 : t.invoice,
+    invoiceStatus: a,
+    error: l
+  };
+}, N = () => {
+  const e = g(), { walletStatus: n } = E(), [t, o] = r(), [a, c] = r(), [l, u] = r(), p = m(
+    async (i) => {
+      if (n !== "open") throw new Error("Wallet is not open");
+      const s = await e.lightning.payInvoice(i);
+      return o(s), s;
+    },
+    [e, n]
+  );
+  return h(() => {
+    if (n !== "open" || !t) return;
+    const i = e.lightning.subscribeLnPay(
+      // @ts-ignore
+      t.payment_type.lightning,
+      (s) => {
+        c(s);
+      },
+      (s) => {
+        u(s);
+      }
+    );
+    return () => {
+      i();
+    };
+  }, [n, t]), {
+    payInvoice: p,
+    payment: t,
+    paymentStatus: a,
+    paymentError: l
+  };
+}, B = () => {
+  const e = g(), { walletStatus: n } = E(), [t, o] = r(), [a, c] = r(), [l, u] = r(), [p, i] = r();
+  return h(() => {
+    if (!t) return;
+    const d = e.mint.subscribeSpendNotes(
+      t,
+      (b) => {
+        u(b);
+      },
+      (b) => {
+        u("Error"), i(b);
+      }
+    );
+    return () => {
+      d();
+    };
+  }, [t]), {
+    spendEcash: m(
+      async (d, b) => {
+        if (n !== "open") throw new Error("Wallet is not open");
+        const S = await e.mint.spendNotes(
+          d * 1e3,
+          b
+        );
+        return o(S.operation_id), c(S.notes), S.notes;
+      },
+      [e, n]
+    ),
+    notes: a,
+    state: l,
+    error: p
+  };
+}, _ = () => {
+  const e = g(), { walletStatus: n } = E(), [t, o] = r(), [a, c] = r(), [l, u] = r();
+  return h(() => {
+    if (!t) return;
+    const i = e.mint.subscribeReissueExternalNotes(
+      t,
+      (s) => {
+        c(s);
+      },
+      (s) => {
+        u(s);
+      }
+    );
+    return () => {
+      i();
+    };
+  }, [t]), {
+    redeemEcash: m(
+      async (i) => {
+        if (n !== "open") throw new Error("Wallet is not open");
+        try {
+          const s = await e.mint.redeemEcash(i);
+          o(s);
+        } catch (s) {
+          c("Error"), u(s);
+        }
+      },
+      [e, n]
+    ),
+    state: a,
+    error: l
+  };
+};
+export {
+  v as FedimintWalletContext,
+  O as FedimintWalletProvider,
+  R as setupFedimintWallet,
+  L as useBalance,
+  g as useFedimintWallet,
+  E as useOpenWallet,
+  _ as useReceiveEcash,
+  C as useReceiveLightning,
+  N as useSendLightning,
+  B as useSpendEcash
+};

package/dist/init.d.ts

@@ -0,0 +1,2 @@
+export declare const initFedimintReact: (lazy?: boolean) => {};
+//# sourceMappingURL=init.d.ts.map

package/dist/init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../lib/init.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,GAAI,OAAM,OAAe,OAMtD,CAAA"}

package/lib/contexts/FedimintWalletContext.ts

@@ -0,0 +1,68 @@
+import { FedimintWallet } from '@fedimint/core-web'
+import {
+  createContext,
+  createElement,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+let wallet: FedimintWallet
+
+type FedimintWalletConfig = {
+  lazy?: boolean
+  debug?: boolean
+}
+
+export type WalletStatus = 'open' | 'closed' | 'opening'
+
+export const setupFedimintWallet = (config: FedimintWalletConfig) => {
+  wallet = new FedimintWallet(!!config.lazy)
+  if (config.debug) {
+    wallet.setLogLevel('debug')
+  }
+}
+
+export const FedimintWalletContext = createContext<
+  | {
+      wallet: FedimintWallet
+      walletStatus: WalletStatus
+      setWalletStatus: (status: WalletStatus) => void
+    }
+  | undefined
+>(undefined)
+
+export type FedimintWalletProviderProps = {}
+
+export const FedimintWalletProvider = (
+  parameters: React.PropsWithChildren<FedimintWalletProviderProps>,
+) => {
+  const [walletStatus, setWalletStatus] = useState<WalletStatus>('closed')
+  const { children } = parameters
+
+  if (!wallet)
+    throw new Error(
+      'You must call setupFedimintWallet() first. See the getting started guide.',
+    )
+
+  const contextValue = useMemo(
+    () => ({
+      wallet,
+      walletStatus,
+      setWalletStatus,
+    }),
+    [walletStatus],
+  )
+
+  useEffect(() => {
+    wallet.waitForOpen().then(() => {
+      setWalletStatus('open')
+    })
+  }, [wallet])
+
+  return createElement(
+    FedimintWalletContext.Provider,
+    { value: contextValue },
+    children,
+  )
+}

package/lib/contexts/index.ts

@@ -0,0 +1,7 @@
+import {
+  FedimintWalletContext,
+  FedimintWalletProvider,
+  setupFedimintWallet,
+} from './FedimintWalletContext'
+
+export { FedimintWalletContext, FedimintWalletProvider, setupFedimintWallet }

package/lib/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useBalance } from './useBalance'
+export { useOpenWallet } from './useOpenWallet'
+export { useFedimintWallet } from './useFedimintWallet'
+export { useReceiveLightning } from './useReceiveLightning'
+export { useSendLightning } from './useSendLightning'
+export { useSpendEcash } from './useSpendEcash'
+export { useReceiveEcash } from './useReceiveEcash'

package/lib/hooks/useBalance.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+import { useFedimintWallet, useOpenWallet } from '.'
+
+export const useBalance = () => {
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+  const [balance, setBalance] = useState<number>()
+
+  useEffect(() => {
+    if (walletStatus !== 'open') return
+
+    const unsubscribe = wallet.balance.subscribeBalance((balance) => {
+      setBalance(balance)
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [walletStatus])
+
+  return balance
+}

package/lib/hooks/useFedimintWallet.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react'
+import { FedimintWalletContext } from '../contexts'
+
+export const useFedimintWallet = () => {
+  const value = useContext(FedimintWalletContext)
+  if (!value?.wallet) {
+    throw new Error(
+      'useFedimintWallet must be used within a FedimintWalletProvider',
+    )
+  }
+  return value.wallet
+}

package/lib/hooks/useOpenWallet.ts

@@ -0,0 +1,38 @@
+import { useCallback, useContext } from 'react'
+import { FedimintWalletContext } from '../contexts/FedimintWalletContext'
+
+export const useOpenWallet = () => {
+  const value = useContext(FedimintWalletContext)
+
+  if (!value) {
+    throw new Error(
+      'useOpenWallet must be used within a FedimintWalletProvider',
+    )
+  }
+
+  const { wallet, walletStatus, setWalletStatus } = value
+
+  const openWallet = useCallback(() => {
+    if (walletStatus === 'open') return
+
+    setWalletStatus('opening')
+    wallet.open().then((res) => {
+      setWalletStatus(res ? 'open' : 'closed')
+    })
+  }, [wallet])
+
+  const joinFederation = useCallback(
+    async (invite: string) => {
+      if (walletStatus === 'open') return
+
+      setWalletStatus('opening')
+
+      await wallet.joinFederation(invite).then((res) => {
+        setWalletStatus(res ? 'open' : 'closed')
+      })
+    },
+    [wallet],
+  )
+
+  return { walletStatus, openWallet, joinFederation }
+}

package/lib/hooks/useReceiveEcash.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useFedimintWallet, useOpenWallet } from '.'
+import { ReissueExternalNotesState } from '@fedimint/core-web'
+
+export const useReceiveEcash = () => {
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+
+  const [operationId, setOperationId] = useState<string>()
+  const [state, setState] = useState<ReissueExternalNotesState | 'Error'>()
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    if (!operationId) return
+
+    const unsubscribe = wallet.mint.subscribeReissueExternalNotes(
+      operationId,
+      (_state) => {
+        setState(_state)
+      },
+      (error) => {
+        setError(error)
+      },
+    )
+
+    return () => {
+      unsubscribe()
+    }
+  }, [operationId])
+
+  const redeemEcash = useCallback(
+    async (notes: string) => {
+      if (walletStatus !== 'open') throw new Error('Wallet is not open')
+      try {
+        const response = await wallet.mint.redeemEcash(notes)
+        setOperationId(response)
+      } catch (e) {
+        setState('Error')
+        setError(e as string)
+      }
+    },
+    [wallet, walletStatus],
+  )
+
+  return {
+    redeemEcash,
+    state,
+    error,
+  }
+}

package/lib/hooks/useReceiveLightning.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useFedimintWallet, useOpenWallet } from '.'
+import { LnReceiveState, type CreateBolt11Response } from '@fedimint/core-web'
+
+export const useReceiveLightning = () => {
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+  const [invoice, setInvoice] = useState<CreateBolt11Response>()
+  const [invoiceReceiveState, setInvoiceReceiveState] =
+    useState<LnReceiveState>()
+  const [error, setError] = useState<string>()
+
+  const generateInvoice = useCallback(
+    async (amount: number, description: string) => {
+      if (walletStatus !== 'open') throw new Error('Wallet is not open')
+      const response = await wallet.lightning.createInvoice(amount, description)
+      setInvoice(response)
+      return response.invoice
+    },
+    [wallet, walletStatus],
+  )
+
+  useEffect(() => {
+    if (walletStatus !== 'open' || !invoice) return
+    const unsubscribe = wallet.lightning.subscribeLnReceive(
+      invoice.operation_id,
+      (state) => {
+        setInvoiceReceiveState(state)
+      },
+      (error) => {
+        setError(error)
+      },
+    )
+
+    return () => {
+      unsubscribe()
+    }
+  }, [walletStatus, invoice])
+
+  return {
+    generateInvoice,
+    bolt11: invoice?.invoice,
+    invoiceStatus: invoiceReceiveState,
+    error,
+  }
+}

package/lib/hooks/useSendLightning.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useFedimintWallet, useOpenWallet } from '.'
+import {
+  type LnPayState,
+  type OutgoingLightningPayment,
+} from '@fedimint/core-web'
+
+export const useSendLightning = () => {
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+  const [payment, setPayment] = useState<OutgoingLightningPayment>()
+  const [paymentState, setPaymentState] = useState<LnPayState>()
+  const [error, setError] = useState<string>()
+
+  const payInvoice = useCallback(
+    async (bolt11: string) => {
+      if (walletStatus !== 'open') throw new Error('Wallet is not open')
+      const response = await wallet.lightning.payInvoice(bolt11)
+      setPayment(response)
+      return response
+    },
+    [wallet, walletStatus],
+  )
+
+  useEffect(() => {
+    if (walletStatus !== 'open' || !payment) return
+    const unsubscribe = wallet.lightning.subscribeLnPay(
+      // @ts-ignore
+      payment.payment_type.lightning,
+      (state) => {
+        setPaymentState(state)
+      },
+      (error) => {
+        setError(error)
+      },
+    )
+
+    return () => {
+      unsubscribe()
+    }
+  }, [walletStatus, payment])
+
+  return {
+    payInvoice,
+    payment,
+    paymentStatus: paymentState,
+    paymentError: error,
+  }
+}

package/lib/hooks/useSpendEcash.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useFedimintWallet, useOpenWallet } from '.'
+import { type SpendNotesState } from '@fedimint/core-web'
+
+export const useSpendEcash = () => {
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+
+  const [operationId, setOperationId] = useState<string>()
+  const [notes, setNotes] = useState<string>()
+
+  const [state, setState] = useState<SpendNotesState | 'Error'>()
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    if (!operationId) return
+
+    const unsubscribe = wallet.mint.subscribeSpendNotes(
+      operationId,
+      (_state) => {
+        setState(_state)
+      },
+      (error) => {
+        setState('Error')
+        setError(error)
+      },
+    )
+
+    return () => {
+      unsubscribe()
+    }
+  }, [operationId])
+
+  const spendEcash = useCallback(
+    async (amountSats: number, reclaimAfter?: number) => {
+      if (walletStatus !== 'open') throw new Error('Wallet is not open')
+      const response = await wallet.mint.spendNotes(
+        amountSats * 1000,
+        reclaimAfter,
+      )
+      setOperationId(response.operation_id)
+      setNotes(response.notes)
+      return response.notes
+    },
+    [wallet, walletStatus],
+  )
+
+  return {
+    spendEcash,
+    notes,
+    state,
+    error,
+  }
+}

package/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks'
+export * from './contexts'

package/lib/init.ts

@@ -0,0 +1,11 @@
+import { FedimintWallet } from '@fedimint/core-web'
+
+let wallet: FedimintWallet | undefined
+
+export const initFedimintReact = (lazy: boolean = false) => {
+  if (!lazy) {
+    wallet = new FedimintWallet(lazy)
+  }
+
+  return {}
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@fedimint/react",
+  "version": "0.0.0-20250617190659",
+  "type": "module",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "@fedimint/core-web": "0.0.0-20250617190659"
+  },
+  "devDependencies": {
+    "@types/react": ">=19.1.4",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.27.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "react-dom": ">=19.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-wasm": "^3.4.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  }
+}