Fiat balance example and cleanup

package.json

@@ -10,23 +10,45 @@
   "preferences": [
     {
       "name": "nwcurl",
+      "title": "NWC connection details",
       "description": "Your NWC wallet connection details",
       "placeholder": "nostr+walletconnect://...",
       "type": "password",
+      "required": true
+    },
+    {
+      "name": "currency",
+      "title": "Currency",
+      "description": "You preferred currency to see amounts",
+      "type": "dropdown",
+      "data": [
+        {
+          "title": "USD",
+          "value": "USD"
+        },
+        {
+          "title": "EUR",
+          "value": "EUR"
+        },
+        {
+          "title": "GBP",
+          "value": "GBP"
+        }
+      ],
       "required": true,
-      "title": "NWC connection details"
+      "default": "USD"
     }
   ],
   "commands": [
     {
-      "name": "pay",
+      "name": "send",
       "title": "Send",
       "keywords": ["send", "pay", "wallet", "invoice", "lnurl", "lightning"],
       "subtitle": "Send to lightning address or pay lightning invoice",
       "description": "Send to lightning address or pay lightning invoice",
       "icon": "send.png",
       "mode": "view",
-      "script": "src/Pay.tsx",
+      "script": "src/Send.tsx",
       "arguments": [
         {
           "name": "input",
@@ -79,7 +101,6 @@
     "@types/react": "18.2.27",
     "eslint": "^8.51.0",
     "prettier": "^3.0.3",
-    "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "scripts": {
@@ -90,6 +111,6 @@
     "publish": "npx @raycast/api@latest publish"
   },
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "src/index.js",
   "keywords": []
 }

src/Balance.tsx

@@ -1,15 +1,27 @@
-import React, { useEffect, useState } from "react";
-import { ActionPanel, Detail, Action, showToast, Toast } from "@raycast/api";
+import "cross-fetch/polyfill";
+import { useEffect, useState } from "react";
+import { ActionPanel, Detail, Action, showToast, Toast, getPreferenceValues } from "@raycast/api";
+import { fiat } from "@getalby/lightning-tools";
 import { connectWallet } from "./wallet";
 
 export default function ShowBalance() {
   const [balance, setBalance] = useState<string | null>(null);
+  const [fiatBalance, setFiatBalance] = useState<string | null>(null);
 
   const updateBalance = async () => {
+    const preferences = getPreferenceValues<{ currency: string }>();
+    const fiatCurrency = preferences.currency;
+
     try {
       const nwc = await connectWallet(); // Connect and get the wallet instance
       const balanceInfo = await nwc.getBalance(); // Fetch the balance from the connected wallet
+      const fiatBalance = await fiat.getFormattedFiatValue({
+        satoshi: balanceInfo.balance,
+        currency: fiatCurrency,
+        locale: "en",
+      });
       setBalance(`${new Intl.NumberFormat().format(balanceInfo.balance)} sats`);
+      setFiatBalance(fiatBalance);
     } catch (error) {
       if (error instanceof Error) {
         showToast(Toast.Style.Failure, "Failed to fetch wallet balance", error.message);
@@ -24,7 +36,7 @@ export default function ShowBalance() {
 
   return (
     <Detail
-      markdown={`# Wallet Balance\nYour balance is: ${balance ?? "Loading..."}`}
+      markdown={`# Wallet Balance\nYour balance is: ${balance} (${fiatBalance})`}
       actions={
         <ActionPanel>
           <Action title="Refresh" onAction={updateBalance} />

src/CreateInvoice.tsx

@@ -1,4 +1,3 @@
-// SendInvoice.tsx
 import { setInterval } from "timers";
 import React, { useState, useRef, useEffect } from "react";
 import { Form, Detail, ActionPanel, Action, Icon, showToast, environment, Toast } from "@raycast/api";

src/ListTransactions.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { List, showToast, Toast, Icon, ActionPanel, Action, Color } from "@raycast/api";
 import { connectWallet } from "./wallet";
 
@@ -63,7 +63,9 @@ export default function Transactions() {
         <List.Item
           key={transaction.payment_hash}
           title={`${new Intl.NumberFormat().format(transaction.amount)} sats`}
-          subtitle={`${transaction.description ? `for ${transaction.description}` : ""} ${transaction.settled_at ? new Date(transaction.settled_at * 1000).toLocaleString() : ""}`}
+          subtitle={`${transaction.description ? `for ${transaction.description}` : ""} ${
+            transaction.settled_at ? new Date(transaction.settled_at * 1000).toLocaleString() : ""
+          }`}
           icon={transaction.type === "incoming" ? IncomingIcon : OutgoingIcon}
           actions={
             <ActionPanel title={`Payment ${transaction.description}`}>

src/PayInvoice.tsx

@@ -1,5 +1,5 @@
 import "cross-fetch/polyfill";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Form, ActionPanel, Action, showToast, Toast, popToRoot } from "@raycast/api";
 import { Invoice } from "@getalby/lightning-tools";
 

src/PayLightningAddress.tsx

@@ -1,5 +1,5 @@
 import "cross-fetch/polyfill";
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 import { Form, ActionPanel, Action, showToast, Toast, popToRoot, Clipboard } from "@raycast/api";
 import { LightningAddress } from "@getalby/lightning-tools";

src/Pay.tsx → src/Send.tsx

@@ -1,13 +1,13 @@
 import "cross-fetch/polyfill";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
 import { Form, ActionPanel, Action, Clipboard, getSelectedText, LaunchProps } from "@raycast/api";
 import { LightningAddress, Invoice } from "@getalby/lightning-tools";
 
 import PayInvoice from "./PayInvoice";
 import PayToLightingAddress from "./PayLightningAddress";
 
-export default function Pay(props: LaunchProps<{ arguments: Arguments.Pay }>) {
+export default function Send(props: LaunchProps<{ arguments: Arguments.Send }>) {
   const [lightningAddress, setLightningAddress] = useState("");
   const [invoice, setInvoice] = useState("");
   const [input, setInput] = useState(props.arguments.input);