ethagent 1.1.2 → 2.0.0

package/src/identity/wallet/page/copy.ts

@@ -0,0 +1,340 @@
+import { config } from './state.js'
+import { glyphs } from './html.js'
+
+export const CHAINS: Record<string, { name: string }> = {
+  "0x1": { name: "Ethereum Mainnet" },
+  "0xaa36a7": { name: "Sepolia" },
+  "0x2105": { name: "Base" },
+  "0x14a34": { name: "Base Sepolia" },
+};
+
+export interface FlowCopy {
+  accent: string;
+  tabTitle: string;
+  label: string;
+  title: string;
+  detail: string | null;
+}
+
+export const FLOW_COPY: Record<string, FlowCopy> = {
+  account:            { accent: "sign",        tabTitle: "Connect Wallet",   label: "Wallet Request",       title: "Connect Wallet",   detail: null },
+  sign:               { accent: "sign",        tabTitle: "Sign Message",     label: "Signature Request",    title: "Sign Message",     detail: "message" },
+  "sign-transaction": { accent: "transaction", tabTitle: "Sign And Save",    label: "Identity Signature",   title: "Sign And Save",    detail: "message" },
+  transaction:        { accent: "transaction", tabTitle: "Submit Transaction", label: "Transaction Request", title: "Submit Transaction", detail: "registry" },
+};
+
+export const TRANSACTION_TITLES: Record<string, string> = {
+  "register-agent": "Mint Agent Token",
+  "create-agent": "Create Agent",
+  "update-ens-records": "Use ENS Owner Wallet",
+  "clear-ens-records": "Use ENS Owner Wallet",
+  "create-simple-ens-subdomain": "Use Connected Wallet",
+  "set-simple-ens-records": "Use Connected Wallet",
+  "create-agent-ens-subdomain": "Owner Wallet Required",
+  "set-agent-ens-records": "Owner Wallet Required",
+  "publish-transfer-snapshot": "Switch Back to Sender Wallet",
+};
+
+export function transactionPurposeTitle(): string {
+  const key = config.purpose || "";
+  const fromPurpose = PURPOSE_COPY[key]?.flowTitle;
+  const explicit = TRANSACTION_TITLES[key];
+  return fromPurpose || explicit || FLOW_COPY.transaction!.title;
+}
+
+export const STATE_TITLES = {
+  connecting: "Connecting Wallet",
+  approveSign: "Sign Message",
+  preparingTransaction: "Preparing Transaction",
+  approveTransaction: "Review Transaction",
+  error: "Wallet Error",
+  default: "Wallet Request",
+};
+
+export interface SubCopy { text: string; hint: string; }
+export interface PurposeCopyEntry {
+  flowTitle: string;
+  account?: SubCopy;
+  sign?: SubCopy;
+  prepare?: SubCopy;
+  transaction?: SubCopy;
+  errorContext?: string;
+}
+
+export const PURPOSE_COPY: Record<string, PurposeCopyEntry> = {
+  "connect-operator-wallet": {
+    flowTitle: "Connect Wallet",
+    account: { text: "Connect Wallet", hint: "Reads your operator wallet address so the agent ENS subdomain can resolve to it. No signature or transaction." },
+    prepare: { text: "Reading Operator Wallet...", hint: "Return to the terminal." },
+  },
+  "create-agent": {
+    flowTitle: "Create Agent",
+    sign: { text: "Sign With Owner Wallet", hint: "Creates encrypted recovery access. No token approval." },
+    prepare: { text: "Saving Snapshot...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Submits one onchain transaction that mints a new ERC-8004 agent token to this wallet." },
+  },
+  "restore-owner-wallet": {
+    flowTitle: "Owner Wallet Required",
+    sign: { text: "Sign With Owner Wallet", hint: "Decrypts this snapshot. No transaction." },
+    prepare: { text: "Verifying Owner Wallet...", hint: "Return to the terminal." },
+  },
+  "restore-operator-wallet": {
+    flowTitle: "Operator Wallet Required",
+    sign: { text: "Sign With Operator Wallet", hint: "Decrypts this snapshot. No transaction." },
+    prepare: { text: "Verifying Operator Wallet...", hint: "Return to the terminal." },
+  },
+  "update-snapshot-owner": {
+    flowTitle: "Owner Wallet Required",
+    sign: { text: "Sign With Owner Wallet", hint: "Encrypts local files before publishing. Owner wallet is required because this update changes ownership-protected fields." },
+    prepare: { text: "Saving Snapshot...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Publishes the updated snapshot to the ERC-8004 token URI." },
+  },
+  "update-snapshot-operator": {
+    flowTitle: "Operator Wallet Save",
+    sign: { text: "Sign With Operator Wallet", hint: "Signs the encrypted snapshot for restore access." },
+    prepare: { text: "Saving Snapshot...", hint: "Keep this page open." },
+    transaction: { text: "Use Operator Wallet", hint: "Rotates the ERC-8004 token URI through the operator delegation vault." },
+  },
+  "update-snapshot-connected": {
+    flowTitle: "Save Snapshot",
+    sign: { text: "Sign With Connected Wallet", hint: "Encrypts local files before publishing. Single-wallet setup; no token approval." },
+    prepare: { text: "Saving Snapshot...", hint: "Keep this page open." },
+    transaction: { text: "Use Connected Wallet", hint: "Publishes the updated snapshot to the ERC-8004 token URI." },
+  },
+  "update-ens": {
+    flowTitle: "Update ENS in Agent Snapshot",
+    sign: { text: "Sign With Owner Wallet", hint: "Saves a new agent snapshot with this ENS name. No onchain ENS records change in this signature." },
+    prepare: { text: "Saving Snapshot...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Publishes the updated ERC-8004 token URI pointing to the new snapshot." },
+  },
+  "clear-ens": {
+    flowTitle: "Clear ENS from Agent Snapshot",
+    sign: { text: "Sign With Owner Wallet", hint: "Saves a new agent snapshot with no ENS name. No onchain ENS records change in this signature." },
+    prepare: { text: "Saving Snapshot...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Publishes the updated ERC-8004 token URI pointing to the new snapshot." },
+  },
+  "update-profile-owner": {
+    flowTitle: "Owner Wallet Required",
+    sign: { text: "Sign With Owner Wallet", hint: "Saves public profile changes. Owner wallet is required because this update changes ownership-protected fields." },
+    prepare: { text: "Preparing Profile Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Publishes the updated public profile to the ERC-8004 token URI." },
+  },
+  "update-profile-operator": {
+    flowTitle: "Operator Wallet Profile Update",
+    sign: { text: "Sign With Operator Wallet", hint: "Signs the encrypted snapshot for restore access." },
+    prepare: { text: "Preparing Profile Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Operator Wallet", hint: "Publishes the updated agent-card pointer to the ENS profile record on Ethereum Mainnet." },
+  },
+  "update-profile-connected": {
+    flowTitle: "Update Public Profile",
+    sign: { text: "Sign With Connected Wallet", hint: "Saves public profile changes. Single-wallet setup; no token approval." },
+    prepare: { text: "Preparing Profile Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Connected Wallet", hint: "Publishes the updated public profile to the ERC-8004 token URI." },
+  },
+  "update-ens-records": {
+    flowTitle: "Update ENS Records",
+    sign: { text: "Sign With ENS Owner Wallet", hint: "Authorizes ENS record changes. No token approval." },
+    prepare: { text: "Preparing ENS Transaction...", hint: "Keep this page open." },
+    transaction: { text: "Use ENS Owner Wallet", hint: "Submit one Ethereum Mainnet ENS record transaction." },
+  },
+  "clear-ens-records": {
+    flowTitle: "Unlink ENS",
+    sign: { text: "Sign With ENS Owner Wallet", hint: "Authorizes clearing ethagent ENS text records. No token approval." },
+    prepare: { text: "Preparing ENS Transaction...", hint: "Keep this page open." },
+    transaction: { text: "Use ENS Owner Wallet", hint: "Submit one Ethereum Mainnet transaction to clear ethagent ENS text records." },
+  },
+  "create-simple-ens-subdomain": {
+    flowTitle: "Review ENS Subdomain Creation",
+    sign: { text: "Sign With Connected Wallet", hint: "Connected wallet owns the ENS root and is creating the agent subdomain." },
+    prepare: { text: "Preparing ENS Transaction...", hint: "Keep this page open." },
+    transaction: { text: "Use Connected Wallet", hint: "Creates the agent ENS subdomain on Ethereum Mainnet. Must come from the parent name's owner." },
+  },
+  "set-simple-ens-records": {
+    flowTitle: "Apply ENS Records",
+    sign: { text: "Sign With Connected Wallet", hint: "Connected wallet writes the agent ENS records." },
+    prepare: { text: "Preparing ENS Transaction...", hint: "Keep this page open." },
+    transaction: { text: "Use Connected Wallet", hint: "Writes the agent ENS text records onchain. Must come from the name's controller." },
+  },
+  "create-agent-ens-subdomain": {
+    flowTitle: "Review Agent ENS Subdomain",
+    sign: { text: "Sign With Owner Wallet", hint: "Owner wallet controls the ENS root that the agent subdomain hangs off." },
+    prepare: { text: "Preparing ENS Transaction...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Creates the agent ENS subdomain on Ethereum Mainnet. Must come from the parent name's owner wallet." },
+  },
+  "set-agent-ens-records": {
+    flowTitle: "Apply Agent ENS Records",
+    sign: { text: "Sign With Owner Wallet", hint: "Owner wallet writes the agent ENS records pointing at the operator wallet." },
+    prepare: { text: "Preparing ENS Transaction...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Writes the agent ENS text and address records onchain. Must come from the name's controller." },
+  },
+  "update-operators": {
+    flowTitle: "Owner Wallet Required",
+    sign: { text: "Sign With Owner Wallet", hint: "Authorizes the new operator wallet access list. No token approval." },
+    prepare: { text: "Preparing Operator Wallets...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Publishes the updated operator wallet access list onchain." },
+  },
+  "operator-proof": {
+    flowTitle: "Operator Wallet Required",
+    sign: { text: "Sign With Operator Wallet", hint: "Creates restore access. No token approval." },
+    prepare: { text: "Verifying Operator Wallet...", hint: "Return to the terminal." },
+  },
+  "authorize-operator-wallet-resolver": {
+    flowTitle: "Owner Wallet Required",
+    prepare: { text: "Preparing Resolver Approval...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Approves the operator wallet to write ENS records for this name. No token approval." },
+  },
+  "revoke-operator-wallet-resolver": {
+    flowTitle: "Owner Wallet Required",
+    prepare: { text: "Preparing Resolver Revocation...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Revokes the operator wallet's ENS record write access for this name." },
+  },
+  "reconcile-resolver-approvals": {
+    flowTitle: "Owner Wallet Required",
+    prepare: { text: "Preparing Records Fix...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Brings ENS resolver approvals in sync with the authorized operator wallet list." },
+  },
+  "sync-operator-vault": {
+    flowTitle: "Owner Wallet Required",
+    prepare: { text: "Preparing Vault Operator Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Updates the operator delegation vault's metadata-operator list so authorized operator wallets can rotate the agent URI." },
+  },
+  "refetch-snapshot": {
+    flowTitle: "Refetch Latest Snapshot",
+    sign: { text: "Sign With Any Authorized Wallet", hint: "The owner wallet or any authorized operator wallet can decrypt this snapshot. No transaction." },
+    prepare: { text: "Verifying Wallet...", hint: "Return to the terminal." },
+  },
+  "prepare-transfer-sender": {
+    flowTitle: "Use Sender Wallet",
+    sign: { text: "Sign With Sender Wallet", hint: "Creates sender restore access. No token approval." },
+    prepare: { text: "Verifying Sender Wallet...", hint: "Return to the terminal." },
+  },
+  "prepare-transfer-target": {
+    flowTitle: "Switch to Receiver Wallet",
+    sign: { text: "Sign With Receiver Wallet", hint: "Creates receiver restore access. No token approval." },
+    prepare: { text: "Verifying Receiver Wallet...", hint: "Return to the terminal." },
+  },
+  "publish-transfer-snapshot": {
+    flowTitle: "Switch Back to Sender Wallet",
+    prepare: { text: "Preparing Token Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Sender Wallet", hint: "Submits one transaction to publish the transfer snapshot to the ERC-8004 token URI." },
+  },
+  "deploy-agent-vault": {
+    flowTitle: "Deploy Operator Delegation Vault",
+    prepare: { text: "Preparing Vault Deploy...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Deploys the operator delegation vault contract onchain. One-time setup per agent." },
+    errorContext: "While submitting the operator delegation vault deploy",
+  },
+  "deposit-agent-vault": {
+    flowTitle: "Deposit Token Into Vault",
+    prepare: { text: "Preparing Vault Deposit...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Sends the agent token to the operator delegation vault so the vault can save updates on your behalf." },
+    errorContext: "While submitting the operator delegation vault deposit",
+  },
+  "unwrap-agent-vault": {
+    flowTitle: "Unwrap Token From Vault",
+    prepare: { text: "Preparing Vault Unwrap...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Returns the agent token from the operator delegation vault to your owner wallet." },
+  },
+  "rotate-agent-uri-vault-owner": {
+    flowTitle: "Save Update Through Vault",
+    sign: { text: "Sign With Owner Wallet", hint: "Approves the new snapshot before saving onchain. No token approval." },
+    prepare: { text: "Preparing Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Saves your update onchain through the operator delegation vault. The vault holds your token, so updates go through it." },
+  },
+  "rotate-agent-uri-vault-operator": {
+    flowTitle: "Save Update Through Vault",
+    sign: { text: "Sign With Operator Wallet", hint: "Approves the new snapshot before saving onchain. No token approval." },
+    prepare: { text: "Preparing Update...", hint: "Keep this page open." },
+    transaction: { text: "Use Operator Wallet", hint: "Rotates the ERC-8004 token URI through the operator delegation vault. The vault holds your token, so the operator wallet calls the vault to publish." },
+  },
+  "withdraw-vault": {
+    flowTitle: "Withdraw Token From Vault",
+    prepare: { text: "Preparing Token Withdrawal...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Temporarily returns the agent token from the vault to your owner wallet. Vault stays configured so you can redeposit later." },
+    errorContext: "While submitting the operator delegation vault withdraw",
+  },
+  "register-root-commit": {
+    flowTitle: "Commit ENS Name",
+    prepare: { text: "Preparing ENS Commit...", hint: "Keep this page open." },
+    transaction: { text: "Use Connected Wallet", hint: "Submits an ENS commitment, the first of two transactions. The actual registration runs about 60 seconds later." },
+    errorContext: "While committing the ENS name registration",
+  },
+  "register-root-tx": {
+    flowTitle: "Register ENS Name",
+    prepare: { text: "Preparing ENS Registration...", hint: "Keep this page open." },
+    transaction: { text: "Use Connected Wallet", hint: "Pays the 1-year rent and registers the name. The connected wallet becomes the owner." },
+    errorContext: "While registering the ENS name",
+  },
+  "delete-ens-subdomain": {
+    flowTitle: "Delete ENS Subdomain",
+    prepare: { text: "Preparing Subdomain Deletion...", hint: "Keep this page open." },
+    transaction: { text: "Use Owner Wallet", hint: "Clears the subdomain entry in the parent ENS name. After this, the label is freed for reuse." },
+    errorContext: "While deleting the ENS subdomain",
+  },
+};
+
+export function purposeCopy(): PurposeCopyEntry {
+  const key = config.purpose;
+  const copy = PURPOSE_COPY[key || ""];
+  if (!copy) {
+    throw new Error(
+      "Wallet purpose '" + String(key) + "' has no copy entry; refusing to render generic wallet prompt."
+    );
+  }
+  return copy;
+}
+export function requirePurposeSubCopy(key: keyof PurposeCopyEntry): SubCopy {
+  const copy = purposeCopy();
+  const sub = copy[key] as SubCopy | undefined;
+  if (!sub || typeof sub.text !== "string" || typeof sub.hint !== "string") {
+    throw new Error(
+      "Wallet purpose '" + String(config.purpose) + "' missing '" + String(key) + "' copy; refusing to render generic wallet prompt."
+    );
+  }
+  return sub;
+}
+export function accountCopy(): SubCopy { return requirePurposeSubCopy("account"); }
+export const ENS_PURPOSES: ReadonlySet<string> = new Set([
+  "create-simple-ens-subdomain",
+  "set-simple-ens-records",
+  "create-agent-ens-subdomain",
+  "set-agent-ens-records",
+  "update-ens-records",
+  "clear-ens-records",
+  "authorize-operator-wallet-resolver",
+  "revoke-operator-wallet-resolver",
+  "reconcile-resolver-approvals",
+]);
+export function isEnsPurpose(purpose: string | undefined): boolean {
+  return !!purpose && ENS_PURPOSES.has(purpose);
+}
+export function ensTokenChainHint(): string {
+  const name = typeof config.tokenChainName === "string" ? config.tokenChainName.trim() : "";
+  if (!name || !isEnsPurpose(config.purpose)) return "";
+  return " Your agent token stays on " + name + "; ENS lives on Ethereum Mainnet.";
+}
+export function transactionCopy(): SubCopy {
+  const txCopy = requirePurposeSubCopy("transaction");
+  const expected = config.expectedAccount ? " Expected Wallet: " + shortAddr(config.expectedAccount) + "." : "";
+  const text = config.expectedAccount ? txCopy.text + " (" + shortAddr(config.expectedAccount) + ")" : txCopy.text;
+  return { text, hint: txCopy.hint + expected + ensTokenChainHint() };
+}
+export function signCopy(): SubCopy {
+  const sigCopy = requirePurposeSubCopy("sign");
+  const expected = config.expectedAccount ? " Expected Wallet: " + shortAddr(config.expectedAccount) + "." : "";
+  const text = config.expectedAccount ? sigCopy.text + " (" + shortAddr(config.expectedAccount) + ")" : sigCopy.text;
+  return { text, hint: sigCopy.hint + expected + ensTokenChainHint() };
+}
+
+export function chainLabel(hex?: string): string {
+  const k = String(hex || "").toLowerCase();
+  return (CHAINS[k] && CHAINS[k].name) || ("chain " + k);
+}
+export function shortAddr(addr?: string): string {
+  if (!addr || typeof addr !== "string") return "";
+  if (addr.length <= 14) return addr;
+  return addr.slice(0, 6) + glyphs.ellipsis + addr.slice(-4);
+}
+export function isTransactionFlow(): boolean {
+  return config.kind === "transaction" || config.kind === "sign-transaction";
+}

