feat: add ens naming with caching (#23)

* feat: add ens naming with caching

* ui: replace headings

* fix: use RPC url if provided in .env

* refactor getAddressOrEns

---------

Co-authored-by: Aashutosh Rathi <aashutosh@stackrlabs.xyz>

Author: 0xRampey

client/game/demoMode.ts

@@ -1,6 +1,6 @@
-import { Screen } from './screen';
-import { Collisions } from './collisions';
-import { World } from './world';
+import { Screen } from "./screen";
+import { Collisions } from "./collisions";
+import { World } from "./world";
 import { IGameState, VirtualInput } from "../comets";
 
 export class DemoMode implements IGameState {
@@ -78,12 +78,12 @@ export class DemoMode implements IGameState {
     screen.draw.oneCoinOnePlay();
     // screen.draw.highscore(this.world.highscore);
     screen.draw.stackr();
-    screen.draw.copyright();
+    screen.draw.gameTitle();
   }
 
   private drawPushStart(screen: Screen) {
     if (this.showPushStart) {
       screen.draw.pushStart();
     }
   }
-}
+}

client/game/draw.ts

@@ -8,7 +8,6 @@ const VectorLine = "rgba(255,255,255,.8)";
 const TextColor = "rgba(255,255,255,.8)";
 const Y_START = 20;
 const DefaultLineWidth = 2;
-const CR = String.fromCharCode(169);
 
 export function magenta(opacity: number = 1) {
   return `rgba(255,0,255, ${opacity})`;
@@ -328,8 +327,8 @@ export class Draw {
     });
   }
 
-  stackr() {
-    this.text2("Stackr", this.screen.font.small, (width) => {
+  gameTitle() {
+    this.text2("Comets", this.screen.font.small, (width) => {
       return {
         x: this.screen.width2 - width / 2,
         y: Y_START,
@@ -373,8 +372,8 @@ export class Draw {
     });
   }
 
-  copyright() {
-    this.text2(CR + " 1979 atari inc", this.screen.font.small, (width) => {
+  stackr() {
+    this.text2("Powered by Stackr Labs", this.screen.font.small, (width) => {
       return {
         x: this.screen.width2 - width / 2,
         y: this.screen.height - this.screen.font.small,

client/game/gameMode.ts

@@ -129,7 +129,7 @@ export class GameMode extends EventSource implements IGameState {
 
   private renderStatic(screen: Screen) {
     screen.draw.background();
-    screen.draw.copyright();
+    screen.draw.gameTitle();
     screen.draw.stackr();
     screen.draw.scorePlayer1(this.world.score);
     screen.draw.drawExtraLives(this.world.lives);

client/game/highScoreMode.ts

@@ -1,8 +1,14 @@
 import { IGameState } from "../comets";
 import { Highscores } from "./highscores";
 import { Screen } from "./screen";
+import { isAddress } from "viem";
+
 const formatAddress = (address: string) => {
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  if (isAddress(address)) {
+    return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  }
+  // Is an ENS name then
+  return address.padEnd(14, " ");
 };
 
 export class HighScoreMode implements IGameState {
@@ -31,7 +37,7 @@ export class HighScoreMode implements IGameState {
     screen.draw.stackr();
     screen.draw.scorePlayer1(this.score);
     screen.draw.oneCoinOnePlay();
-    screen.draw.copyright();
+    screen.draw.gameTitle();
   }
 
   private drawHighScores(screen: Screen) {

rollup/index.ts

@@ -1,29 +1,33 @@
 import {
   ActionConfirmationStatus,
   ActionSchema,
-  AllowedInputTypes,
   MicroRollup,
 } from "@stackr/sdk";
-import { HDNodeWallet, Wallet } from "ethers";
+import { getDefaultProvider } from "ethers";
 import express from "express";
 import { stackrConfig } from "./stackr.config";
 import { EndGameSchema, StartGameSchema } from "./stackr/action";
 import { machine, MACHINE_ID } from "./stackr/machine";
 
 const PORT = process.env.PORT || 3210;
-const wallet = new Wallet(stackrConfig.operator.accounts[0].privateKey);
-
-const signMessage = async (
-  wallet: HDNodeWallet,
-  schema: ActionSchema,
-  payload: AllowedInputTypes
-) => {
-  const signature = await wallet.signTypedData(
-    schema.domain,
-    schema.EIP712TypedData.types,
-    payload
-  );
-  return signature;
+
+const ensCache = new Map<string, string>();
+
+const getAddressOrEns = async (address: string) => {
+  if (ensCache.has(address)) {
+    return ensCache.get(address)!;
+  }
+  try {
+    const ens = await getDefaultProvider(process.env.API_URL).lookupAddress(
+      address
+    );
+    const name = ens || address;
+    ensCache.set(address, name);
+    return name;
+  } catch (e) {
+    console.error(e);
+    return address;
+  }
 };
 
 const stfSchemaMap: Record<string, ActionSchema> = {
@@ -97,10 +101,12 @@ const main = async () => {
       })
       .slice(0, 10);
 
-    const leaderboard = topTen.map((game) => ({
-      address: game.player,
-      score: game.score,
-    }));
+    const leaderboard = await Promise.all(
+      topTen.map(async (game) => ({
+        address: await getAddressOrEns(game.player),
+        score: game.score,
+      }))
+    );
 
     return res.json(leaderboard);
   });
@@ -146,4 +152,5 @@ const main = async () => {
   });
 };
 
+
 main();