@redzone/taunt-logins 0.0.1

package/.history/package_20251002102021.json

@@ -0,0 +1,24 @@
+{
+  "name": "@seaders/redzone-taunt-logins",
+  "version": "1.0.4",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@metamask/providers": "^22.1.1",
+    "magic-sdk": "^30.0.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@types/chrome": "^0.1.16",
+    "@types/node": "^24.6.1",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/.history/package_20251002102142.json

@@ -0,0 +1,24 @@
+{
+  "name": "@redzone/taunt-logins",
+  "version": "1.0.4",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@metamask/providers": "^22.1.1",
+    "magic-sdk": "^30.0.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@types/chrome": "^0.1.16",
+    "@types/node": "^24.6.1",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/.history/package_20251002102150.json

@@ -0,0 +1,24 @@
+{
+  "name": "@redzone/taunt-logins",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@metamask/providers": "^22.1.1",
+    "magic-sdk": "^30.0.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@types/chrome": "^0.1.16",
+    "@types/node": "^24.6.1",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/.history/package_20251002102201.json

@@ -0,0 +1,24 @@
+{
+  "name": "@redzone/taunt-logins",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@metamask/providers": "^22.1.1",
+    "magic-sdk": "^30.0.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@types/chrome": "^0.1.16",
+    "@types/node": "^24.6.1",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/.history/src/metamask_20251002095345.ts

@@ -0,0 +1,136 @@
+import { MetaMaskInpageProvider } from "@metamask/providers"
+
+import { TauntApi } from "./taunt"
+
+const CHROME_METAMASK_ID = "nkbihfbeogaeaoehlefnkodbefgpgknn"
+
+export const createMetaMaskProvider = () =>
+  createWalletProvider(CHROME_METAMASK_ID)
+
+declare global {
+  interface Window {
+    ethereum?: MetaMaskInpageProvider
+  }
+}
+
+async function createWalletProvider(ident: string) {
+  let provider
+  try {
+    let metamaskPort
+    try {
+      metamaskPort = chrome.runtime.connect(ident)
+    } catch (error) {
+      console.log("Failed to connect to MetaMask", error)
+    }
+
+    if (metamaskPort) {
+      const PortStream = await import("extension-port-stream").then(
+        (m) => m.default
+      )
+      const pluginStream = new PortStream(metamaskPort)
+      provider = new MetaMaskInpageProvider(pluginStream)
+    } else {
+      let eth
+      try {
+        eth = window?.ethereum
+      } catch (error) {
+        console.error("Failed to access window.ethereum", error)
+      }
+
+      if (eth) {
+        provider = eth
+        if (!provider.isMetaMask) {
+          console.warn(
+            "Injected ethereum provider is not MetaMask! You may experience issues."
+          )
+        }
+      }
+    }
+  } catch (e) {
+    console.dir(`Metamask connect error `, e)
+    throw e
+  }
+
+  return provider
+}
+
+export async function withMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: MetaMaskInpageProvider
+) {
+  const provider = providerParam || (await createMetaMaskProvider())
+  if (!provider) throw new Error("MetaMask provider not found")
+
+  const accounts = (await provider.request({
+    method: "eth_requestAccounts"
+  })) as string[]
+  if (!accounts.length) throw new Error("No accounts returned")
+
+  console.log("MetaMask", { accounts })
+
+  const walletAddress = accounts[0]
+  const baseUrl = `${tauntServiceEndpoint}/v1/auth`
+  const cryptoValuesArray = new Uint32Array(3)
+  const clientNonce = crypto.getRandomValues(cryptoValuesArray).toString()
+
+  const serverNonce = await fetch(`${baseUrl}/nonce/login`, {
+    method: "POST",
+    body: JSON.stringify({ walletAddress, clientNonce }),
+    headers: { "Content-Type": "application/json" }
+  }).then((res) => res.text())
+
+  const payload = JSON.stringify({ clientNonce, serverNonce })
+  const message = `Sign this message with your wallet to connect to Taunt Battleworld ::: ${payload}`
+  const params = [message, walletAddress]
+  const method = "personal_sign"
+
+  const signature = await new Promise<string>((resolve, reject) => {
+    provider.sendAsync(
+      {
+        id: 1,
+        method,
+        params,
+        jsonrpc: "2.0"
+      },
+      (err, response) => {
+        if (err) {
+          console.error(err)
+          reject(err)
+          return
+        }
+
+        const { result, error } = response as {
+          id: number
+          jsonrpc: string
+          result: string
+          error?: unknown
+        }
+        if (error) {
+          console.error(error)
+          reject(error)
+          return
+        }
+
+        resolve(result)
+      }
+    )
+  })
+
+  return { walletAddress, message, signature }
+}
+
+export async function loginWithMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: MetaMaskInpageProvider
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  const { walletAddress, message, signature } = await withMetamask(
+    tauntServiceEndpoint,
+    providerParam
+  )
+  return taunt.loginWithWeb3WalletSignature({
+    walletAddress,
+    message,
+    signature
+  })
+}

package/.history/src/metamask_20251002101110.ts

@@ -0,0 +1,90 @@
+import { BaseProvider } from "@metamask/providers"
+
+import { TauntApi } from "./taunt"
+
+declare global {
+  interface Window {
+    ethereum?: BaseProvider
+  }
+}
+
+export async function withMetamask(
+  tauntServiceEndpoint: string,
+  provider?: BaseProvider
+) {
+  provider = provider || window.ethereum
+  if (!provider) throw new Error("MetaMask provider not found")
+
+  const accounts = (await provider.request({
+    method: "eth_requestAccounts"
+  })) as string[]
+  if (!accounts.length) throw new Error("No accounts returned")
+
+  console.log("MetaMask", { accounts })
+
+  const walletAddress = accounts[0]
+  const baseUrl = `${tauntServiceEndpoint}/v1/auth`
+  const cryptoValuesArray = new Uint32Array(3)
+  const clientNonce = crypto.getRandomValues(cryptoValuesArray).toString()
+
+  const serverNonce = await fetch(`${baseUrl}/nonce/login`, {
+    method: "POST",
+    body: JSON.stringify({ walletAddress, clientNonce }),
+    headers: { "Content-Type": "application/json" }
+  }).then((res) => res.text())
+
+  const payload = JSON.stringify({ clientNonce, serverNonce })
+  const message = `Sign this message with your wallet to connect to Taunt Battleworld ::: ${payload}`
+  const params = [message, walletAddress]
+  const method = "personal_sign"
+
+  const signature = await new Promise<string>((resolve, reject) => {
+    provider.sendAsync(
+      {
+        id: 1,
+        method,
+        params,
+        jsonrpc: "2.0"
+      },
+      (err, response) => {
+        if (err) {
+          console.error(err)
+          reject(err)
+          return
+        }
+
+        const { result, error } = response as {
+          id: number
+          jsonrpc: string
+          result: string
+          error?: unknown
+        }
+        if (error) {
+          console.error(error)
+          reject(error)
+          return
+        }
+
+        resolve(result)
+      }
+    )
+  })
+
+  return { walletAddress, message, signature }
+}
+
+export async function loginWithMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: MetaMaskInpageProvider
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  const { walletAddress, message, signature } = await withMetamask(
+    tauntServiceEndpoint,
+    providerParam
+  )
+  return taunt.loginWithWeb3WalletSignature({
+    walletAddress,
+    message,
+    signature
+  })
+}

package/.history/src/metamask_20251002101707.ts

@@ -0,0 +1,59 @@
+import { BaseProvider } from "@metamask/providers"
+
+import { TauntApi } from "./taunt"
+
+declare global {
+  interface Window {
+    ethereum?: BaseProvider
+  }
+}
+
+export async function withMetamask(
+  tauntServiceEndpoint: string,
+  provider?: BaseProvider
+) {
+  provider = provider || window.ethereum
+  if (!provider) throw new Error("MetaMask provider not found")
+
+  const accounts = (await provider.request({
+    method: "eth_requestAccounts"
+  })) as string[]
+  if (!accounts.length) throw new Error("No accounts returned")
+
+  console.log("MetaMask", { accounts })
+
+  const walletAddress = accounts[0]
+  const baseUrl = `${tauntServiceEndpoint}/v1/auth`
+  const cryptoValuesArray = new Uint32Array(3)
+  const clientNonce = crypto.getRandomValues(cryptoValuesArray).toString()
+
+  const serverNonce = await fetch(`${baseUrl}/nonce/login`, {
+    method: "POST",
+    body: JSON.stringify({ walletAddress, clientNonce }),
+    headers: { "Content-Type": "application/json" }
+  }).then((res) => res.text())
+
+  const payload = JSON.stringify({ clientNonce, serverNonce })
+  const message = `Sign this message with your wallet to connect to Taunt Battleworld ::: ${payload}`
+  const params = [message, walletAddress]
+
+  const signature = await provider.request({ method: "personal_sign", params })
+
+  return { walletAddress, message, signature }
+}
+
+export async function loginWithMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: MetaMaskInpageProvider
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  const { walletAddress, message, signature } = await withMetamask(
+    tauntServiceEndpoint,
+    providerParam
+  )
+  return taunt.loginWithWeb3WalletSignature({
+    walletAddress,
+    message,
+    signature
+  })
+}