package/src/identity/wallet/page/grainient.ts

@@ -0,0 +1,278 @@
+interface GrainientOptions {
+  timeSpeed?: number;
+  colorBalance?: number;
+  warpStrength?: number;
+  warpFrequency?: number;
+  warpSpeed?: number;
+  warpAmplitude?: number;
+  blendAngle?: number;
+  blendSoftness?: number;
+  rotationAmount?: number;
+  noiseScale?: number;
+  grainAmount?: number;
+  grainScale?: number;
+  grainAnimated?: boolean;
+  contrast?: number;
+  gamma?: number;
+  saturation?: number;
+  centerX?: number;
+  centerY?: number;
+  zoom?: number;
+  color1?: string;
+  color2?: string;
+  color3?: string;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!m) return [1, 1, 1];
+  return [
+    parseInt(m[1]!, 16) / 255,
+    parseInt(m[2]!, 16) / 255,
+    parseInt(m[3]!, 16) / 255,
+  ];
+}
+
+const GRAINIENT_VERTEX = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const GRAINIENT_FRAGMENT = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+
+function compileShader(gl: WebGL2RenderingContext, type: number, src: string): WebGLShader {
+  const sh = gl.createShader(type)!;
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(sh);
+    gl.deleteShader(sh);
+    throw new Error("Shader compile failed: " + log);
+  }
+  return sh;
+}
+
+export function startGrainient(canvas: HTMLCanvasElement, opts: GrainientOptions = {}): () => void {
+  const o: Required<GrainientOptions> = {
+    timeSpeed: 0.25,
+    colorBalance: 0.0,
+    warpStrength: 1.0,
+    warpFrequency: 5.0,
+    warpSpeed: 2.0,
+    warpAmplitude: 10.0,
+    blendAngle: 0.0,
+    blendSoftness: 0.05,
+    rotationAmount: 500.0,
+    noiseScale: 2.0,
+    grainAmount: 0.1,
+    grainScale: 2.0,
+    grainAnimated: false,
+    contrast: 1.5,
+    gamma: 1.0,
+    saturation: 1.0,
+    centerX: 0.0,
+    centerY: 0.0,
+    zoom: 0.9,
+    color1: "#000422",
+    color2: "#d8dcfa",
+    color3: "#000422",
+    ...opts,
+  };
+
+  const gl = canvas.getContext("webgl2", { alpha: true, antialias: false, premultipliedAlpha: true });
+  if (!gl) {
+    canvas.style.display = "none";
+    return () => {};
+  }
+
+  const vs = compileShader(gl, gl.VERTEX_SHADER, GRAINIENT_VERTEX);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, GRAINIENT_FRAGMENT);
+  const prog = gl.createProgram()!;
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    throw new Error("Grainient link failed: " + gl.getProgramInfoLog(prog));
+  }
+
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 3, -1, -1, 3]),
+    gl.STATIC_DRAW
+  );
+  const posLoc = gl.getAttribLocation(prog, "position");
+  gl.enableVertexAttribArray(posLoc);
+  gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+  gl.useProgram(prog);
+
+  const uloc = (name: string) => gl.getUniformLocation(prog, name);
+  const u = {
+    iTime: uloc("iTime"),
+    iResolution: uloc("iResolution"),
+    uTimeSpeed: uloc("uTimeSpeed"),
+    uColorBalance: uloc("uColorBalance"),
+    uWarpStrength: uloc("uWarpStrength"),
+    uWarpFrequency: uloc("uWarpFrequency"),
+    uWarpSpeed: uloc("uWarpSpeed"),
+    uWarpAmplitude: uloc("uWarpAmplitude"),
+    uBlendAngle: uloc("uBlendAngle"),
+    uBlendSoftness: uloc("uBlendSoftness"),
+    uRotationAmount: uloc("uRotationAmount"),
+    uNoiseScale: uloc("uNoiseScale"),
+    uGrainAmount: uloc("uGrainAmount"),
+    uGrainScale: uloc("uGrainScale"),
+    uGrainAnimated: uloc("uGrainAnimated"),
+    uContrast: uloc("uContrast"),
+    uGamma: uloc("uGamma"),
+    uSaturation: uloc("uSaturation"),
+    uCenterOffset: uloc("uCenterOffset"),
+    uZoom: uloc("uZoom"),
+    uColor1: uloc("uColor1"),
+    uColor2: uloc("uColor2"),
+    uColor3: uloc("uColor3"),
+  };
+
+  gl.uniform1f(u.uTimeSpeed, o.timeSpeed);
+  gl.uniform1f(u.uColorBalance, o.colorBalance);
+  gl.uniform1f(u.uWarpStrength, o.warpStrength);
+  gl.uniform1f(u.uWarpFrequency, o.warpFrequency);
+  gl.uniform1f(u.uWarpSpeed, o.warpSpeed);
+  gl.uniform1f(u.uWarpAmplitude, o.warpAmplitude);
+  gl.uniform1f(u.uBlendAngle, o.blendAngle);
+  gl.uniform1f(u.uBlendSoftness, o.blendSoftness);
+  gl.uniform1f(u.uRotationAmount, o.rotationAmount);
+  gl.uniform1f(u.uNoiseScale, o.noiseScale);
+  gl.uniform1f(u.uGrainAmount, o.grainAmount);
+  gl.uniform1f(u.uGrainScale, o.grainScale);
+  gl.uniform1f(u.uGrainAnimated, o.grainAnimated ? 1.0 : 0.0);
+  gl.uniform1f(u.uContrast, o.contrast);
+  gl.uniform1f(u.uGamma, o.gamma);
+  gl.uniform1f(u.uSaturation, o.saturation);
+  gl.uniform2f(u.uCenterOffset, o.centerX, o.centerY);
+  gl.uniform1f(u.uZoom, o.zoom);
+  const c1 = hexToRgb(o.color1);
+  const c2 = hexToRgb(o.color2);
+  const c3 = hexToRgb(o.color3);
+  gl.uniform3f(u.uColor1, c1[0], c1[1], c1[2]);
+  gl.uniform3f(u.uColor2, c2[0], c2[1], c2[2]);
+  gl.uniform3f(u.uColor3, c3[0], c3[1], c3[2]);
+
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const setSize = () => {
+    const w = Math.max(1, Math.floor(canvas.clientWidth * dpr));
+    const h = Math.max(1, Math.floor(canvas.clientHeight * dpr));
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    gl.viewport(0, 0, w, h);
+    gl.uniform2f(u.iResolution, w, h);
+  };
+
+  const ro = new ResizeObserver(setSize);
+  ro.observe(canvas);
+  setSize();
+
+  const t0 = performance.now();
+  let raf = 0;
+  const loop = (t: number) => {
+    gl.uniform1f(u.iTime, (t - t0) * 0.001);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(loop);
+  };
+  raf = requestAnimationFrame(loop);
+
+  return () => {
+    cancelAnimationFrame(raf);
+    ro.disconnect();
+  };
+}

package/src/identity/wallet/page/html.ts

@@ -0,0 +1,28 @@
+export const glyphs = {
+  eyes: `
+                                         -+:
+                   :=-                    -%@@@%.
+             *@@@@@#-                           *@@-
+          +@@.                                     +@
+        @@=                               -#=-+++=+:
+      #%        .:===-:                   -@* +@@@@%
+           *@-+@@@@@:                    %@@+  @@@=#@
+          *@=   @@@@@@@-                .@.@@@@@@@ :
+        @@+=@@@@@@@@@@@@:               .% *@@@@@*-=
+       #:-@ -@@@@@@@@@-+%                @  -@@@- #
+       :  #+  @@@@@@@- -%                 =#     =
+           -@:        *@                      .+%%
+              :%#: --
+              .-:
+                                                           `,
+  ellipsis: "…",
+};
+
+export function escapeHtml(value: unknown): string {
+  return String(value == null ? "" : value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll("\"", "&quot;");
+}
+export function renderEyes(): string { return escapeHtml(glyphs.eyes); }