@fedimint/react 0.0.1 → 0.0.2

package/README.md

@@ -1,30 +1,73 @@
-# React + TypeScript + Vite
+<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>
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# @fedimint/react
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+pnpm install @fedimint/core-web @fedimint/react
+```
 
-## Expanding the ESLint configuration
+## Usage
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```tsx
+import { FedimintWalletProvider, setupFedimintWallet } from '@fedimint/react'
 
-- Configure the top-level `parserOptions` property like this:
+setupFedimintWallet({
+  lazy: false,
+  debug: true,
+})
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
+// Wrap your app in the FedimintWalletProvider
+<FedimintWalletProvider>
+  <App />
+</FedimintWalletProvider>
+
+
+// App.tsx
+
+
+// Balance
+
+import { useBalance } from '@fedimint/react'
+
+const balance = useBalance()
+
+// Wallet
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+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/hooks/index.d.ts

@@ -1,7 +1,6 @@
-import { useBalance } from './useBalance';
-import { useOpenWallet } from './useOpenWallet';
-import { useFedimintWallet } from './useFedimintWallet';
-import { useReceiveLightning } from './useReceiveLightning';
-import { useSendLightning } from './useSendLightning';
-export { useBalance, useOpenWallet, useFedimintWallet, useReceiveLightning, useSendLightning, };
+export { useBalance } from './useBalance';
+export { useOpenWallet } from './useOpenWallet';
+export { useFedimintWallet } from './useFedimintWallet';
+export { useReceiveLightning } from './useReceiveLightning';
+export { useSendLightning } from './useSendLightning';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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;AAErD,OAAO,EACL,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GACjB,CAAA"}
+{"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"}

package/lib/contexts/FedimintWalletContext.ts

@@ -0,0 +1,37 @@
+import { FedimintWallet } from '@fedimint/core-web'
+import { createContext, createElement } from 'react'
+
+let wallet: FedimintWallet
+
+type FedimintWalletConfig = {
+  lazy?: boolean
+  debug?: boolean
+}
+
+export const setupFedimintWallet = (config: FedimintWalletConfig) => {
+  wallet = new FedimintWallet(!!config.lazy)
+  if (config.debug) {
+    wallet.setLogLevel('debug')
+  }
+}
+
+export const FedimintWalletContext = createContext<
+  { wallet: FedimintWallet } | undefined
+>(undefined)
+
+export type FedimintWalletProviderProps = {}
+
+export const FedimintWalletProvider = (
+  parameters: React.PropsWithChildren<FedimintWalletProviderProps>,
+) => {
+  const { children } = parameters
+
+  if (!wallet)
+    throw new Error(
+      'You must call setupFedimintWallet() first. See the getting started guide.',
+    )
+
+  const props = { value: { wallet } }
+
+  return createElement(FedimintWalletContext.Provider, props, 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,5 @@
+export { useBalance } from './useBalance'
+export { useOpenWallet } from './useOpenWallet'
+export { useFedimintWallet } from './useFedimintWallet'
+export { useReceiveLightning } from './useReceiveLightning'
+export { useSendLightning } from './useSendLightning'

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,42 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useFedimintWallet } from '.'
+
+type WalletStatus = 'open' | 'closed' | 'opening'
+
+export const useOpenWallet = () => {
+  const wallet = useFedimintWallet()
+  const [walletStatus, setWalletStatus] = useState<WalletStatus>()
+
+  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')
+
+      const res = await wallet.joinFederation(invite)
+      setWalletStatus(res ? 'open' : 'closed')
+    },
+    [wallet],
+  )
+
+  useEffect(() => {
+    wallet.waitForOpen().then(() => {
+      setWalletStatus('open')
+    })
+
+    return () => {
+      setWalletStatus('closed')
+    }
+  }, [wallet])
+
+  return { walletStatus, openWallet, joinFederation }
+}

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/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

@@ -1,21 +1,16 @@
 {
   "name": "@fedimint/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "files": [
     "dist",
-    "src"
+    "lib"
   ],