package/.history/src/metamask_20251002101728.ts

@@ -0,0 +1,61 @@
+import { BaseProvider } from "@metamask/providers"
+
+import { TauntApi } from "./taunt"
+
+declare global {
+  interface Window {
+    ethereum?: BaseProvider
+  }
+}
+
+export async function withMetamask(
+  tauntServiceEndpoint: string,
+  provider?: BaseProvider
+) {
+  provider = provider || window.ethereum
+  if (!provider) throw new Error("MetaMask provider not found")
+
+  const accounts = (await provider.request({
+    method: "eth_requestAccounts"
+  })) as string[]
+  if (!accounts.length) throw new Error("No accounts returned")
+
+  console.log("MetaMask", { accounts })
+
+  const walletAddress = accounts[0]
+  const baseUrl = `${tauntServiceEndpoint}/v1/auth`
+  const cryptoValuesArray = new Uint32Array(3)
+  const clientNonce = crypto.getRandomValues(cryptoValuesArray).toString()
+
+  const serverNonce = await fetch(`${baseUrl}/nonce/login`, {
+    method: "POST",
+    body: JSON.stringify({ walletAddress, clientNonce }),
+    headers: { "Content-Type": "application/json" }
+  }).then((res) => res.text())
+
+  const payload = JSON.stringify({ clientNonce, serverNonce })
+  const message = `Sign this message with your wallet to connect to Taunt Battleworld ::: ${payload}`
+
+  const signature = await provider.request({
+    method: "personal_sign",
+    params: [message, walletAddress]
+  })
+
+  return { walletAddress, message, signature }
+}
+
+export async function loginWithMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: MetaMaskInpageProvider
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  const { walletAddress, message, signature } = await withMetamask(
+    tauntServiceEndpoint,
+    providerParam
+  )
+  return taunt.loginWithWeb3WalletSignature({
+    walletAddress,
+    message,
+    signature
+  })
+}

