83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
/**
|
|
* rWallet applet definitions — Balance Card + Token Balance.
|
|
*/
|
|
|
|
import type { AppletDefinition, AppletLiveData } from "../../shared/applet-types";
|
|
|
|
const balanceCard: AppletDefinition = {
|
|
id: "balance-card",
|
|
label: "Balance Card",
|
|
icon: "💰",
|
|
accentColor: "#059669",
|
|
ports: [
|
|
{ name: "address-in", type: "string", direction: "input" },
|
|
{ name: "balance-out", type: "number", direction: "output" },
|
|
],
|
|
renderCompact(data: AppletLiveData): string {
|
|
const { snapshot } = data;
|
|
const ethBalance = (snapshot.ethBalance as number) || 0;
|
|
const tokenCount = (snapshot.tokenCount as number) || 0;
|
|
const usdTotal = (snapshot.usdTotal as number) || 0;
|
|
const address = (snapshot.address as string) || "";
|
|
const shortAddr = address ? `${address.slice(0, 6)}…${address.slice(-4)}` : "No address";
|
|
|
|
return `
|
|
<div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-bottom:8px;font-family:monospace">${shortAddr}</div>
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px">
|
|
<span style="font-size:11px;color:#94a3b8">ETH</span>
|
|
<span style="font-size:13px;font-weight:600">${ethBalance.toFixed(4)}</span>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:8px">
|
|
<span style="font-size:11px;color:#94a3b8">Tokens</span>
|
|
<span style="font-size:13px;font-weight:600">${tokenCount}</span>
|
|
</div>
|
|
<div style="border-top:1px solid #334155;padding-top:6px;text-align:right">
|
|
<span style="font-size:16px;font-weight:700;color:#22c55e">$${usdTotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
onInputReceived(portName, value, ctx) {
|
|
if (portName === "address-in" && typeof value === "string") {
|
|
// Address received — in a real implementation this would trigger a balance fetch
|
|
ctx.emitOutput("balance-out", 0);
|
|
}
|
|
},
|
|
};
|
|
|
|
const tokenBalance: AppletDefinition = {
|
|
id: "token-balance",
|
|
label: "Token Balance",
|
|
icon: "🪙",
|
|
accentColor: "#7c3aed",
|
|
ports: [
|
|
{ name: "token-in", type: "string", direction: "input" },
|
|
{ name: "amount-out", type: "number", direction: "output" },
|
|
],
|
|
renderCompact(data: AppletLiveData): string {
|
|
const { snapshot } = data;
|
|
const tokenName = (snapshot.tokenName as string) || "Token";
|
|
const symbol = (snapshot.symbol as string) || "???";
|
|
const balance = (snapshot.balance as number) || 0;
|
|
const usdValue = (snapshot.usdValue as number) || 0;
|
|
|
|
return `
|
|
<div style="text-align:center">
|
|
<div style="font-size:28px;margin-bottom:4px">🪙</div>
|
|
<div style="font-size:13px;font-weight:600;margin-bottom:2px">${tokenName}</div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-bottom:8px">${symbol}</div>
|
|
<div style="font-size:18px;font-weight:700">${balance.toLocaleString(undefined, { maximumFractionDigits: 6 })}</div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-top:2px">≈ $${usdValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
</div>
|
|
`;
|
|
},
|
|
onInputReceived(portName, value, ctx) {
|
|
if (portName === "token-in" && typeof value === "string") {
|
|
ctx.emitOutput("amount-out", 0);
|
|
}
|
|
},
|
|
};
|
|
|
|
export const walletApplets: AppletDefinition[] = [balanceCard, tokenBalance];
|