Use merkleDataUrl to fetch XP merkle data (#378)

Closes #305

This PR allows use data from `merkleDataUrl`. With these changes,
distribution testing will be simpler. The test data has been uploaded
here:

```
https://raw.githubusercontent.com/tahowallet/dapp/merkle-data-url-test/src/data/xp/9/allocation-output.json?token=GHSAT0AAAAAACG2NEMHNYT6EB4DGW72ESCCZJORNBA
```

More information
[here](tahowallet/contracts#416) about XP
allocation script.

### Testing
- [x] Check the status of the redux to ensure that the data has been
correctly loaded.

<img width="435" alt="Screenshot 2023-10-17 at 09 49 37"
src="https://github.com/tahowallet/dapp/assets/23117945/01808752-8212-4dc2-9f00-cf0688b04137">

- [x] Make sure the ledarboard is still working.

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/data/xp/9/leaderboard.json

@@ -4,7 +4,6 @@
   "claims": {
     "0x6e80164ea60673D64d5d6228beb684a1274Bb017": {
       "index": 1,
-      "beneficiary": "0x6e80164ea60673D64d5d6228beb684a1274Bb017",
       "amount": "98",
       "proof": [
         "0x24e1385387ca486e079e9435a84f0a78b299c3b9ce9cd52f8cf23ba009ccd002",
@@ -13,15 +12,13 @@
     },
     "0xad23ab2e2ec036a9ec319187e9659fcf8ddd6d38": {
       "index": 2,
-      "beneficiary": "0xad23ab2e2ec036a9ec319187e9659fcf8ddd6d38",
       "amount": "147",
       "proof": [
         "0xd268bbf69994cea70057deab58c962836c02f65a1474d718cf7b8ecb87aa5721"
       ]
     },
     "0x3c44cdddb6a900fa2b585dd299e03d12fa4293bc": {
       "index": 0,
-      "beneficiary": "0x3c44cdddb6a900fa2b585dd299e03d12fa4293bc",
       "amount": "180",
       "proof": [
         "0x547b2845cc7b23ebb4ec1d0b0843f3e1f7f150da11542a41377ed869ac4f0700",

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/contracts/realmsData.ts

@@ -24,9 +24,7 @@ export const getRealmData: ReadTransactionBuilder<
       })
 
       const name: string = await realmContract.name()
-      // TODO: The URL will be related with the XpDistributed event.
-      // The function should be updated when the contracts are ready.
-      const merkleDataUrl: string = await realmContract.questlineUrl()
+      const questlineUrl: string = await realmContract.questlineUrl()
       const xpTokenContractAddress: string = normalizeAddress(
         await realmContract.xp()
       )
@@ -43,7 +41,7 @@ export const getRealmData: ReadTransactionBuilder<
             ...xpTokenDetails,
             contractAddress: xpTokenContractAddress,
           },
-          merkleDataUrl,
+          questlineUrl,
           // Population is fetched separately because it should be updated more frequently than other data for the realm.
           population: 0,
           // XpAllocatable is fetched after all Realm data is initialized.

src/shared/contracts/xp.ts

@@ -3,11 +3,11 @@ import {
   ReadTransactionBuilder,
   UnclaimedXpData,
   WriteTransactionBuilder,
-  XpByMerkleRoot,
   XpDistributor,
   XpMerkleTreeItem,
 } from "shared/types"
 import { isSameAddress, normalizeAddress } from "shared/utils"
+import { getUserXpByMerkleRoot } from "shared/utils/xp"
 import { CONTRACT_DEPLOYMENT_BLOCK_NUMBER } from "shared/constants"
 import {
   xpMerkleDistributorAbi,
@@ -58,6 +58,7 @@ const getDistributorsFromEvents = (
     return {
       distributorContractAddress: normalizeAddress(args.distributor),
       merkleRoot: args.merkleRoot,
+      merkleDataUrl: args.merkleDataUrl,
     }
   })
 
@@ -85,34 +86,36 @@ export const getUnclaimedXpDistributions: ReadTransactionBuilder<
   {
     realmAddress: string
     xpAddress: string
-    claims: XpByMerkleRoot
+    account: string
   },
   UnclaimedXpData[]
-> = async (provider, { realmAddress, xpAddress, claims }) => {
+> = async (provider, { realmAddress, xpAddress, account }) => {
   const distributorAddresses = await getXPDistributorsAddresses(provider, {
     realmContractAddress: realmAddress,
     xpContractAddress: xpAddress,
   })
 
-  const relevantDistributors = distributorAddresses.filter(
-    ({ merkleRoot }) => !!claims[merkleRoot]
-  )
-
   const unclaimedOrNull = await Promise.all(
-    relevantDistributors.map<Promise<UnclaimedXpData | null>>(
-      async ({ distributorContractAddress, merkleRoot }) => {
-        const hasClaimed = await hasClaimedXp(provider, {
-          distributorContractAddress,
-          index: claims[merkleRoot].index,
-        })
-
-        return hasClaimed
-          ? null
-          : {
-              distributorContractAddress,
-              merkleRoot,
-              claim: claims[merkleRoot],
-            }
+    distributorAddresses.map<Promise<UnclaimedXpData | null>>(
+      async ({ distributorContractAddress, merkleRoot, merkleDataUrl }) => {
+        const claims = await getUserXpByMerkleRoot(account, merkleDataUrl)
+
+        if (claims[merkleRoot]) {
+          const hasClaimed = await hasClaimedXp(provider, {
+            distributorContractAddress,
+            index: claims[merkleRoot].index,
+          })
+
+          return hasClaimed
+            ? null
+            : {
+                distributorContractAddress,
+                merkleRoot,
+                merkleDataUrl,
+                claim: claims[merkleRoot],
+              }
+        }
+        return null
       }
     )
   )