package/.history/src/metamask_20251002101947.ts

@@ -0,0 +1,66 @@
+import { BaseProvider } from "@metamask/providers"
+
+import { TauntApi } from "./taunt"
+
+declare global {
+  interface Window {
+    ethereum?: BaseProvider
+  }
+}
+
+export async function withMetamask(
+  tauntServiceEndpoint: string,
+  provider?: BaseProvider
+) {
+  provider = provider || window.ethereum
+  if (!provider) throw new Error("MetaMask provider not found")
+
+  const accounts = (await provider.request({
+    method: "eth_requestAccounts"
+  })) as string[]
+  if (!accounts.length) throw new Error("No accounts returned")
+
+  console.log("MetaMask", { accounts })
+
+  const walletAddress = accounts[0]
+  const baseUrl = `${tauntServiceEndpoint}/v1/auth`
+  const cryptoValuesArray = new Uint32Array(3)
+  const clientNonce = crypto.getRandomValues(cryptoValuesArray).toString()
+
+  const serverNonce = await fetch(`${baseUrl}/nonce/login`, {
+    method: "POST",
+    body: JSON.stringify({ walletAddress, clientNonce }),
+    headers: { "Content-Type": "application/json" }
+  }).then((res) => res.text())
+
+  const payload = JSON.stringify({ clientNonce, serverNonce })
+  const message = `Sign this message with your wallet to connect to Taunt Battleworld ::: ${payload}`
+  let signature
+  try {
+    signature = await provider.request<string>({
+      method: "personal_sign",
+      params: [message, walletAddress]
+    })
+  } catch (err) {
+    throw new Error("User denied message signature")
+  }
+  if (!signature) throw new Error("No signature returned")
+
+  return { walletAddress, message, signature }
+}
+
+export async function loginWithMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: BaseProvider
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  const { walletAddress, message, signature } = await withMetamask(
+    tauntServiceEndpoint,
+    providerParam
+  )
+  return taunt.loginWithWeb3WalletSignature({
+    walletAddress,
+    message,
+    signature
+  })
+}

