1072 lines
38 KiB
TypeScript
1072 lines
38 KiB
TypeScript
/**
|
|
* <folk-wallet-viewer> — multichain Safe wallet visualization.
|
|
*
|
|
* Enter a Safe address to see balances across chains, transfer history,
|
|
* and flow visualizations. Authenticated users can link external wallets
|
|
* via EIP-6963 + SIWE.
|
|
*/
|
|
|
|
interface ChainInfo {
|
|
chainId: string;
|
|
name: string;
|
|
prefix: string;
|
|
color: string;
|
|
}
|
|
|
|
interface BalanceItem {
|
|
tokenAddress: string | null;
|
|
token: { name: string; symbol: string; decimals: number } | null;
|
|
balance: string;
|
|
fiatBalance: string;
|
|
fiatConversion: string;
|
|
}
|
|
|
|
interface LinkedWallet {
|
|
id: string;
|
|
address: string;
|
|
type: "eoa" | "safe";
|
|
label: string;
|
|
providerName?: string;
|
|
providerRdns?: string;
|
|
safeInfo?: {
|
|
threshold: number;
|
|
ownerCount: number;
|
|
isEncryptIdOwner: boolean;
|
|
};
|
|
}
|
|
|
|
interface DiscoveredProvider {
|
|
uuid: string;
|
|
name: string;
|
|
icon: string;
|
|
rdns: string;
|
|
}
|
|
|
|
const CHAIN_COLORS: Record<string, string> = {
|
|
"1": "#627eea",
|
|
"10": "#ff0420",
|
|
"100": "#04795b",
|
|
"137": "#8247e5",
|
|
"8453": "#0052ff",
|
|
"42161": "#28a0f0",
|
|
"42220": "#35d07f",
|
|
"43114": "#e84142",
|
|
"56": "#f3ba2f",
|
|
"324": "#8c8dfc",
|
|
"11155111": "#f59e0b",
|
|
"84532": "#f59e0b",
|
|
};
|
|
|
|
const CHAIN_NAMES: Record<string, string> = {
|
|
"1": "Ethereum", "10": "Optimism", "100": "Gnosis", "137": "Polygon",
|
|
"8453": "Base", "42161": "Arbitrum", "42220": "Celo", "43114": "Avalanche",
|
|
"56": "BSC", "324": "zkSync",
|
|
};
|
|
|
|
const EXAMPLE_WALLETS = [
|
|
{ name: "TEC Commons Fund", address: "0x29567BdBcC92aCF37AC6B56B69180857bB69f7D1", type: "Safe" },
|
|
{ name: "Gitcoin Treasury", address: "0xde21F729137C5Af1b01d73aF1dC21eFfa2B8a0d6", type: "Safe" },
|
|
{ name: "Vitalik.eth", address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", type: "EOA" },
|
|
];
|
|
|
|
class FolkWalletViewer extends HTMLElement {
|
|
private shadow: ShadowRoot;
|
|
private address = "";
|
|
private detectedChains: ChainInfo[] = [];
|
|
private selectedChain: string | null = null;
|
|
private balances: BalanceItem[] = [];
|
|
private loading = false;
|
|
private error = "";
|
|
private isDemo = false;
|
|
private walletType: "safe" | "eoa" | "" = "";
|
|
private includeTestnets = false;
|
|
|
|
// Linked wallets state
|
|
private isAuthenticated = false;
|
|
private passKeyEOA = "";
|
|
private linkedWallets: LinkedWallet[] = [];
|
|
private showProviderPicker = false;
|
|
private discoveredProviders: DiscoveredProvider[] = [];
|
|
private linkingInProgress = false;
|
|
private linkError = "";
|
|
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
const space = this.getAttribute("space") || "";
|
|
if (space === "demo") {
|
|
this.loadDemoData();
|
|
return;
|
|
}
|
|
// Check URL params for initial address
|
|
const params = new URLSearchParams(window.location.search);
|
|
this.address = params.get("address") || "";
|
|
this.checkAuthState();
|
|
this.render();
|
|
if (this.address) this.detectChains();
|
|
}
|
|
|
|
private checkAuthState() {
|
|
try {
|
|
const session = localStorage.getItem("encryptid_session");
|
|
if (session) {
|
|
const parsed = JSON.parse(session);
|
|
if (parsed.claims?.exp > Math.floor(Date.now() / 1000)) {
|
|
this.isAuthenticated = true;
|
|
this.passKeyEOA = parsed.claims?.eid?.walletAddress || "";
|
|
this.loadLinkedWallets();
|
|
}
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
private getAuthToken(): string | null {
|
|
try {
|
|
const session = localStorage.getItem("encryptid_session");
|
|
if (!session) return null;
|
|
const parsed = JSON.parse(session);
|
|
return parsed.accessToken || null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
private async loadLinkedWallets() {
|
|
const token = this.getAuthToken();
|
|
if (!token) return;
|
|
|
|
try {
|
|
const res = await fetch("/encryptid/api/wallet-link/list", {
|
|
headers: { "Authorization": `Bearer ${token}` },
|
|
});
|
|
if (!res.ok) return;
|
|
|
|
const data = await res.json();
|
|
// Server decrypts at rest and returns entry data directly
|
|
this.linkedWallets = (data.wallets || []).map((w: any) => ({
|
|
id: w.id,
|
|
address: w.address || "",
|
|
type: w.type || "eoa",
|
|
label: w.label || "",
|
|
providerName: w.providerName,
|
|
providerRdns: w.providerRdns,
|
|
safeInfo: w.safeInfo,
|
|
}));
|
|
this.render();
|
|
} catch {}
|
|
}
|
|
|
|
private loadDemoData() {
|
|
this.isDemo = true;
|
|
this.address = "0x29567BdBcC92aCF37AC6B56B69180857bB69f7D1";
|
|
this.detectedChains = [
|
|
{ chainId: "1", name: "Ethereum", prefix: "eth", color: "#627eea" },
|
|
{ chainId: "10", name: "Optimism", prefix: "oeth", color: "#ff0420" },
|
|
{ chainId: "100", name: "Gnosis", prefix: "gno", color: "#04795b" },
|
|
{ chainId: "137", name: "Polygon", prefix: "pol", color: "#8247e5" },
|
|
{ chainId: "8453", name: "Base", prefix: "base", color: "#0052ff" },
|
|
{ chainId: "42161", name: "Arbitrum", prefix: "arb1", color: "#28a0f0" },
|
|
{ chainId: "43114", name: "Avalanche", prefix: "avax", color: "#e84142" },
|
|
];
|
|
this.selectedChain = "100";
|
|
this.balances = [
|
|
{ tokenAddress: null, token: { name: "xDAI", symbol: "xDAI", decimals: 18 }, balance: "45230000000000000000000", fiatBalance: "45230", fiatConversion: "1" },
|
|
{ tokenAddress: "0x5dF8339c5E282ee48c0c7cE252A7842F74e378b2", token: { name: "Token Engineering Commons", symbol: "TEC", decimals: 18 }, balance: "1250000000000000000000000", fiatBalance: "12500", fiatConversion: "0.01" },
|
|
{ tokenAddress: "0x6A023CCd1ff6F2045C3309768eAd9E68F978f6e1", token: { name: "Wrapped Ether", symbol: "WETH", decimals: 18 }, balance: "8500000000000000000", fiatBalance: "28050", fiatConversion: "3300" },
|
|
{ tokenAddress: "0xDDAfbb505ad214D7b80b1f830fcCc89B60fb7A83", token: { name: "USD Coin", symbol: "USDC", decimals: 6 }, balance: "15750000000", fiatBalance: "15750", fiatConversion: "1" },
|
|
{ tokenAddress: "0x4f4F9b8D5B4d0Dc10506e5551B0513B61fD59e75", token: { name: "Giveth", symbol: "GIV", decimals: 18 }, balance: "500000000000000000000000", fiatBalance: "2500", fiatConversion: "0.005" },
|
|
];
|
|
this.render();
|
|
}
|
|
|
|
private getApiBase(): string {
|
|
const path = window.location.pathname;
|
|
const match = path.match(/^(\/[^/]+)?\/rwallet/);
|
|
return match ? match[0] : "";
|
|
}
|
|
|
|
private async detectChains() {
|
|
if (this.isDemo) return;
|
|
if (!this.address || !/^0x[a-fA-F0-9]{40}$/.test(this.address)) {
|
|
this.error = "Please enter a valid Ethereum address (0x...)";
|
|
this.render();
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
this.error = "";
|
|
this.detectedChains = [];
|
|
this.balances = [];
|
|
this.walletType = "";
|
|
this.render();
|
|
|
|
try {
|
|
const base = this.getApiBase();
|
|
const tn = this.includeTestnets ? "?testnets=true" : "";
|
|
|
|
// Try Safe detection first
|
|
const res = await fetch(`${base}/api/safe/detect/${this.address}${tn}`);
|
|
const data = await res.json();
|
|
|
|
this.detectedChains = (data.chains || []).map((c: any) => ({
|
|
...c,
|
|
color: CHAIN_COLORS[c.chainId] || "#888",
|
|
}));
|
|
|
|
if (this.detectedChains.length > 0) {
|
|
this.walletType = "safe";
|
|
this.selectedChain = this.detectedChains[0].chainId;
|
|
await this.loadBalances();
|
|
} else {
|
|
// Fall back to EOA detection (any wallet)
|
|
const eoaRes = await fetch(`${base}/api/eoa/detect/${this.address}${tn}`);
|
|
const eoaData = await eoaRes.json();
|
|
|
|
this.detectedChains = (eoaData.chains || []).map((c: any) => ({
|
|
...c,
|
|
color: CHAIN_COLORS[c.chainId] || "#888",
|
|
}));
|
|
|
|
if (this.detectedChains.length > 0) {
|
|
this.walletType = "eoa";
|
|
this.selectedChain = this.detectedChains[0].chainId;
|
|
await this.loadBalances();
|
|
} else {
|
|
this.error = "No balances found for this address on any supported chain.";
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.error = "Failed to detect wallet. Check the address and try again.";
|
|
}
|
|
|
|
this.loading = false;
|
|
this.render();
|
|
}
|
|
|
|
private async loadBalances() {
|
|
if (this.isDemo) return;
|
|
if (!this.selectedChain) return;
|
|
try {
|
|
const base = this.getApiBase();
|
|
const apiPath = this.walletType === "safe"
|
|
? `${base}/api/safe/${this.selectedChain}/${this.address}/balances`
|
|
: `${base}/api/eoa/${this.selectedChain}/${this.address}/balances`;
|
|
const res = await fetch(apiPath);
|
|
if (res.ok) {
|
|
this.balances = await res.json();
|
|
}
|
|
} catch {
|
|
this.balances = [];
|
|
}
|
|
}
|
|
|
|
private formatBalance(balance: string, decimals: number): string {
|
|
const val = Number(balance) / Math.pow(10, decimals);
|
|
if (val >= 1000000) return `${(val / 1000000).toFixed(2)}M`;
|
|
if (val >= 1000) return `${(val / 1000).toFixed(2)}K`;
|
|
if (val >= 1) return val.toFixed(2);
|
|
if (val >= 0.0001) return val.toFixed(4);
|
|
return val.toExponential(2);
|
|
}
|
|
|
|
private formatUSD(val: string): string {
|
|
const n = parseFloat(val);
|
|
if (isNaN(n) || n === 0) return "$0";
|
|
if (n >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
|
|
if (n >= 1000) return `$${(n / 1000).toFixed(1)}K`;
|
|
return `$${n.toFixed(2)}`;
|
|
}
|
|
|
|
private shortenAddress(addr: string): string {
|
|
return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
|
|
}
|
|
|
|
private handleSubmit(e: Event) {
|
|
e.preventDefault();
|
|
const input = this.shadow.querySelector("#address-input") as HTMLInputElement;
|
|
if (input) {
|
|
this.address = input.value.trim();
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("address", this.address);
|
|
window.history.replaceState({}, "", url.toString());
|
|
this.detectChains();
|
|
}
|
|
}
|
|
|
|
private async handleChainSelect(chainId: string) {
|
|
this.selectedChain = chainId;
|
|
if (this.isDemo) {
|
|
this.render();
|
|
return;
|
|
}
|
|
this.loading = true;
|
|
this.render();
|
|
await this.loadBalances();
|
|
this.loading = false;
|
|
this.render();
|
|
}
|
|
|
|
private hasData(): boolean {
|
|
return this.detectedChains.length > 0;
|
|
}
|
|
|
|
// ── EIP-6963 Provider Discovery ──
|
|
|
|
private sanitizeIconUri(uri: string): string {
|
|
if (!uri) return "";
|
|
// Allow https: URLs and safe data: image types (no SVG — can contain scripts)
|
|
if (/^https:\/\//i.test(uri)) return uri;
|
|
if (/^data:image\/(png|jpeg|gif|webp);base64,/i.test(uri)) return uri;
|
|
return ""; // Block javascript:, data:image/svg+xml, etc.
|
|
}
|
|
|
|
private startProviderDiscovery() {
|
|
this.discoveredProviders = [];
|
|
this.showProviderPicker = true;
|
|
this.linkError = "";
|
|
this.render();
|
|
|
|
const handler = (e: Event) => {
|
|
const detail = (e as CustomEvent).detail;
|
|
if (!detail?.info?.uuid || !detail?.provider) return;
|
|
const exists = this.discoveredProviders.some(p => p.uuid === detail.info.uuid);
|
|
if (!exists) {
|
|
this.discoveredProviders.push({
|
|
uuid: detail.info.uuid,
|
|
name: detail.info.name,
|
|
icon: this.sanitizeIconUri(detail.info.icon || ""),
|
|
rdns: detail.info.rdns,
|
|
});
|
|
this.render();
|
|
}
|
|
};
|
|
|
|
window.addEventListener("eip6963:announceProvider", handler);
|
|
window.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
|
|
// Store handler for cleanup
|
|
(this as any)._eip6963Handler = handler;
|
|
|
|
// If no providers found after 2s, show message
|
|
setTimeout(() => {
|
|
if (this.discoveredProviders.length === 0 && this.showProviderPicker) {
|
|
this.linkError = "No browser wallets detected. Install MetaMask or another EIP-6963 compatible wallet.";
|
|
this.render();
|
|
}
|
|
}, 2000);
|
|
}
|
|
|
|
private stopProviderDiscovery() {
|
|
const handler = (this as any)._eip6963Handler;
|
|
if (handler) {
|
|
window.removeEventListener("eip6963:announceProvider", handler);
|
|
delete (this as any)._eip6963Handler;
|
|
}
|
|
this.showProviderPicker = false;
|
|
this.discoveredProviders = [];
|
|
this.linkError = "";
|
|
}
|
|
|
|
private async handleProviderSelect(uuid: string) {
|
|
const provider = this.discoveredProviders.find(p => p.uuid === uuid);
|
|
if (!provider) return;
|
|
|
|
this.linkingInProgress = true;
|
|
this.linkError = "";
|
|
this.render();
|
|
|
|
try {
|
|
// Get the actual EIP-1193 provider reference
|
|
let eip1193Provider: any = null;
|
|
const getProvider = new Promise<any>((resolve) => {
|
|
const handler = (e: Event) => {
|
|
const detail = (e as CustomEvent).detail;
|
|
if (detail?.info?.uuid === uuid) {
|
|
window.removeEventListener("eip6963:announceProvider", handler);
|
|
resolve(detail.provider);
|
|
}
|
|
};
|
|
window.addEventListener("eip6963:announceProvider", handler);
|
|
window.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
setTimeout(() => resolve(null), 3000);
|
|
});
|
|
eip1193Provider = await getProvider;
|
|
if (!eip1193Provider) throw new Error("Could not get wallet provider");
|
|
|
|
// 1. Request accounts
|
|
const accounts = await eip1193Provider.request({ method: "eth_requestAccounts" });
|
|
if (!accounts || accounts.length === 0) throw new Error("No accounts returned");
|
|
const walletAddress = accounts[0] as string;
|
|
|
|
// 2. Get nonce from server
|
|
const token = this.getAuthToken();
|
|
if (!token) throw new Error("Not authenticated");
|
|
|
|
const nonceRes = await fetch("/encryptid/api/wallet-link/nonce", {
|
|
method: "POST",
|
|
headers: { "Authorization": `Bearer ${token}`, "Content-Type": "application/json" },
|
|
});
|
|
if (!nonceRes.ok) throw new Error("Failed to get nonce");
|
|
const { nonce } = await nonceRes.json();
|
|
|
|
// 3. Build SIWE message
|
|
const domain = window.location.host;
|
|
const origin = window.location.origin;
|
|
const issuedAt = new Date().toISOString();
|
|
const siweMessage = [
|
|
`${domain} wants you to sign in with your Ethereum account:`,
|
|
walletAddress,
|
|
"",
|
|
"Link this wallet to your EncryptID identity",
|
|
"",
|
|
`URI: ${origin}`,
|
|
`Version: 1`,
|
|
`Chain ID: 1`,
|
|
`Nonce: ${nonce}`,
|
|
`Issued At: ${issuedAt}`,
|
|
].join("\n");
|
|
|
|
// 4. Sign with external wallet
|
|
const signature = await eip1193Provider.request({
|
|
method: "personal_sign",
|
|
params: [siweMessage, walletAddress],
|
|
});
|
|
|
|
// 5. Hash the address for dedup (salted with user ID from session)
|
|
const addressHash = await this.hashAddress(walletAddress);
|
|
|
|
// 6. Build entry data — server encrypts at rest with AES-256-GCM
|
|
const entry = {
|
|
address: walletAddress,
|
|
type: "eoa",
|
|
label: provider.name,
|
|
providerRdns: provider.rdns,
|
|
providerName: provider.name,
|
|
};
|
|
|
|
// 7. Verify with server (server handles encryption at rest)
|
|
const verifyRes = await fetch("/encryptid/api/wallet-link/verify", {
|
|
method: "POST",
|
|
headers: {
|
|
"Authorization": `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
message: siweMessage,
|
|
signature,
|
|
addressHash,
|
|
walletType: "eoa",
|
|
entry,
|
|
}),
|
|
});
|
|
|
|
if (!verifyRes.ok) {
|
|
const err = await verifyRes.json();
|
|
throw new Error(err.error || "Verification failed");
|
|
}
|
|
|
|
const result = await verifyRes.json();
|
|
|
|
// 8. Add to local state
|
|
const newWallet: LinkedWallet = {
|
|
id: result.id,
|
|
address: walletAddress,
|
|
type: "eoa",
|
|
label: provider.name,
|
|
providerName: provider.name,
|
|
providerRdns: provider.rdns,
|
|
};
|
|
this.linkedWallets.push(newWallet);
|
|
|
|
this.stopProviderDiscovery();
|
|
} catch (err: any) {
|
|
this.linkError = err?.message || "Failed to link wallet";
|
|
}
|
|
|
|
this.linkingInProgress = false;
|
|
this.render();
|
|
}
|
|
|
|
private async handleUnlinkWallet(id: string) {
|
|
const token = this.getAuthToken();
|
|
if (!token) return;
|
|
|
|
try {
|
|
const res = await fetch(`/encryptid/api/wallet-link/${id}`, {
|
|
method: "DELETE",
|
|
headers: { "Authorization": `Bearer ${token}` },
|
|
});
|
|
if (res.ok) {
|
|
this.linkedWallets = this.linkedWallets.filter(w => w.id !== id);
|
|
this.render();
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
private async handleViewLinkedWallet(address: string) {
|
|
this.address = address;
|
|
const input = this.shadow.querySelector("#address-input") as HTMLInputElement;
|
|
if (input) input.value = address;
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("address", address);
|
|
window.history.replaceState({}, "", url.toString());
|
|
await this.detectChains();
|
|
}
|
|
|
|
private async hashAddress(address: string): Promise<string> {
|
|
// Salt with user ID to prevent cross-user address correlation
|
|
const session = localStorage.getItem("encryptid_session");
|
|
const userId = session ? (JSON.parse(session).claims?.sub || "") : "";
|
|
const normalized = userId + ":" + address.toLowerCase();
|
|
const encoded = new TextEncoder().encode(normalized);
|
|
const hash = await crypto.subtle.digest("SHA-256", encoded);
|
|
const bytes = new Uint8Array(hash);
|
|
return btoa(String.fromCharCode(...bytes))
|
|
.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
|
|
}
|
|
|
|
// ── Render Methods ──
|
|
|
|
private renderStyles(): string {
|
|
return `
|
|
<style>
|
|
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
|
|
* { box-sizing: border-box; }
|
|
|
|
/* ── Hero ── */
|
|
.hero {
|
|
text-align: center; padding: 32px 16px 24px;
|
|
border-bottom: 1px solid var(--rs-border-subtle); margin-bottom: 24px;
|
|
}
|
|
.hero-title {
|
|
font-size: 28px; font-weight: 700; margin: 0 0 6px;
|
|
background: linear-gradient(135deg, #00d4ff, #4ade80);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero-subtitle { font-size: 14px; color: var(--rs-text-secondary); margin: 0 0 20px; }
|
|
|
|
/* ── Address bar ── */
|
|
.address-bar { display: flex; gap: 8px; margin-bottom: 12px; max-width: 640px; margin-left: auto; margin-right: auto; }
|
|
.address-bar input {
|
|
flex: 1; padding: 12px 16px; border-radius: 10px;
|
|
border: 1px solid var(--rs-input-border); background: var(--rs-bg-surface); color: var(--rs-text-primary);
|
|
font-family: monospace; font-size: 14px;
|
|
}
|
|
.address-bar input:focus { border-color: #00d4ff; outline: none; box-shadow: 0 0 0 2px rgba(0,212,255,0.15); }
|
|
.address-bar button {
|
|
padding: 12px 24px; border-radius: 10px; border: none;
|
|
background: linear-gradient(135deg, #00d4ff, #00b8d9); color: #000;
|
|
font-weight: 600; cursor: pointer; font-size: 14px; transition: opacity 0.2s;
|
|
}
|
|
.address-bar button:hover { opacity: 0.9; }
|
|
|
|
/* ── Controls row ── */
|
|
.controls-row {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
max-width: 640px; margin: 0 auto 24px; flex-wrap: wrap; gap: 8px;
|
|
}
|
|
.testnet-toggle {
|
|
display: flex; align-items: center; gap: 8px;
|
|
cursor: pointer; user-select: none; font-size: 13px; color: var(--rs-text-secondary);
|
|
}
|
|
.testnet-toggle:hover { color: var(--rs-text-primary); }
|
|
.toggle-track {
|
|
width: 34px; height: 18px; border-radius: 9px; background: var(--rs-border);
|
|
position: relative; transition: background 0.2s;
|
|
}
|
|
.testnet-toggle.active .toggle-track { background: #f59e0b; }
|
|
.toggle-thumb {
|
|
width: 14px; height: 14px; border-radius: 50%; background: var(--rs-text-muted);
|
|
position: absolute; top: 2px; left: 2px; transition: all 0.2s;
|
|
}
|
|
.testnet-toggle.active .toggle-thumb { left: 18px; background: #fff; }
|
|
.wallet-badge {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.wallet-badge.safe { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
|
|
.wallet-badge.eoa { background: rgba(0,212,255,0.12); color: #00d4ff; border: 1px solid rgba(0,212,255,0.25); }
|
|
.wallet-badge.encryptid { background: rgba(168,85,247,0.12); color: #a855f7; border: 1px solid rgba(168,85,247,0.25); }
|
|
|
|
/* ── My Wallets section ── */
|
|
.my-wallets {
|
|
max-width: 640px; margin: 0 auto 24px;
|
|
background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 12px;
|
|
padding: 16px;
|
|
}
|
|
.my-wallets-header {
|
|
display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
|
|
}
|
|
.my-wallets-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--rs-text-secondary); }
|
|
.link-wallet-btn {
|
|
padding: 6px 14px; border-radius: 8px; border: 1px dashed var(--rs-border);
|
|
background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
.link-wallet-btn:hover { border-color: #00d4ff; color: #00d4ff; background: rgba(0,212,255,0.05); }
|
|
.wallet-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.wallet-item {
|
|
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
|
|
border-radius: 8px; background: var(--rs-bg-hover); cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.wallet-item:hover { background: var(--rs-bg-surface); box-shadow: 0 0 0 1px var(--rs-border); }
|
|
.wallet-item-info { flex: 1; min-width: 0; }
|
|
.wallet-item-label { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); }
|
|
.wallet-item-addr { font-size: 11px; color: var(--rs-text-muted); font-family: monospace; }
|
|
.wallet-item-actions { display: flex; gap: 4px; }
|
|
.wallet-item-actions button {
|
|
padding: 4px 8px; border-radius: 4px; border: none; cursor: pointer; font-size: 11px;
|
|
background: transparent; color: var(--rs-text-muted); transition: all 0.15s;
|
|
}
|
|
.wallet-item-actions button:hover { color: var(--rs-text-primary); background: var(--rs-bg-surface); }
|
|
.wallet-item-actions .unlink-btn:hover { color: var(--rs-error); }
|
|
|
|
/* ── Provider picker ── */
|
|
.provider-picker {
|
|
margin-top: 12px; padding: 12px; border-radius: 8px;
|
|
background: var(--rs-bg-hover); border: 1px solid var(--rs-border-subtle);
|
|
}
|
|
.provider-picker-title { font-size: 12px; color: var(--rs-text-secondary); margin-bottom: 8px; }
|
|
.provider-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.provider-item {
|
|
display: flex; align-items: center; gap: 8px; padding: 8px 14px;
|
|
border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface);
|
|
cursor: pointer; transition: all 0.2s; font-size: 13px; color: var(--rs-text-primary);
|
|
}
|
|
.provider-item:hover { border-color: #00d4ff; background: rgba(0,212,255,0.05); }
|
|
.provider-item img { width: 20px; height: 20px; border-radius: 4px; }
|
|
.provider-cancel {
|
|
margin-top: 8px; padding: 4px 10px; border-radius: 6px; border: none;
|
|
background: transparent; color: var(--rs-text-muted); cursor: pointer; font-size: 12px;
|
|
}
|
|
.provider-cancel:hover { color: var(--rs-text-primary); }
|
|
|
|
/* ── Supported chains ── */
|
|
.supported-chains {
|
|
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
|
|
margin-bottom: 28px; max-width: 640px; margin-left: auto; margin-right: auto;
|
|
}
|
|
.supported-chain {
|
|
display: flex; align-items: center; gap: 5px;
|
|
padding: 4px 10px; border-radius: 6px; background: var(--rs-bg-surface);
|
|
border: 1px solid var(--rs-border-subtle); font-size: 12px; color: var(--rs-text-secondary);
|
|
}
|
|
.supported-chain .dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
|
|
/* ── Feature cards ── */
|
|
.features {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px; margin-bottom: 28px;
|
|
}
|
|
.feature-card {
|
|
background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 12px;
|
|
padding: 20px; text-align: center; transition: border-color 0.2s;
|
|
}
|
|
.feature-card:hover { border-color: var(--rs-border-strong); }
|
|
.feature-icon { font-size: 28px; margin-bottom: 10px; }
|
|
.feature-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--rs-text-primary); }
|
|
.feature-card p { font-size: 12px; color: var(--rs-text-secondary); margin: 0; line-height: 1.5; }
|
|
|
|
/* ── Example wallets ── */
|
|
.examples {
|
|
max-width: 640px; margin: 0 auto 20px;
|
|
}
|
|
.examples-label { font-size: 11px; color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
|
|
.example-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.example-item {
|
|
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
|
|
background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 10px;
|
|
cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.example-item:hover { border-color: #00d4ff; background: var(--rs-bg-hover); }
|
|
.example-name { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); }
|
|
.example-addr { font-size: 11px; color: var(--rs-text-muted); font-family: monospace; }
|
|
.example-type {
|
|
margin-left: auto; font-size: 10px; font-weight: 600;
|
|
padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
|
|
}
|
|
.example-type.safe { background: rgba(74,222,128,0.1); color: #4ade80; }
|
|
.example-type.eoa { background: rgba(0,212,255,0.1); color: #00d4ff; }
|
|
|
|
/* ── Dashboard: chains ── */
|
|
.chains { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
|
.chain-btn {
|
|
padding: 6px 14px; border-radius: 8px; border: 2px solid var(--rs-border);
|
|
background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 13px;
|
|
display: flex; align-items: center; gap: 6px; transition: all 0.2s;
|
|
}
|
|
.chain-btn:hover { border-color: var(--rs-border-strong); }
|
|
.chain-btn.active { border-color: var(--chain-color); background: var(--rs-bg-hover); }
|
|
.chain-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
|
|
/* ── Dashboard: stats ── */
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
|
.stat-card {
|
|
background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 10px;
|
|
padding: 14px; text-align: center;
|
|
}
|
|
.stat-label { font-size: 11px; color: var(--rs-text-secondary); text-transform: uppercase; margin-bottom: 6px; }
|
|
.stat-value { font-size: 20px; font-weight: 700; color: #00d4ff; }
|
|
|
|
/* ── Dashboard: balance table ── */
|
|
.balance-table { width: 100%; border-collapse: collapse; }
|
|
.balance-table th {
|
|
text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--rs-border);
|
|
color: var(--rs-text-secondary); font-size: 11px; text-transform: uppercase;
|
|
}
|
|
.balance-table td { padding: 10px 8px; border-bottom: 1px solid var(--rs-border-subtle); }
|
|
.balance-table tr:hover td { background: var(--rs-bg-hover); }
|
|
.token-symbol { font-weight: 600; color: var(--rs-text-primary); }
|
|
.token-name { font-size: 12px; color: var(--rs-text-secondary); }
|
|
.amount-cell { text-align: right; font-family: monospace; }
|
|
.fiat { color: var(--rs-success); }
|
|
|
|
/* ── States ── */
|
|
.empty { text-align: center; color: var(--rs-text-muted); padding: 40px; }
|
|
.loading { text-align: center; color: var(--rs-text-secondary); padding: 40px; }
|
|
.loading .spinner {
|
|
display: inline-block; width: 20px; height: 20px;
|
|
border: 2px solid var(--rs-border); border-top-color: #00d4ff; border-radius: 50%;
|
|
animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.error {
|
|
text-align: center; color: var(--rs-error); padding: 16px;
|
|
background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.2);
|
|
border-radius: 10px; margin-bottom: 16px;
|
|
}
|
|
.link-error {
|
|
color: var(--rs-error); font-size: 12px; margin-top: 8px;
|
|
padding: 6px 10px; background: rgba(239,83,80,0.08); border-radius: 6px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-title { font-size: 22px; }
|
|
.balance-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
.address-bar { flex-wrap: wrap; }
|
|
.address-bar input { min-width: 0; }
|
|
.chains { flex-wrap: wrap; }
|
|
.features { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.features { grid-template-columns: 1fr; }
|
|
}
|
|
</style>`;
|
|
}
|
|
|
|
private renderHero(): string {
|
|
if (this.hasData()) return "";
|
|
return `
|
|
<div class="hero">
|
|
<div class="hero-title">rWallet</div>
|
|
<div class="hero-subtitle">Multichain treasury visualization — Safe multisigs and EOA wallets</div>
|
|
</div>`;
|
|
}
|
|
|
|
private renderMyWallets(): string {
|
|
if (!this.isAuthenticated) return "";
|
|
|
|
const hasWallets = this.passKeyEOA || this.linkedWallets.length > 0;
|
|
|
|
return `
|
|
<div class="my-wallets">
|
|
<div class="my-wallets-header">
|
|
<div class="my-wallets-title">My Wallets</div>
|
|
<button class="link-wallet-btn" id="link-wallet-btn">+ Link Wallet</button>
|
|
</div>
|
|
<div class="wallet-list">
|
|
${this.passKeyEOA ? `
|
|
<div class="wallet-item" data-view-address="${this.esc(this.passKeyEOA)}">
|
|
<div class="wallet-item-info">
|
|
<div class="wallet-item-label">
|
|
<span class="wallet-badge encryptid">EncryptID</span>
|
|
Passkey EOA
|
|
</div>
|
|
<div class="wallet-item-addr">${this.shortenAddress(this.passKeyEOA)}</div>
|
|
</div>
|
|
</div>
|
|
` : ""}
|
|
${this.linkedWallets.map(w => `
|
|
<div class="wallet-item" data-view-address="${this.esc(w.address)}">
|
|
<div class="wallet-item-info">
|
|
<div class="wallet-item-label">
|
|
<span class="wallet-badge ${w.type}">${this.esc(w.providerName || w.type.toUpperCase())}</span>
|
|
${this.esc(w.label)}
|
|
${w.safeInfo && !w.safeInfo.isEncryptIdOwner ? '<span style="font-size:10px;color:var(--rs-text-muted)">(not co-signer)</span>' : ""}
|
|
</div>
|
|
<div class="wallet-item-addr">${this.shortenAddress(w.address)}</div>
|
|
</div>
|
|
<div class="wallet-item-actions">
|
|
<button class="unlink-btn" data-unlink="${this.esc(w.id)}" title="Unlink wallet">✕</button>
|
|
</div>
|
|
</div>
|
|
`).join("")}
|
|
${!hasWallets ? '<div style="font-size:12px;color:var(--rs-text-muted);padding:8px;">No wallets linked yet. Click "Link Wallet" to connect a browser wallet.</div>' : ""}
|
|
</div>
|
|
${this.renderProviderPicker()}
|
|
</div>`;
|
|
}
|
|
|
|
private renderProviderPicker(): string {
|
|
if (!this.showProviderPicker) return "";
|
|
|
|
return `
|
|
<div class="provider-picker">
|
|
<div class="provider-picker-title">
|
|
${this.linkingInProgress ? '<span class="spinner" style="width:14px;height:14px;border-width:2px;display:inline-block;vertical-align:middle;margin-right:6px"></span> Connecting...' : 'Select a wallet to link:'}
|
|
</div>
|
|
${!this.linkingInProgress ? `
|
|
<div class="provider-list">
|
|
${this.discoveredProviders.map(p => `
|
|
<div class="provider-item" data-provider-uuid="${this.esc(p.uuid)}">
|
|
${p.icon ? `<img src="${this.esc(p.icon)}" alt="" onerror="this.style.display='none'">` : ""}
|
|
${this.esc(p.name)}
|
|
</div>
|
|
`).join("")}
|
|
${this.discoveredProviders.length === 0 ? '<div style="font-size:12px;color:var(--rs-text-muted);padding:4px;">Searching for wallets...</div>' : ""}
|
|
</div>
|
|
<button class="provider-cancel" id="provider-cancel">Cancel</button>
|
|
` : ""}
|
|
${this.linkError ? `<div class="link-error">${this.esc(this.linkError)}</div>` : ""}
|
|
</div>`;
|
|
}
|
|
|
|
private renderSupportedChains(): string {
|
|
if (this.hasData() || this.loading) return "";
|
|
return `
|
|
<div class="supported-chains">
|
|
${Object.entries(CHAIN_NAMES).map(([id, name]) => `
|
|
<div class="supported-chain">
|
|
<div class="dot" style="background: ${CHAIN_COLORS[id]}"></div>
|
|
${name}
|
|
</div>
|
|
`).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
private renderFeatures(): string {
|
|
if (this.hasData() || this.loading) return "";
|
|
return `
|
|
<div class="features">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⛓</div>
|
|
<h3>Safe Multisig</h3>
|
|
<p>Visualize Gnosis Safe balances, signers, and thresholds across all chains.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔗</div>
|
|
<h3>Any Wallet (EOA)</h3>
|
|
<p>Paste any 0x address — works for regular wallets too, not just Safes.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🌐</div>
|
|
<h3>10+ Chains</h3>
|
|
<p>Ethereum, Base, Polygon, Gnosis, Arbitrum, Optimism, and more in one view.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔒</div>
|
|
<h3>No Custody Risk</h3>
|
|
<p>Read-only. rWallet never holds keys or moves funds — just visualizes.</p>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
private renderExamples(): string {
|
|
if (this.hasData() || this.loading) return "";
|
|
return `
|
|
<div class="examples">
|
|
<div class="examples-label">Try an example</div>
|
|
<div class="example-list">
|
|
${EXAMPLE_WALLETS.map((w) => `
|
|
<div class="example-item" data-address="${w.address}">
|
|
<div>
|
|
<div class="example-name">${w.name}</div>
|
|
<div class="example-addr">${w.address.slice(0, 6)}...${w.address.slice(-4)}</div>
|
|
</div>
|
|
<div class="example-type ${w.type.toLowerCase()}">${w.type}</div>
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
private renderDashboard(): string {
|
|
if (!this.hasData()) return "";
|
|
const totalUSD = this.balances.reduce((sum, b) => sum + parseFloat(b.fiatBalance || "0"), 0);
|
|
|
|
return `
|
|
<div class="chains">
|
|
${this.detectedChains.map((ch) => `
|
|
<div class="chain-btn ${this.selectedChain === ch.chainId ? "active" : ""}"
|
|
data-chain="${ch.chainId}" style="--chain-color: ${ch.color}">
|
|
<div class="chain-dot" style="background: ${ch.color}"></div>
|
|
${ch.name}
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Value</div>
|
|
<div class="stat-value">${this.formatUSD(String(totalUSD))}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Tokens</div>
|
|
<div class="stat-value">${this.balances.filter((b) => parseFloat(b.fiatBalance || "0") > 0 || BigInt(b.balance || "0") > 0n).length}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Chains</div>
|
|
<div class="stat-value">${this.detectedChains.length}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Address</div>
|
|
<div class="stat-value" style="font-size:13px;font-family:monospace">${this.shortenAddress(this.address)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
${this.balances.length > 0 ? `
|
|
<table class="balance-table">
|
|
<thead>
|
|
<tr><th>Token</th><th class="amount-cell">Balance</th><th class="amount-cell">USD Value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.balances
|
|
.filter((b) => parseFloat(b.fiatBalance || "0") > 0.01 || BigInt(b.balance || "0") > 0n)
|
|
.sort((a, b) => {
|
|
const fiatDiff = parseFloat(b.fiatBalance || "0") - parseFloat(a.fiatBalance || "0");
|
|
if (fiatDiff !== 0) return fiatDiff;
|
|
return Number(BigInt(b.balance || "0") - BigInt(a.balance || "0"));
|
|
})
|
|
.map((b) => `
|
|
<tr>
|
|
<td>
|
|
<span class="token-symbol">${this.esc(b.token?.symbol || "ETH")}</span>
|
|
<span class="token-name">${this.esc(b.token?.name || "Ether")}</span>
|
|
</td>
|
|
<td class="amount-cell">${this.formatBalance(b.balance, b.token?.decimals || 18)}</td>
|
|
<td class="amount-cell fiat">${this.formatUSD(b.fiatBalance)}</td>
|
|
</tr>
|
|
`).join("")}
|
|
</tbody>
|
|
</table>
|
|
` : '<div class="empty">No token balances found on this chain.</div>'}`;
|
|
}
|
|
|
|
private render() {
|
|
this.shadow.innerHTML = `
|
|
${this.renderStyles()}
|
|
|
|
${this.renderHero()}
|
|
|
|
${this.renderMyWallets()}
|
|
|
|
<form class="address-bar" id="address-form">
|
|
<input id="address-input" type="text" placeholder="Enter any wallet or Safe address (0x...)"
|
|
value="${this.address}" spellcheck="false">
|
|
<button type="submit">Load</button>
|
|
</form>
|
|
|
|
<div class="controls-row">
|
|
<div class="testnet-toggle ${this.includeTestnets ? "active" : ""}" id="testnet-toggle">
|
|
<div class="toggle-track"><div class="toggle-thumb"></div></div>
|
|
<span>Include testnets</span>
|
|
</div>
|
|
${this.walletType ? `
|
|
<div class="wallet-badge ${this.walletType}">
|
|
${this.walletType === "safe" ? "⛓ Safe Multisig" : "👤 EOA Wallet"}
|
|
</div>
|
|
` : ""}
|
|
</div>
|
|
|
|
${this.renderSupportedChains()}
|
|
|
|
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
|
|
${this.loading ? '<div class="loading"><span class="spinner"></span> Detecting wallet across chains...</div>' : ""}
|
|
|
|
${this.renderFeatures()}
|
|
${this.renderExamples()}
|
|
${this.renderDashboard()}
|
|
`;
|
|
|
|
// Event listeners
|
|
const form = this.shadow.querySelector("#address-form");
|
|
form?.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
this.shadow.querySelector("#testnet-toggle")?.addEventListener("click", () => {
|
|
this.includeTestnets = !this.includeTestnets;
|
|
if (this.address) this.detectChains();
|
|
else this.render();
|
|
});
|
|
|
|
this.shadow.querySelectorAll(".chain-btn").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const chainId = (btn as HTMLElement).dataset.chain!;
|
|
this.handleChainSelect(chainId);
|
|
});
|
|
});
|
|
|
|
this.shadow.querySelectorAll(".example-item").forEach((item) => {
|
|
item.addEventListener("click", () => {
|
|
const addr = (item as HTMLElement).dataset.address!;
|
|
const input = this.shadow.querySelector("#address-input") as HTMLInputElement;
|
|
if (input) input.value = addr;
|
|
this.address = addr;
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("address", addr);
|
|
window.history.replaceState({}, "", url.toString());
|
|
this.detectChains();
|
|
});
|
|
});
|
|
|
|
// Linked wallet event listeners
|
|
this.shadow.querySelector("#link-wallet-btn")?.addEventListener("click", () => {
|
|
this.startProviderDiscovery();
|
|
});
|
|
|
|
this.shadow.querySelector("#provider-cancel")?.addEventListener("click", () => {
|
|
this.stopProviderDiscovery();
|
|
this.render();
|
|
});
|
|
|
|
this.shadow.querySelectorAll(".provider-item").forEach((item) => {
|
|
item.addEventListener("click", () => {
|
|
const uuid = (item as HTMLElement).dataset.providerUuid!;
|
|
this.handleProviderSelect(uuid);
|
|
});
|
|
});
|
|
|
|
this.shadow.querySelectorAll("[data-view-address]").forEach((item) => {
|
|
item.addEventListener("click", (e) => {
|
|
// Don't navigate if clicking the unlink button
|
|
if ((e.target as HTMLElement).closest(".unlink-btn")) return;
|
|
const addr = (item as HTMLElement).dataset.viewAddress!;
|
|
this.handleViewLinkedWallet(addr);
|
|
});
|
|
});
|
|
|
|
this.shadow.querySelectorAll("[data-unlink]").forEach((btn) => {
|
|
btn.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
const id = (btn as HTMLElement).dataset.unlink!;
|
|
if (confirm("Unlink this wallet?")) {
|
|
this.handleUnlinkWallet(id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
private esc(s: string): string {
|
|
const d = document.createElement("div");
|
|
d.textContent = s || "";
|
|
return d.innerHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define("folk-wallet-viewer", FolkWalletViewer);
|