60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { NostrAccount } from "@lume/system";
|
|
import { getBitcoinDisplayValues } from "@lume/utils";
|
|
import { createFileRoute, redirect } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/settings/wallet")({
|
|
beforeLoad: async () => {
|
|
const wallet = await NostrAccount.loadWallet();
|
|
if (!wallet) {
|
|
throw redirect({ to: "/settings/bitcoin-connect" });
|
|
}
|
|
const balance = getBitcoinDisplayValues(wallet);
|
|
return { balance };
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { balance } = Route.useRouteContext();
|
|
|
|
const disconnect = async () => {
|
|
window.localStorage.removeItem("bc:config");
|
|
await NostrAccount.removeWallet();
|
|
|
|
return redirect({ to: "/settings/bitcoin-connect" });
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-xl mx-auto">
|
|
<div className="flex flex-col w-full gap-3">
|
|
<div className="flex flex-col w-full px-3 bg-black/5 dark:bg-white/5 rounded-xl">
|
|
<div className="flex items-center justify-between w-full gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Connection</h3>
|
|
</div>
|
|
<div className="flex justify-end w-36 shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={() => disconnect()}
|
|
className="h-8 w-max px-2.5 text-sm rounded-lg inline-flex items-center justify-center bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col w-full px-3 bg-black/5 dark:bg-white/5 rounded-xl">
|
|
<div className="flex items-center justify-between w-full gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Current Balance</h3>
|
|
</div>
|
|
<div className="flex justify-end w-36 shrink-0">
|
|
₿ {balance.bitcoinFormatted}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|