package/.prettierrc.mjs

@@ -0,0 +1,22 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

package/index.ts

@@ -0,0 +1,2 @@
+export * from "./src/magic"
+export * from "./src/metamask"

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@redzone/taunt-logins",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@metamask/providers": "^22.1.1",
+    "magic-sdk": "^30.0.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@types/chrome": "^0.1.16",
+    "@types/node": "^24.6.1",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/magic.ts

@@ -0,0 +1,30 @@
+import { Magic } from "magic-sdk"
+
+import { TauntApi } from "./taunt"
+
+const customNodeOptions = {
+  rpcUrl: "https://polygon-rpc.com", // your ethereum, polygon, or optimism mainnet/testnet rpc URL
+  chainId: 137
+}
+
+export function withMagic(magicKey: string, email: string) {
+  const magic = new Magic(magicKey, {
+    network: customNodeOptions
+  })
+  return magic.auth.loginWithEmailOTP({ email })
+}
+
+export async function loginWithMagic(
+  tauntServiceEndpoint: string,
+  magicKey: string,
+  email: string
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  try {
+    const did = await withMagic(magicKey, email)
+    return taunt.loginWithMagicDid(did!)
+  } catch (err) {
+    console.error("Magic login error:", err)
+    throw err
+  }
+}

package/src/metamask.ts

@@ -0,0 +1,66 @@
+import { BaseProvider } from "@metamask/providers"
+
+import { TauntApi } from "./taunt"
+
+declare global {
+  interface Window {
+    ethereum?: BaseProvider
+  }
+}
+
+export async function withMetamask(
+  tauntServiceEndpoint: string,
+  provider?: BaseProvider
+) {
+  provider = provider || window.ethereum
+  if (!provider) throw new Error("MetaMask provider not found")
+
+  const accounts = (await provider.request({
+    method: "eth_requestAccounts"
+  })) as string[]
+  if (!accounts.length) throw new Error("No accounts returned")
+
+  console.log("MetaMask", { accounts })
+
+  const walletAddress = accounts[0]
+  const baseUrl = `${tauntServiceEndpoint}/v1/auth`
+  const cryptoValuesArray = new Uint32Array(3)
+  const clientNonce = crypto.getRandomValues(cryptoValuesArray).toString()
+
+  const serverNonce = await fetch(`${baseUrl}/nonce/login`, {
+    method: "POST",
+    body: JSON.stringify({ walletAddress, clientNonce }),
+    headers: { "Content-Type": "application/json" }
+  }).then((res) => res.text())
+
+  const payload = JSON.stringify({ clientNonce, serverNonce })
+  const message = `Sign this message with your wallet to connect to Taunt Battleworld ::: ${payload}`
+  let signature
+  try {
+    signature = await provider.request<string>({
+      method: "personal_sign",
+      params: [message, walletAddress]
+    })
+  } catch (err) {
+    throw new Error("User denied message signature")
+  }
+  if (!signature) throw new Error("No signature returned")
+
+  return { walletAddress, message, signature }
+}
+
+export async function loginWithMetamask(
+  tauntServiceEndpoint: string,
+  providerParam?: BaseProvider
+) {
+  const taunt = new TauntApi(tauntServiceEndpoint)
+  const { walletAddress, message, signature } = await withMetamask(
+    tauntServiceEndpoint,
+    providerParam
+  )
+  return taunt.loginWithWeb3WalletSignature({
+    walletAddress,
+    message,
+    signature
+  })
+}

package/src/taunt.ts

@@ -0,0 +1,217 @@
+export type TauntSigProps = {
+  walletAddress: string
+  message: string
+  signature: string
+}
+export type TauntExtSigProps = TauntSigProps & { extNonce: string }
+
+type TauntRespType = {
+  accessToken: string
+  refreshToken: string
+  isNewUser: string
+}
+
+export type TauntUser = {
+  id: number
+  role: string
+  email: string | undefined
+  ethAddress: string | null
+  avatar: string | null
+
+  refreshToken: string
+  accessToken: string
+}
+
+export class TauntApi {
+  constructor(
+    private endpoint: string,
+    private api = this
+  ) {}
+
+  async stdPGET<T = TauntRespType>(
+    method: string,
+    url: string,
+    body?: unknown,
+    headers = {}
+  ) {
+    const response = await fetch(this.endpoint + url, {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        // Include credentials (cookies) in the request
+        Accept: "application/json",
+        ...headers
+      },
+      body: body ? JSON.stringify(body) : null,
+      credentials: "include" // This ensures cookies are sent with the request
+    })
+    return this.withResp<T>(response)
+  }
+
+  async withResp<T>(response: Response) {
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      const error = new Error("Network response was not ok")
+
+      Object.assign(error, { response, data: errorData })
+      throw error
+    }
+    return response.json().then((data) => ({ data: data as T, response }))
+  }
+
+  async post<T = TauntRespType>(url: string, body = {}) {
+    return this.stdPGET<T>("POST", url, body)
+  }
+
+  async get<T = TauntRespType>(url: string, headers = {}) {
+    return this.stdPGET<T>("GET", url, undefined, headers)
+  }
+
+  async loginWithMagicDid(did: string) {
+    const { data } = await this.api.post("/v1/auth/login/did", { did })
+    return data
+  }
+
+  async loginWithWeb3WalletSignature(props: TauntSigProps) {
+    const { data } = await this.api.post("/v1/auth/login/signature", props)
+    return data
+  }
+
+  async loginExtWithWeb3WalletSignature(props: TauntExtSigProps) {
+    const { data } = await this.api.post("/v1/auth/login/ext-signature", props)
+    return data
+  }
+
+  // Logout of the backend with access token. Assumes user is currently logged in and has a cookie with the access token
+  async logout(accessToken: string) {
+    // If logging out fails on the backend we'll still remove the user info
+    await this.api.post("/v1/auth/logout", { accessToken })
+    await this.writePlayerEvent("player_logged_out")
+  }
+
+  // Use the cookie stored in the browser to get the user and save user model in state and local storage
+  // This assumes that the user is logged to backend in and has a cookie jwt
+  async getLoggedInUser(accessToken: string) {
+    const { data } = await this.api.get<{ ethAddress: string }>("/v1/auth/me", {
+      Authorization: `Bearer ${accessToken}`
+    })
+    // this.user = data
+    // localStorage.setItem("user", JSON.stringify(data))
+    // localStorage.setItem(
+    //   "name",
+    //   this.user.email ? this.user.email.split("@")[0] : this.user.ethAddress
+    // )
+    // await this.getCToken()
+    // this.setRefId(this.router.currentRoute.value.query['ref_id'])
+
+    // const nftStore = useNftStore()
+    // nftStore.fetchAll()
+    return data as TauntUser
+  }
+
+  // async loginPlayFabPlayer() {}
+
+  /*async loginPlayFabPlayer() {
+      try {
+        // Get the user's playfab id from taunt api
+        let id = null;
+        if (!this.user && !this.user?.id) {
+          id = this.getPlayfabAnonId()
+          if (!id) {
+            const { data: playFabResponse } = await this.api.get('/v1/auth/playfab', {})
+            id = playFabResponse.playFabId
+            this.setAnonPlayfabUserId(playFabResponse.playFabId);
+          }
+        } else {
+          const { data: playFabResponse } = await this.api.get('/v1/auth/playfab', {})
+          id = playFabResponse.playFabId
+        }
+        // Login with playfab via the unique id from taunt api
+        const { data: playFabLoginResults } = await Axios.post(loginEndpoint, {
+          CustomId: id,
+          CreateAccount: true,
+          titleId: playFabTitleId,
+        })
+        const playFabSession = JSON.stringify(playFabLoginResults.data)
+        this.setPlayFabSession(playFabSession)
+      }
+      catch (error) {
+        const err = error as AxiosError
+        if (err?.response) {
+          console.log(err.response.status, err.response.data)
+        }
+        else {
+          console.log(error)
+        }
+      }
+    }*/
+
+  //   async getCToken() {
+  //     try {
+  //       const url = "v1/claimr/token"
+  //       const { data } = await this.api.get<{ data: { token: string } }>(`${url}`)
+  //       this.claimrToken = data.data.token
+  //       this.setClaimrToken(this.claimrToken)
+  //     } catch (e) {
+  //       console.error(e)
+  //     }
+  //   }
+
+  //   setLastWalletConnection(lastWalletConnection: string) {
+  //     localStorage.setItem("lastWalletConnection", lastWalletConnection)
+  //   }
+  //   setRefId(ref = "") {
+  //     this.refId = ref
+  //   }
+
+  //   clearLocalAuthStorage() {
+  //     localStorage.removeItem("user")
+  //     localStorage.removeItem("refreshToken")
+  //     localStorage.removeItem("playFabSession")
+  //     this.user = null
+  //   }
+
+  //   setAccessToken(accessToken: string) {
+  //     localStorage.setItem("accessToken", accessToken)
+  //   }
+  //   setRefreshToken(refreshToken: string) {
+  //     localStorage.setItem("refreshToken", refreshToken)
+  //   }
+  //   setIsFirsTimeLogin(isFirstTimeLogin: string) {
+  //     localStorage.setItem("isFirstTimeLogin", isFirstTimeLogin)
+  //   }
+  //   setPlayFabSession(playFabSession: string) {
+  //     localStorage.setItem("playFabSession", playFabSession)
+  //   }
+  //   setAnonPlayfabUserId(id: string) {
+  //     localStorage.setItem("playfabAnonId", id)
+  //   }
+  //   setClaimrToken(token: string) {
+  //     localStorage.setItem("ctoken", token)
+  //   }
+  //   getAccessToken() {
+  //     return localStorage.getItem("accessToken")
+  //   }
+  //   getRefreshToken() {
+  //     return localStorage.getItem("refreshToken")
+  //   }
+  //   getPlayfabAnonId() {
+  //     return localStorage.getItem("playfabAnonId")
+  //   }
+
+  // Write a playfab event. retryfIfLoginNeeded should not be set by caller. It's used for stopping recursive calls when login is needed.
+  // If login is needed, for example, if the web browser has been open longer than playfab session timeout, we'll try to login again at most
+  // one time. Then we'll retry the event.
+  async writePlayerEvent(
+    eventName: string,
+    eventData: unknown = null,
+    retryIfLoginNeeded = true
+  ) {
+    console.log("writePlayerEvent", {
+      eventName,
+      eventData,
+      retryIfLoginNeeded
+    })
+    return Promise.resolve()
+  }
+}

package/src/test/types.spec.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from "vitest"
+
+import { remainingTimeString } from "../common"
+
+describe("types test set", () => {
+  test("ensure times string format", async () => {
+    const now = new Date(),
+      aSecond = 1000,
+      aMinute = aSecond * 60,
+      anHour = aMinute * 60,
+      aDay = anHour * 24,
+      aWeek = aDay * 7
+
+    const twentySeconds = 20 * aSecond,
+      threeMinutes = 3 * aMinute,
+      twoHours = 2 * anHour,
+      fiveDays = 5 * aDay,
+      tenWeeks = 10 * aWeek
+
+    // 10 weeks, 5 days, 2 hours, 3 minutes
+    expect(
+      remainingTimeString(
+        new Date(+now + tenWeeks + fiveDays + twoHours + threeMinutes),
+        now
+      )
+    ).toBe("10:wks 5:days")
+
+    // 1 weeks, 5 days, 2 hours, 3 minutes
+    expect(
+      remainingTimeString(
+        new Date(+now + aWeek + fiveDays + twoHours + threeMinutes),
+        now
+      )
+    ).toBe("1:wk 5:days")
+
+    // 5 days, 2 hours, 3 minutes
+    expect(
+      remainingTimeString(
+        new Date(+now + fiveDays + twoHours + threeMinutes),
+        now
+      )
+    ).toBe("5:days 2:hrs")
+
+    // 1 day, 2 hours, 3 minutes
+    expect(
+      remainingTimeString(new Date(+now + aDay + twoHours + threeMinutes), now)
+    ).toBe("1:day 2:hrs")
+
+    // 2 hours, 3 minutes
+    expect(
+      remainingTimeString(new Date(+now + twoHours + threeMinutes), now)
+    ).toBe("2:hrs 03:min")
+
+    // 1 hours, 3 minutes
+    expect(
+      remainingTimeString(new Date(+now + anHour + threeMinutes), now)
+    ).toBe("1:hr 03:min")
+
+    // 3 minutes, 20 seconds
+    expect(
+      remainingTimeString(new Date(+now + threeMinutes + twentySeconds), now)
+    ).toBe("03:min 20:sec")
+
+    // 1 minutes, 20 seconds
+    expect(
+      remainingTimeString(new Date(+now + aMinute + twentySeconds), now)
+    ).toBe("01:min 20:sec")
+
+    // 20 seconds
+    expect(remainingTimeString(new Date(+now + twentySeconds), now)).toBe(
+      "20:sec"
+    )
+
+    // 1 seconds
+    expect(remainingTimeString(new Date(+now + aSecond), now)).toBe("1:sec")
+
+    // 0 seconds
+    expect(remainingTimeString(now, now)).toBe("0:sec")
+  })
+})

package/tsconfig.json

@@ -0,0 +1,114 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "ES2020" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "libReplacement": true,                           /* Enable lib replacement. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "ES2020" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+    // "erasableSyntaxOnly": true,                       /* Do not allow runtime constructs that are not part of ECMAScript. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "exclude": ["node_modules", "vitest.config.mts", "src/test", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  entry: ["index.ts"],
+  splitting: true,
+  treeshake: true,
+  platform: "browser",
+  sourcemap: true,
+  clean: true
+})