Merge branch 'main' of github.com:tahowallet/dapp into xp-claim-adjus…

…tments

package.json

@@ -8,8 +8,6 @@
     "start": "yarn write-types && patch-package && webpack serve --mode=development",
     "build": "yarn write-types && patch-package && webpack build --mode=production",
     "write-types": "node scripts/write-taho-types.mjs",
-    "generate-xp": "node scripts/generate-xp-merkle-tree.mjs",
-    "distribute-xp": "node scripts/distribute-xp-localhost.mjs",
     "lint:eslint": "eslint .",
     "lint:fix:eslint": "eslint . --fix",
     "lint:config": "prettier -c '**/*.@(json|yaml|toml)'",

src/redux-state/thunks/island.ts

@@ -30,10 +30,10 @@ import {
 import { updateTransactionStatus } from "redux-state/slices/wallet"
 import { bigIntToUserAmount, getAllowanceTransactionID } from "shared/utils"
 import {
+  convertXpData,
   getRealmLeaderboardData,
   getRealmXpSorted,
   getUserLeaderboardRank,
-  getUserXpByMerkleRoot,
 } from "shared/utils/xp"
 import { getXpAllocatable } from "shared/contracts/xp"
 import { fetchWalletBalances } from "./wallet"
@@ -294,7 +294,8 @@ export const fetchLeaderboardData = createDappAsyncThunk(
         const xpData = await getRealmLeaderboardData(realmId)
 
         if (xpData) {
-          const sorted = getRealmXpSorted(xpData)
+          const converted = convertXpData(xpData)
+          const sorted = getRealmXpSorted(converted)
           const leaderboard = sorted.slice(0, 10).map((item, index) => ({
             ...item,
             rank: index + 1,
@@ -329,13 +330,12 @@ export const fetchUnclaimedXp = createDappAsyncThunk(
     await Promise.allSettled(
       Object.entries(realms).map(
         async ([realmId, { realmContractAddress, xpToken }]) => {
-          const claims = await getUserXpByMerkleRoot(realmId, account)
           const unclaimedXp = await transactionService.read(
             getUnclaimedXpDistributions,
             {
               realmAddress: realmContractAddress,
               xpAddress: xpToken.contractAddress,
-              claims,
+              account,
             }
           )
 

src/shared/components/Icon.tsx

@@ -1,13 +1,17 @@
-import classNames from "classnames"
 import React, { CSSProperties } from "react"
+import classNames from "classnames"
+
+type IconType = "mask" | "image"
 
 type IconProps = {
-  type?: "mask" | "image"
+  type?: IconType
   src: string
   width?: string
   height?: string
   color?: string
   style?: CSSProperties
+  ariaLabel?: string
+  onClick?: () => void
 }
 
 export default function Icon({
@@ -17,15 +21,29 @@ export default function Icon({
   src,
   color = "var(--off-white)",
   style,
+  ariaLabel,
+  onClick,
 }: IconProps) {
+  const isButton = !!onClick
+
+  const classes = classNames("icon", {
+    [type]: true,
+    button: isButton,
+  })
+
   return (
     <>
-      <div
-        className={classNames("icon", {
-          [type]: true,
-        })}
-        style={style}
-      />
+      {isButton ? (
+        <button
+          onClick={onClick}
+          aria-label={ariaLabel}
+          type="button"
+          className={classes}
+          style={style}
+        />
+      ) : (
+        <div className={classes} style={style} />
+      )}
       <style jsx>{`
         .icon {
           width: ${width};
@@ -43,6 +61,11 @@ export default function Icon({
           mask-position: center;
           background-color: ${color};
         }
+        .icon.button {
+          background-color: transparent;
+          border: none;
+          cursor: pointer;
+        }
       `}</style>
     </>
   )