-  "main": "./dist/fedimint-react.js",
-  "module": "./dist/fedimint-react.js",
-  "exports": {
-    ".": {
-      "import": "./dist/fedimint-react.js"
-    }
-  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "peerDependencies": {
     "react": "^18.3.1",
-    "@fedimint/core-web": "0.0.8"
+    "@fedimint/core-web": "0.0.9"
   },
   "devDependencies": {
     "@types/react": ">=18.3.11",

package/src/App.css

@@ -1,53 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.App {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  padding: 2em;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #ccc;
-  border-radius: 1em;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 3rem;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border-bottom: 1px solid #ccc;
-  gap: 0.5rem;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 500px;
-  gap: 0.5rem;
-}
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

package/src/App.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import './App.css'
-import HooksDemo from './components/HooksDemo'
-// @ts-ignore
-import reactImage from './assets/react.svg'
-
-function App() {
-  return (
-    <div className="App">
-      <img height={200} src={reactImage} />
-      <h2>Fedimint Web SDK - React</h2>
-      <HooksDemo />
-    </div>
-  )
-}
-
-export default App

package/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/HooksDemo.tsx

@@ -1,127 +0,0 @@
-import React, { useState } from 'react'
-import {
-  useBalance,
-  useReceiveLightning,
-  useOpenWallet,
-  useSendLightning,
-} from '../../lib'
-
-const TEST_FEDERATION_INVITE =
-  'fed11qgqzc2nhwden5te0vejkg6tdd9h8gepwvejkg6tdd9h8garhduhx6at5d9h8jmn9wshxxmmd9uqqzgxg6s3evnr6m9zdxr6hxkdkukexpcs3mn7mj3g5pc5dfh63l4tj6g9zk4er'
-
-function HooksDemo() {
-  const balance = useBalance()
-  const { walletStatus, openWallet, joinFederation } = useOpenWallet()
-  const [bolt11Input, setBolt11Input] = useState<string>()
-  const isOpen = walletStatus === 'open'
-  const { generateInvoice, bolt11, invoiceStatus, error } =
-    useReceiveLightning()
-  const { payInvoice, payment, paymentStatus, paymentError } =
-    useSendLightning()
-
-  return (
-    <>
-      <div className="card">
-        <h2>Hooks</h2>
-        <div className="section">
-          <b>useOpenWallet()</b>
-          <div className="row">
-            <b>walletStatus</b>
-            <p>{walletStatus}</p>
-          </div>
-          <div className="row">
-            <b>openWallet()</b>
-            <button disabled={isOpen} onClick={openWallet}>
-              Open Wallet
-            </button>
-          </div>
-          <div className="row">
-            <b>joinFederation(invite)</b>
-            <button
-              disabled={isOpen}
-              onClick={() => joinFederation(TEST_FEDERATION_INVITE)}
-            >
-              Join Federation
-            </button>
-          </div>
-        </div>
-        <div className="section">
-          <div className="row">
-            <b>useBalance</b>
-            <p>{balance ? `${balance / 1000} sats` : 'no balance'}</p>
-          </div>
-        </div>
-        <div className="section">
-          <b>useLightningInvoice()</b>
-          <div className="row">
-            <b>generateInvoice(1000, '1000 msats')</b>
-            <button
-              disabled={!isOpen}
-              onClick={() =>
-                generateInvoice(1_000, 'invoice from fedimint web sdk')
-              }
-            >
-              Generate Invoice
-            </button>
-          </div>
-          <div className="row">
-            <b>bolt11</b>
-            <p className="truncate">
-              {bolt11 ? bolt11 : 'no invoice generated'}
-            </p>
-          </div>
-          <div className="row">
-            <b>invoiceStatus</b>
-            <p>
-              {typeof invoiceStatus === 'string'
-                ? invoiceStatus
-                : typeof invoiceStatus === 'object'
-                  ? Object.keys(invoiceStatus)[0]
-                  : 'no invoice status'}
-            </p>
-          </div>
-          <div className="row">
-            <b>error</b>
-            <p>{error}</p>
-          </div>
-        </div>
-        <div className="section">
-          <b>useSendLightning()</b>
-          <div className="row">
-            <b>bolt11</b>
-            <input
-              type="text"
-              value={bolt11Input}
-              onChange={(e) => setBolt11Input(e.target.value)}
-            />
-          </div>
-          <div className="row">
-            <b>payInvoice(bolt11)</b>
-            <button
-              disabled={!isOpen || !bolt11Input}
-              onClick={() => bolt11Input && payInvoice(bolt11Input)}
-            >
-              Pay Invoice
-            </button>
-          </div>
-          <div className="row">
-            <b>paymentStatus</b>
-            <p>
-              {typeof paymentStatus === 'string'
-                ? paymentStatus
-                : typeof paymentStatus === 'object'
-                  ? Object.keys(paymentStatus)[0]
-                  : 'no payment status'}
-            </p>
-          </div>
-          <div className="row">
-            <b>paymentError</b>
-            <p>{paymentError}</p>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default HooksDemo

package/src/index.css

@@ -1,54 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}

package/src/main.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import { FedimintWalletProvider, setupFedimintWallet } from '../lib/contexts'
-
-setupFedimintWallet({
-  lazy: false,
-  debug: true,
-})
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <FedimintWalletProvider>
-      <App />
-    </FedimintWalletProvider>
-  </React.StrictMode>,
-)

package/src/types/images.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const content: string
-  export default content
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />