From 32e58e303d682ed725409557a1bebd457cde7df1 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Tue, 31 Oct 2023 17:09:37 +0100
Subject: [PATCH 01/28] Send XP claim transactions one by one

Wallet can't handle signing multiple transactions at once, we need to
send them one by one and wait for the previous to either be signed or rejected.
---
 src/redux-state/thunks/island.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/redux-state/thunks/island.ts b/src/redux-state/thunks/island.ts
index 1afcd3876..62aa81381 100644
--- a/src/redux-state/thunks/island.ts
+++ b/src/redux-state/thunks/island.ts
@@ -375,14 +375,18 @@ export const claimXp = createDappAsyncThunk(
       return false
     }
 
-    await Promise.allSettled(
-      claims.map(async ({ distributorContractAddress, claim }) => {
-        await transactionService.send(id, claimXpTokens, {
-          distributorContractAddress,
-          claim,
-        })
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { claim, distributorContractAddress } of claims) {
+      // eslint-disable-next-line no-await-in-loop
+      const receipt = await transactionService.send(id, claimXpTokens, {
+        distributorContractAddress,
+        claim,
       })
-    )
+
+      if (!receipt) {
+        break
+      }
+    }
 
     dispatch(fetchUnclaimedXp())
 

From e6f66443c37c354afc86eb697914371d3bf5fece Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Wed, 1 Nov 2023 14:01:41 +0100
Subject: [PATCH 02/28] Initial refactor of `BannerRewards` to move the
 claiming logic out

---
 .../RealmBanners/BannerRewards.tsx            | 59 ++++------------
 .../RealmDetails/XpClaim/XpClaimModal.tsx     | 70 +++++++++++++++++++
 2 files changed, 82 insertions(+), 47 deletions(-)
 create mode 100644 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx

diff --git a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
index aeb8b1f51..3079a4b8d 100644
--- a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
+++ b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
@@ -1,24 +1,17 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React, { useCallback, useState } from "react"
 import Button from "shared/components/Button"
 import RealmBanner from "shared/components/RealmModal/RealmBanner"
 import RealmIcon from "shared/components/RealmIcon"
 import {
-  claimXp,
   selectDisplayedRealmId,
   selectRealmById,
-  selectTransactionStatusById,
-  stopTrackingTransactionStatus,
-  useDappDispatch,
   useDappSelector,
 } from "redux-state"
 import ClaimCongratulations from "ui/Claim/modals/ClaimCongratulations"
 import Tooltip from "shared/components/Tooltip"
-import { useTransactionSuccessCallback } from "shared/hooks"
-import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import { bigIntToUserAmount, separateThousandsByComma } from "shared/utils"
 import { LINKS } from "shared/constants"
-
-const CLAIM_XP_TX_ID = "claim-xp"
+import XpClaimModal from "../XpClaim/XpClaimModal"
 
 export default function BannerRewards({
   amount,
@@ -27,9 +20,9 @@ export default function BannerRewards({
   amount: bigint
   setJustClaimed: (hasClaimed: boolean) => void
 }) {
-  const dispatch = useDappDispatch()
   const realmId = useDappSelector(selectDisplayedRealmId)
   const realm = useDappSelector((state) => selectRealmById(state, realmId))
+
   const parsedAmount = separateThousandsByComma(bigIntToUserAmount(amount))
   const [savedAmount] = useState(() => parsedAmount)
 
@@ -38,42 +31,14 @@ export default function BannerRewards({
   const [isClaimTransactionModalOpen, setIsClaimTransactionModalOpen] =
     useState(false)
 
-  const claimXpTransactionStatus = useDappSelector((state) =>
-    selectTransactionStatusById(state, CLAIM_XP_TX_ID)
-  )
-
-  const claimTransaction = () => {
-    if (realmId) {
-      dispatch(claimXp({ id: CLAIM_XP_TX_ID, realmId }))
-      setJustClaimed(true) // to keep the banner + congratulation modal open
-    }
-  }
-
-  const claimTransactionData = {
-    id: CLAIM_XP_TX_ID,
-    title: "Sign transaction to claim XP",
-    buttonLabel: "Claim XP",
-    status: claimXpTransactionStatus,
-    onClick: claimTransaction,
-  }
-
-  const claimTransactionSuccessCallback = useCallback(() => {
-    setIsClaimTransactionModalOpen(false)
+  const onClaim = useCallback(() => {
+    setJustClaimed(true) // to keep the banner + congratulation modal open
     setCongratulationsModalOpen(true)
-    dispatch(stopTrackingTransactionStatus(CLAIM_XP_TX_ID))
-  }, [dispatch])
-
-  useTransactionSuccessCallback(
-    claimXpTransactionStatus,
-    claimTransactionSuccessCallback
-  )
+  }, [setJustClaimed])
 
-  useEffect(
-    () => () => {
-      dispatch(stopTrackingTransactionStatus(CLAIM_XP_TX_ID))
-    },
-    [dispatch]
-  )
+  const onClose = useCallback(() => {
+    setIsClaimTransactionModalOpen(false)
+  }, [])
 
   if (!realmId || !realm) return null
 
@@ -156,10 +121,10 @@ export default function BannerRewards({
           `}
         </style>
       </RealmBanner>
-      <TransactionsModal
+      <XpClaimModal
         isOpen={isClaimTransactionModalOpen}
-        close={() => setIsClaimTransactionModalOpen(false)}
-        transactions={[claimTransactionData]}
+        onClaim={onClaim}
+        onClose={onClose}
       />
       {congratulationsModalOpen && (
         <ClaimCongratulations
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
new file mode 100644
index 000000000..59930f321
--- /dev/null
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect } from "react"
+
+import {
+  useDappDispatch,
+  useDappSelector,
+  selectDisplayedRealmId,
+  claimXp,
+  selectTransactionStatusById,
+  stopTrackingTransactionStatus,
+} from "redux-state"
+import TransactionsModal from "shared/components/Transactions/TransactionsModal"
+import { useTransactionSuccessCallback } from "shared/hooks"
+
+const CLAIM_XP_TX_ID = "claim-xp"
+
+export default function XpClaimModal({
+  isOpen,
+  onClaim,
+  onClose,
+}: {
+  isOpen: boolean
+  onClaim: () => void
+  onClose: () => void
+}) {
+  const dispatch = useDappDispatch()
+  const realmId = useDappSelector(selectDisplayedRealmId)
+  const claimXpTransactionStatus = useDappSelector((state) =>
+    selectTransactionStatusById(state, CLAIM_XP_TX_ID)
+  )
+
+  const claimTransaction = () => {
+    if (realmId) {
+      dispatch(claimXp({ id: CLAIM_XP_TX_ID, realmId }))
+    }
+  }
+
+  const claimTransactionSuccessCallback = useCallback(() => {
+    dispatch(stopTrackingTransactionStatus(CLAIM_XP_TX_ID))
+    onClaim()
+    onClose()
+  }, [dispatch, onClose, onClaim])
+
+  useTransactionSuccessCallback(
+    claimXpTransactionStatus,
+    claimTransactionSuccessCallback
+  )
+
+  useEffect(
+    () => () => {
+      dispatch(stopTrackingTransactionStatus(CLAIM_XP_TX_ID))
+    },
+    [dispatch]
+  )
+
+  const claimTransactionData = {
+    id: CLAIM_XP_TX_ID,
+    title: "Sign transaction to claim XP",
+    buttonLabel: "Claim XP",
+    status: claimXpTransactionStatus,
+    onClick: claimTransaction,
+  }
+
+  return (
+    <TransactionsModal
+      isOpen={isOpen}
+      close={() => onClose()}
+      transactions={[claimTransactionData]}
+    />
+  )
+}

From e43050b02d5681a2f5387b0b514d5f054569ea3b Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Wed, 1 Nov 2023 16:53:04 +0100
Subject: [PATCH 03/28] Refactor claiming XP to be triggered by separate
 buttons

---
 src/redux-state/selectors/island.ts           | 14 +++-
 src/redux-state/thunks/island.ts              | 33 +++-----
 src/redux-state/thunks/wallet.ts              | 18 +++++
 .../Transactions/TransactionsModal.tsx        |  3 +-
 .../RealmBanners/BannerRewards.tsx            |  1 +
 .../RealmDetails/XpClaim/XpClaimModal.tsx     | 80 ++++++++++++++-----
 6 files changed, 103 insertions(+), 46 deletions(-)

diff --git a/src/redux-state/selectors/island.ts b/src/redux-state/selectors/island.ts
index 166a6156e..263fdd5dc 100644
--- a/src/redux-state/selectors/island.ts
+++ b/src/redux-state/selectors/island.ts
@@ -2,6 +2,7 @@ import { createSelector } from "@reduxjs/toolkit"
 import { RootState } from "redux-state/reducers"
 import { DAY } from "shared/constants"
 import { isSameAddress } from "shared/utils"
+import { selectTransactionStatusById } from "./wallet"
 
 export const selectIslandMode = (state: RootState) => state.island.mode
 
@@ -155,7 +156,7 @@ export const selectUserLeaderboardRankById = createSelector(
 
 export const selectUnclaimedXpById = createSelector(
   [(_, realmId: string) => realmId, selectUnclaimedXp],
-  (realmId, unclaimedXp) => unclaimedXp[realmId]
+  (realmId, unclaimedXp) => unclaimedXp[realmId] ?? []
 )
 
 export const selectUnclaimedXpSumById = createSelector(
@@ -164,6 +165,17 @@ export const selectUnclaimedXpSumById = createSelector(
     unclaimedXp?.reduce((acc, item) => acc + BigInt(item.claim.amount), 0n) ??
     0n
 )
+
+export const selectXpClaimTransactionStatuses = createSelector(
+  [selectUnclaimedXpById, (state) => state.wallet],
+  (unclaimedXp, walletState) =>
+    Object.fromEntries(
+      unclaimedXp.map((data) => {
+        const id = `claim-xp-${data.merkleRoot}`
+        return [id, selectTransactionStatusById({ wallet: walletState }, id)]
+      })
+    )
+)
 /* Population - selectors */
 export const selectSortedPopulation = createSelector(selectRealms, (realms) => {
   const realmsData = Object.entries(realms).map(([id, data]) => ({
diff --git a/src/redux-state/thunks/island.ts b/src/redux-state/thunks/island.ts
index 62aa81381..6028fb3e8 100644
--- a/src/redux-state/thunks/island.ts
+++ b/src/redux-state/thunks/island.ts
@@ -26,6 +26,7 @@ import {
 import {
   RealmContractDataWithId,
   TransactionProgressStatus,
+  UnclaimedXpData,
 } from "shared/types"
 import { updateTransactionStatus } from "redux-state/slices/wallet"
 import { bigIntToUserAmount, getAllowanceTransactionID } from "shared/utils"
@@ -359,37 +360,25 @@ export const claimXp = createDappAsyncThunk(
   async (
     {
       id,
-      realmId,
+      claimData,
     }: {
       id: string
-      realmId: string
+      claimData: UnclaimedXpData
     },
-    { dispatch, getState, extra: { transactionService } }
+    { dispatch, extra: { transactionService } }
   ) => {
-    const {
-      island: { unclaimedXp },
-    } = getState()
-    const claims = unclaimedXp[realmId] ?? []
-
-    if (!claims.length) {
-      return false
-    }
+    const { distributorContractAddress, claim } = claimData
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const { claim, distributorContractAddress } of claims) {
-      // eslint-disable-next-line no-await-in-loop
-      const receipt = await transactionService.send(id, claimXpTokens, {
-        distributorContractAddress,
-        claim,
-      })
+    const receipt = await transactionService.send(id, claimXpTokens, {
+      distributorContractAddress,
+      claim,
+    })
 
-      if (!receipt) {
-        break
-      }
+    if (!receipt) {
+      return false
     }
 
     dispatch(fetchUnclaimedXp())
-
     return true
   }
 )
diff --git a/src/redux-state/thunks/wallet.ts b/src/redux-state/thunks/wallet.ts
index 56b2ec950..7df054a74 100644
--- a/src/redux-state/thunks/wallet.ts
+++ b/src/redux-state/thunks/wallet.ts
@@ -3,6 +3,7 @@ import {
   updateBalances,
   updateConnectedWallet,
   resetWalletState,
+  stopTrackingTransactionStatus,
 } from "redux-state/slices/wallet"
 import { resetClaiming, setClaimingUser } from "redux-state/slices/claim"
 import { getBalance, getStakeUnlockTime } from "shared/contracts"
@@ -207,3 +208,20 @@ export const fetchWalletBalances = createDappAsyncThunk(
     return balances
   }
 )
+
+export const stopTrackingClaimTransactions = createDappAsyncThunk(
+  "wallet/stopTrackingClaimTransactions",
+  async (_, { getState, dispatch }) => {
+    const {
+      wallet: { transactionStatus },
+    } = getState()
+
+    const claimTransactionIds = Object.keys(transactionStatus).filter((id) =>
+      id.startsWith("claim-xp-")
+    )
+
+    claimTransactionIds.forEach((id) => {
+      dispatch(stopTrackingTransactionStatus(id))
+    })
+  }
+)
diff --git a/src/shared/components/Transactions/TransactionsModal.tsx b/src/shared/components/Transactions/TransactionsModal.tsx
index 253bb7eca..5a7846ebe 100644
--- a/src/shared/components/Transactions/TransactionsModal.tsx
+++ b/src/shared/components/Transactions/TransactionsModal.tsx
@@ -6,7 +6,7 @@ import TransactionProgress, {
 } from "./TransactionProgress"
 
 type TransactionsModalProps = {
-  title?: string
+  title?: React.ReactNode
   isOpen: boolean
   close: () => void
   transactions?: ({ id: string } & TransactionProgressProps)[]
@@ -62,6 +62,7 @@ export default function TransactionsModal({
         <style jsx>{`
           .transactions_container {
             padding: 48px;
+            min-width: 500px;
             gap: 40px;
           }
           .transactions_container h1 {
diff --git a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
index 3079a4b8d..0e8668774 100644
--- a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
+++ b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
@@ -123,6 +123,7 @@ export default function BannerRewards({
       </RealmBanner>
       <XpClaimModal
         isOpen={isClaimTransactionModalOpen}
+        amount={savedAmount}
         onClaim={onClaim}
         onClose={onClose}
       />
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index 59930f321..0b5ff940a 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -1,70 +1,106 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback, useEffect, useMemo } from "react"
 
 import {
   useDappDispatch,
   useDappSelector,
   selectDisplayedRealmId,
   claimXp,
-  selectTransactionStatusById,
-  stopTrackingTransactionStatus,
+  selectUnclaimedXpById,
+  selectXpClaimTransactionStatuses,
+  stopTrackingClaimTransactions,
 } from "redux-state"
 import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import { useTransactionSuccessCallback } from "shared/hooks"
+import { TransactionProgressStatus, UnclaimedXpData } from "shared/types"
+import { bigIntToUserAmount, separateThousandsByComma } from "shared/utils"
 
 const CLAIM_XP_TX_ID = "claim-xp"
 
+const getClaimTxID = (data: UnclaimedXpData) =>
+  `${CLAIM_XP_TX_ID}-${data.merkleRoot}`
+
+const getAggregatedStatus = (statusArray: TransactionProgressStatus[]) => {
+  if (!statusArray.length) {
+    return TransactionProgressStatus.Idle
+  }
+  return statusArray.every(
+    (status) => status === TransactionProgressStatus.Done
+  )
+    ? TransactionProgressStatus.Done
+    : TransactionProgressStatus.Idle
+}
+
 export default function XpClaimModal({
   isOpen,
+  amount,
   onClaim,
   onClose,
 }: {
   isOpen: boolean
+  // this is constant amount that won't be changed after each claim
+  amount: string
   onClaim: () => void
   onClose: () => void
 }) {
   const dispatch = useDappDispatch()
   const realmId = useDappSelector(selectDisplayedRealmId)
-  const claimXpTransactionStatus = useDappSelector((state) =>
-    selectTransactionStatusById(state, CLAIM_XP_TX_ID)
+
+  const unclaimedDrops = useDappSelector((state) =>
+    realmId ? selectUnclaimedXpById(state, realmId) : []
   )
 
-  const claimTransaction = () => {
-    if (realmId) {
-      dispatch(claimXp({ id: CLAIM_XP_TX_ID, realmId }))
-    }
-  }
+  const claimXpTransactionStatus = useDappSelector((state) =>
+    realmId ? selectXpClaimTransactionStatuses(state, realmId) : {}
+  )
 
   const claimTransactionSuccessCallback = useCallback(() => {
-    dispatch(stopTrackingTransactionStatus(CLAIM_XP_TX_ID))
+    dispatch(stopTrackingClaimTransactions())
     onClaim()
     onClose()
-  }, [dispatch, onClose, onClaim])
+  }, [onClose, onClaim, dispatch])
 
   useTransactionSuccessCallback(
-    claimXpTransactionStatus,
+    getAggregatedStatus(Object.values(claimXpTransactionStatus)),
     claimTransactionSuccessCallback
   )
 
   useEffect(
     () => () => {
-      dispatch(stopTrackingTransactionStatus(CLAIM_XP_TX_ID))
+      dispatch(stopTrackingClaimTransactions())
     },
     [dispatch]
   )
 
-  const claimTransactionData = {
-    id: CLAIM_XP_TX_ID,
-    title: "Sign transaction to claim XP",
-    buttonLabel: "Claim XP",
-    status: claimXpTransactionStatus,
-    onClick: claimTransaction,
-  }
+  const claimTransactionsData = useMemo(
+    () =>
+      unclaimedDrops.map((data, index) => {
+        const id = getClaimTxID(data)
+        return {
+          id,
+          title: `${index + 1}. Claim ${separateThousandsByComma(
+            bigIntToUserAmount(BigInt(data.claim.amount))
+          )} XP`,
+          buttonLabel: "Claim XP",
+          status: claimXpTransactionStatus[id],
+          onClick: () => realmId && dispatch(claimXp({ id, claimData: data })),
+        }
+      }),
+    [claimXpTransactionStatus, dispatch, realmId, unclaimedDrops]
+  )
 
   return (
     <TransactionsModal
+      title={
+        <>
+          Claiming{" "}
+          <span style={{ color: "var(--primary-p2-100)", fontSize: "inherit" }}>
+            {amount} XP
+          </span>
+        </>
+      }
       isOpen={isOpen}
       close={() => onClose()}
-      transactions={[claimTransactionData]}
+      transactions={claimTransactionsData}
     />
   )
 }

From 154ced655a1855dbd68cad418593880e4adecf81 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 11:09:52 +0100
Subject: [PATCH 04/28] Rename and create global variable for XP claim tx id

---
 src/redux-state/selectors/island.ts                 |  4 ++--
 src/redux-state/thunks/wallet.ts                    |  9 +++++++--
 src/shared/constants/index.ts                       |  1 +
 src/shared/constants/xp.ts                          |  2 ++
 src/ui/Claim/modals/ClaimCongratulations.tsx        |  6 +++---
 .../RealmDetails/RealmBanners/BannerRewards.tsx     |  6 +++---
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 13 +++++++------
 7 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 src/shared/constants/xp.ts

diff --git a/src/redux-state/selectors/island.ts b/src/redux-state/selectors/island.ts
index 1cd3656da..b55d87204 100644
--- a/src/redux-state/selectors/island.ts
+++ b/src/redux-state/selectors/island.ts
@@ -1,6 +1,6 @@
 import { createSelector } from "@reduxjs/toolkit"
 import { RootState } from "redux-state/reducers"
-import { DAY } from "shared/constants"
+import { CLAIM_XP_TX_ID_PREFIX, DAY } from "shared/constants"
 import { isSameAddress } from "shared/utils"
 import { selectTransactionStatusById } from "./wallet"
 
@@ -171,7 +171,7 @@ export const selectXpClaimTransactionStatuses = createSelector(
   (unclaimedXp, walletState) =>
     Object.fromEntries(
       unclaimedXp.map((data) => {
-        const id = `claim-xp-${data.merkleRoot}`
+        const id = `${CLAIM_XP_TX_ID_PREFIX}${data.merkleRoot}`
         return [id, selectTransactionStatusById({ wallet: walletState }, id)]
       })
     )
diff --git a/src/redux-state/thunks/wallet.ts b/src/redux-state/thunks/wallet.ts
index 7df054a74..dff7e08e3 100644
--- a/src/redux-state/thunks/wallet.ts
+++ b/src/redux-state/thunks/wallet.ts
@@ -8,7 +8,12 @@ import {
 import { resetClaiming, setClaimingUser } from "redux-state/slices/claim"
 import { getBalance, getStakeUnlockTime } from "shared/contracts"
 import { ethers } from "ethers"
-import { ETH_ADDRESS, SECOND, TAHO_ADDRESS } from "shared/constants"
+import {
+  CLAIM_XP_TX_ID_PREFIX,
+  ETH_ADDRESS,
+  SECOND,
+  TAHO_ADDRESS,
+} from "shared/constants"
 import { TokenBalances } from "shared/types"
 import {
   resetIslandAccount,
@@ -217,7 +222,7 @@ export const stopTrackingClaimTransactions = createDappAsyncThunk(
     } = getState()
 
     const claimTransactionIds = Object.keys(transactionStatus).filter((id) =>
-      id.startsWith("claim-xp-")
+      id.startsWith(CLAIM_XP_TX_ID_PREFIX)
     )
 
     claimTransactionIds.forEach((id) => {
diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts
index 07020921f..4193ff886 100644
--- a/src/shared/constants/index.ts
+++ b/src/shared/constants/index.ts
@@ -5,3 +5,4 @@ export * from "./time"
 export * from "./local-storage"
 export { default as LINKS } from "./external-links"
 export * from "./game"
+export * from "./xp"
diff --git a/src/shared/constants/xp.ts b/src/shared/constants/xp.ts
new file mode 100644
index 000000000..e72970ac5
--- /dev/null
+++ b/src/shared/constants/xp.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const CLAIM_XP_TX_ID_PREFIX = "claim-xp-"
diff --git a/src/ui/Claim/modals/ClaimCongratulations.tsx b/src/ui/Claim/modals/ClaimCongratulations.tsx
index 377213d68..6eebd427a 100644
--- a/src/ui/Claim/modals/ClaimCongratulations.tsx
+++ b/src/ui/Claim/modals/ClaimCongratulations.tsx
@@ -5,14 +5,14 @@ import CongratulationsModal from "shared/components/Modals/CongratulationsModal"
 import RealmIcon from "shared/components/RealmIcon"
 
 type ClaimCongratulationsProps = {
-  amount: string
+  displayAmount: string
   description: string
   realmId: string
   close: () => void
 }
 
 export default function ClaimCongratulations({
-  amount,
+  displayAmount,
   description,
   realmId,
   close,
@@ -37,7 +37,7 @@ export default function ClaimCongratulations({
           type="circle"
           width="48px"
         />
-        <div className="taho_amount">{amount}</div>
+        <div className="taho_amount">{displayAmount}</div>
         <p className="taho_description">{description}</p>
         <p className="taho_realm">from {realm?.name}</p>
       </CongratulationsModal>
diff --git a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
index 0e8668774..82c6fe7da 100644
--- a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
+++ b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
@@ -24,7 +24,7 @@ export default function BannerRewards({
   const realm = useDappSelector((state) => selectRealmById(state, realmId))
 
   const parsedAmount = separateThousandsByComma(bigIntToUserAmount(amount))
-  const [savedAmount] = useState(() => parsedAmount)
+  const [savedAndParsedAmount] = useState(() => parsedAmount)
 
   const [congratulationsModalOpen, setCongratulationsModalOpen] =
     useState(false)
@@ -123,14 +123,14 @@ export default function BannerRewards({
       </RealmBanner>
       <XpClaimModal
         isOpen={isClaimTransactionModalOpen}
-        amount={savedAmount}
+        displayAmount={savedAndParsedAmount}
         onClaim={onClaim}
         onClose={onClose}
       />
       {congratulationsModalOpen && (
         <ClaimCongratulations
           realmId={realmId}
-          amount={savedAmount}
+          displayAmount={savedAndParsedAmount}
           description={realm.xpToken.symbol}
           close={() => {
             setCongratulationsModalOpen(false)
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index 0b5ff940a..a1faca0b7 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -14,10 +14,10 @@ import { useTransactionSuccessCallback } from "shared/hooks"
 import { TransactionProgressStatus, UnclaimedXpData } from "shared/types"
 import { bigIntToUserAmount, separateThousandsByComma } from "shared/utils"
 
-const CLAIM_XP_TX_ID = "claim-xp"
+const CLAIM_XP_TX_ID_PREFIX = "claim-xp"
 
 const getClaimTxID = (data: UnclaimedXpData) =>
-  `${CLAIM_XP_TX_ID}-${data.merkleRoot}`
+  `${CLAIM_XP_TX_ID_PREFIX}-${data.merkleRoot}`
 
 const getAggregatedStatus = (statusArray: TransactionProgressStatus[]) => {
   if (!statusArray.length) {
@@ -32,13 +32,14 @@ const getAggregatedStatus = (statusArray: TransactionProgressStatus[]) => {
 
 export default function XpClaimModal({
   isOpen,
-  amount,
+  displayAmount,
   onClaim,
   onClose,
 }: {
   isOpen: boolean
-  // this is constant amount that won't be changed after each claim
-  amount: string
+  // displayAmount - it is alerady parsed to be displayed,
+  // constant amount that won't be changed after each claim
+  displayAmount: string
   onClaim: () => void
   onClose: () => void
 }) {
@@ -94,7 +95,7 @@ export default function XpClaimModal({
         <>
           Claiming{" "}
           <span style={{ color: "var(--primary-p2-100)", fontSize: "inherit" }}>
-            {amount} XP
+            {displayAmount} XP
           </span>
         </>
       }

From 078095dac49077808fea9a25e40c59d5647896b4 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 11:15:45 +0100
Subject: [PATCH 05/28] Refactor claim tx id with new utils

---
 src/redux-state/selectors/island.ts           |  6 ++---
 src/redux-state/thunks/wallet.ts              | 16 ++++++--------
 src/shared/utils/transactions.ts              | 22 ++++++++++++++++++-
 .../RealmDetails/XpClaim/XpClaimModal.tsx     | 21 +++++++++---------
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/redux-state/selectors/island.ts b/src/redux-state/selectors/island.ts
index b55d87204..75f8337fd 100644
--- a/src/redux-state/selectors/island.ts
+++ b/src/redux-state/selectors/island.ts
@@ -1,7 +1,7 @@
 import { createSelector } from "@reduxjs/toolkit"
 import { RootState } from "redux-state/reducers"
-import { CLAIM_XP_TX_ID_PREFIX, DAY } from "shared/constants"
-import { isSameAddress } from "shared/utils"
+import { getClaimXpTransactionID, isSameAddress } from "shared/utils"
+import { DAY } from "shared/constants"
 import { selectTransactionStatusById } from "./wallet"
 
 export const selectIslandMode = (state: RootState) => state.island.mode
@@ -171,7 +171,7 @@ export const selectXpClaimTransactionStatuses = createSelector(
   (unclaimedXp, walletState) =>
     Object.fromEntries(
       unclaimedXp.map((data) => {
-        const id = `${CLAIM_XP_TX_ID_PREFIX}${data.merkleRoot}`
+        const id = getClaimXpTransactionID(data)
         return [id, selectTransactionStatusById({ wallet: walletState }, id)]
       })
     )
diff --git a/src/redux-state/thunks/wallet.ts b/src/redux-state/thunks/wallet.ts
index dff7e08e3..7e03a3f14 100644
--- a/src/redux-state/thunks/wallet.ts
+++ b/src/redux-state/thunks/wallet.ts
@@ -1,4 +1,7 @@
-import { resolveAddressToWalletData } from "shared/utils"
+import {
+  isClaimXpTransactionID,
+  resolveAddressToWalletData,
+} from "shared/utils"
 import {
   updateBalances,
   updateConnectedWallet,
@@ -8,12 +11,7 @@ import {
 import { resetClaiming, setClaimingUser } from "redux-state/slices/claim"
 import { getBalance, getStakeUnlockTime } from "shared/contracts"
 import { ethers } from "ethers"
-import {
-  CLAIM_XP_TX_ID_PREFIX,
-  ETH_ADDRESS,
-  SECOND,
-  TAHO_ADDRESS,
-} from "shared/constants"
+import { ETH_ADDRESS, SECOND, TAHO_ADDRESS } from "shared/constants"
 import { TokenBalances } from "shared/types"
 import {
   resetIslandAccount,
@@ -221,8 +219,8 @@ export const stopTrackingClaimTransactions = createDappAsyncThunk(
       wallet: { transactionStatus },
     } = getState()
 
-    const claimTransactionIds = Object.keys(transactionStatus).filter((id) =>
-      id.startsWith(CLAIM_XP_TX_ID_PREFIX)
+    const claimTransactionIds = Object.keys(transactionStatus).filter(
+      isClaimXpTransactionID
     )
 
     claimTransactionIds.forEach((id) => {
diff --git a/src/shared/utils/transactions.ts b/src/shared/utils/transactions.ts
index 32fa6e004..46f1309b4 100644
--- a/src/shared/utils/transactions.ts
+++ b/src/shared/utils/transactions.ts
@@ -1,4 +1,5 @@
-import { TransactionProgressStatus } from "shared/types"
+import { CLAIM_XP_TX_ID_PREFIX } from "shared/constants"
+import { TransactionProgressStatus, UnclaimedXpData } from "shared/types"
 
 // eslint-disable-next-line import/prefer-default-export
 export const isTransactionPending = (status: TransactionProgressStatus) =>
@@ -8,3 +9,22 @@ export const isTransactionPending = (status: TransactionProgressStatus) =>
   status === TransactionProgressStatus.Sending
 
 export const getAllowanceTransactionID = (id: string) => `${id}_allowance`
+
+export const getClaimXpTransactionID = (data: UnclaimedXpData) =>
+  `${CLAIM_XP_TX_ID_PREFIX}${data.merkleRoot}`
+
+export const isClaimXpTransactionID = (id: string) =>
+  id.startsWith(CLAIM_XP_TX_ID_PREFIX)
+
+export const getAggregatedTransactionStatus = (
+  statusArray: TransactionProgressStatus[]
+) => {
+  if (!statusArray.length) {
+    return TransactionProgressStatus.Idle
+  }
+  return statusArray.every(
+    (status) => status === TransactionProgressStatus.Done
+  )
+    ? TransactionProgressStatus.Done
+    : TransactionProgressStatus.Idle
+}
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index a1faca0b7..a5ca2f8e8 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -11,15 +11,16 @@ import {
 } from "redux-state"
 import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import { useTransactionSuccessCallback } from "shared/hooks"
-import { TransactionProgressStatus, UnclaimedXpData } from "shared/types"
-import { bigIntToUserAmount, separateThousandsByComma } from "shared/utils"
-
-const CLAIM_XP_TX_ID_PREFIX = "claim-xp"
-
-const getClaimTxID = (data: UnclaimedXpData) =>
-  `${CLAIM_XP_TX_ID_PREFIX}-${data.merkleRoot}`
+import { TransactionProgressStatus } from "shared/types"
+import {
+  bigIntToUserAmount,
+  getClaimXpTransactionID,
+  separateThousandsByComma,
+} from "shared/utils"
 
-const getAggregatedStatus = (statusArray: TransactionProgressStatus[]) => {
+const getAggregatedTransactionStatus = (
+  statusArray: TransactionProgressStatus[]
+) => {
   if (!statusArray.length) {
     return TransactionProgressStatus.Idle
   }
@@ -61,7 +62,7 @@ export default function XpClaimModal({
   }, [onClose, onClaim, dispatch])
 
   useTransactionSuccessCallback(
-    getAggregatedStatus(Object.values(claimXpTransactionStatus)),
+    getAggregatedTransactionStatus(Object.values(claimXpTransactionStatus)),
     claimTransactionSuccessCallback
   )
 
@@ -75,7 +76,7 @@ export default function XpClaimModal({
   const claimTransactionsData = useMemo(
     () =>
       unclaimedDrops.map((data, index) => {
-        const id = getClaimTxID(data)
+        const id = getClaimXpTransactionID(data)
         return {
           id,
           title: `${index + 1}. Claim ${separateThousandsByComma(

From 614cb76f6191e27a28a8db928cafb548215c21ff Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 11:27:30 +0100
Subject: [PATCH 06/28] Refactor bigint to user amount utils

---
 .../components/Staking/UnstakeCooldown.tsx    |  4 +-
 src/shared/components/TokenAmountInput.tsx    | 12 +--
 src/shared/utils/misc.ts                      | 80 ----------------
 src/shared/utils/numbers.ts                   | 95 ++++++++++++++++++-
 .../LeaderboardList/LeaderboardItem.tsx       |  7 +-
 .../RealmBanners/BannerRewards.tsx            |  4 +-
 .../RealmDetails/XpClaim/XpClaimModal.tsx     |  7 +-
 7 files changed, 106 insertions(+), 103 deletions(-)

diff --git a/src/shared/components/Staking/UnstakeCooldown.tsx b/src/shared/components/Staking/UnstakeCooldown.tsx
index 0aeaee98d..891904b80 100644
--- a/src/shared/components/Staking/UnstakeCooldown.tsx
+++ b/src/shared/components/Staking/UnstakeCooldown.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 
-import { bigIntToUserAmount, formatTime } from "shared/utils"
+import { bigIntToDisplayUserAmount, formatTime } from "shared/utils"
 import {
   selectDisplayedRealmVeTokenAddress,
   selectTokenBalanceByAddress,
@@ -18,7 +18,7 @@ export default function UnstakeCooldown({
   const veTahoBalance = useDappSelector((state) =>
     selectTokenBalanceByAddress(state, displayedRealmVeTokenAddress)
   )
-  const veTahoUserAmount = bigIntToUserAmount(veTahoBalance)
+  const veTahoUserAmount = bigIntToDisplayUserAmount(veTahoBalance)
 
   return (
     <>
diff --git a/src/shared/components/TokenAmountInput.tsx b/src/shared/components/TokenAmountInput.tsx
index a39161751..bd7593d94 100644
--- a/src/shared/components/TokenAmountInput.tsx
+++ b/src/shared/components/TokenAmountInput.tsx
@@ -1,9 +1,5 @@
 import React from "react"
-import {
-  bigIntToUserAmount,
-  userAmountToBigInt,
-  separateThousandsByComma,
-} from "shared/utils"
+import { userAmountToBigInt, bigIntToDisplayUserAmount } from "shared/utils"
 import {
   selectTokenBalanceByAddress,
   selectTokenSymbolByAddress,
@@ -59,7 +55,7 @@ export default function TokenAmountInput({
     selectTokenSymbolByAddress(state, tokenAddress)
   )
 
-  const maxAmount = bigIntToUserAmount(balance)
+  const maxAmount = bigIntToDisplayUserAmount(balance)
 
   const validate = (value: string) => {
     const result = handleValidate(value, balance)
@@ -72,9 +68,7 @@ export default function TokenAmountInput({
   return (
     <div>
       {label && (
-        <div className="label">{`${label} ${separateThousandsByComma(
-          maxAmount
-        )} ${symbol}`}</div>
+        <div className="label">{`${label} ${maxAmount} ${symbol}`}</div>
       )}
       <SharedInput
         type="number"
diff --git a/src/shared/utils/misc.ts b/src/shared/utils/misc.ts
index df70a7788..431f240a1 100644
--- a/src/shared/utils/misc.ts
+++ b/src/shared/utils/misc.ts
@@ -1,5 +1,3 @@
-import { FixedPointNumber } from "shared/types/stake"
-
 export const isBrowser = typeof window !== "undefined"
 
 export function noop() {}
@@ -14,84 +12,6 @@ export function wait(ms: number): Promise<void> {
   })
 }
 
-function parseToFixedPointNumber(
-  floatingPointString: string
-): FixedPointNumber | undefined {
-  if (!floatingPointString.match(/^[^0-9]*([0-9,]+)(?:\.([0-9]*))?$/)) {
-    return undefined
-  }
-
-  const [whole, decimals, ...extra] = floatingPointString.split(".")
-
-  // Only one `.` supported.
-  if (extra.length > 0) {
-    return undefined
-  }
-
-  const noThousandsSeparatorWhole = whole.replace(",", "")
-  const setDecimals = decimals ?? ""
-
-  try {
-    return {
-      amount: BigInt([noThousandsSeparatorWhole, setDecimals].join("")),
-      decimals: setDecimals.length,
-    }
-  } catch (error) {
-    return undefined
-  }
-}
-
-function convertFixedPoint(
-  fixedPoint: bigint,
-  fixedPointDecimals: number,
-  targetDecimals: number
-): bigint {
-  if (fixedPointDecimals >= targetDecimals) {
-    return fixedPoint / 10n ** BigInt(fixedPointDecimals - targetDecimals)
-  }
-
-  return fixedPoint * 10n ** BigInt(targetDecimals - fixedPointDecimals)
-}
-
-function convertFixedPointNumber(
-  { amount, decimals }: FixedPointNumber,
-  targetDecimals: number
-): FixedPointNumber {
-  return {
-    amount: convertFixedPoint(amount, decimals, targetDecimals),
-    decimals: targetDecimals,
-  }
-}
-
-export function userAmountToBigInt(
-  amount: string,
-  decimals = 18
-): bigint | undefined {
-  const fixedPointAmount = parseToFixedPointNumber(amount)
-
-  if (typeof fixedPointAmount === "undefined") {
-    return undefined
-  }
-
-  const decimalMatched = convertFixedPointNumber(fixedPointAmount, decimals)
-
-  return decimalMatched.amount
-}
-
-export function bigIntToUserAmount(
-  amount: bigint,
-  decimals = 18,
-  desiredDecimals = 2
-): string {
-  const desiredDecimalsAmount =
-    amount / 10n ** BigInt(Math.max(1, decimals - desiredDecimals))
-
-  return (
-    Number(desiredDecimalsAmount) /
-    10 ** Math.min(desiredDecimals, decimals)
-  ).toString()
-}
-
 /**
  * Checks the validity of the entered value from input for token amount.
  * The value shouldn't be:
diff --git a/src/shared/utils/numbers.ts b/src/shared/utils/numbers.ts
index 48af96e2e..8775fd90f 100644
--- a/src/shared/utils/numbers.ts
+++ b/src/shared/utils/numbers.ts
@@ -1,7 +1,100 @@
-// eslint-disable-next-line import/prefer-default-export
+import { FixedPointNumber } from "shared/types/stake"
+
 export const separateThousandsByComma = (
   value: number | bigint | string
 ): string => {
   const adjustedValue = typeof value === "string" ? +value : value
   return adjustedValue.toLocaleString("en-US", { maximumFractionDigits: 2 })
 }
+
+function parseToFixedPointNumber(
+  floatingPointString: string
+): FixedPointNumber | undefined {
+  if (!floatingPointString.match(/^[^0-9]*([0-9,]+)(?:\.([0-9]*))?$/)) {
+    return undefined
+  }
+
+  const [whole, decimals, ...extra] = floatingPointString.split(".")
+
+  // Only one `.` supported.
+  if (extra.length > 0) {
+    return undefined
+  }
+
+  const noThousandsSeparatorWhole = whole.replace(",", "")
+  const setDecimals = decimals ?? ""
+
+  try {
+    return {
+      amount: BigInt([noThousandsSeparatorWhole, setDecimals].join("")),
+      decimals: setDecimals.length,
+    }
+  } catch (error) {
+    return undefined
+  }
+}
+
+function convertFixedPoint(
+  fixedPoint: bigint,
+  fixedPointDecimals: number,
+  targetDecimals: number
+): bigint {
+  if (fixedPointDecimals >= targetDecimals) {
+    return fixedPoint / 10n ** BigInt(fixedPointDecimals - targetDecimals)
+  }
+
+  return fixedPoint * 10n ** BigInt(targetDecimals - fixedPointDecimals)
+}
+
+function convertFixedPointNumber(
+  { amount, decimals }: FixedPointNumber,
+  targetDecimals: number
+): FixedPointNumber {
+  return {
+    amount: convertFixedPoint(amount, decimals, targetDecimals),
+    decimals: targetDecimals,
+  }
+}
+
+export function userAmountToBigInt(
+  amount: string,
+  decimals = 18
+): bigint | undefined {
+  const fixedPointAmount = parseToFixedPointNumber(amount)
+
+  if (typeof fixedPointAmount === "undefined") {
+    return undefined
+  }
+
+  const decimalMatched = convertFixedPointNumber(fixedPointAmount, decimals)
+
+  return decimalMatched.amount
+}
+
+// Parse token amount by moving the decimal point
+export function bigIntToUserAmount(
+  amount: bigint,
+  decimals = 18,
+  desiredDecimals = 2
+): string {
+  const desiredDecimalsAmount =
+    amount / 10n ** BigInt(Math.max(1, decimals - desiredDecimals))
+
+  return (
+    Number(desiredDecimalsAmount) /
+    10 ** Math.min(desiredDecimals, decimals)
+  ).toString()
+}
+
+// Parse token amount by moving the decimal point and separate thousands by comma
+export function bigIntToDisplayUserAmount(
+  amount: bigint | string,
+  decimals = 18,
+  desiredDecimals = 2
+): string {
+  const amountBigInt = typeof amount === "string" ? BigInt(amount) : amount
+
+  return separateThousandsByComma(
+    bigIntToUserAmount(amountBigInt, decimals, desiredDecimals)
+  )
+}
diff --git a/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx b/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx
index 4b5f63761..887586ddf 100644
--- a/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx
+++ b/src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx
@@ -3,10 +3,9 @@ import Icon from "shared/components/Icon"
 import crossIcon from "shared/assets/icons/plus.svg"
 import classNames from "classnames"
 import {
-  bigIntToUserAmount,
+  bigIntToDisplayUserAmount,
   isSameAddress,
   resolveAddressToWalletData,
-  separateThousandsByComma,
   truncateAddress,
 } from "shared/utils"
 import { selectWalletAvatar, useDappSelector } from "redux-state"
@@ -65,9 +64,7 @@ export default function LeaderboardItem({
           <span className="address">
             {username || truncateAddress(address)}
           </span>
-          <span className="xp">
-            {separateThousandsByComma(bigIntToUserAmount(BigInt(amount)))} XP
-          </span>
+          <span className="xp">{bigIntToDisplayUserAmount(amount)} XP</span>
         </div>
       </li>
       <style jsx>{`
diff --git a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
index 82c6fe7da..f309707e9 100644
--- a/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
+++ b/src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx
@@ -9,7 +9,7 @@ import {
 } from "redux-state"
 import ClaimCongratulations from "ui/Claim/modals/ClaimCongratulations"
 import Tooltip from "shared/components/Tooltip"
-import { bigIntToUserAmount, separateThousandsByComma } from "shared/utils"
+import { bigIntToDisplayUserAmount } from "shared/utils"
 import { LINKS } from "shared/constants"
 import XpClaimModal from "../XpClaim/XpClaimModal"
 
@@ -23,7 +23,7 @@ export default function BannerRewards({
   const realmId = useDappSelector(selectDisplayedRealmId)
   const realm = useDappSelector((state) => selectRealmById(state, realmId))
 
-  const parsedAmount = separateThousandsByComma(bigIntToUserAmount(amount))
+  const parsedAmount = bigIntToDisplayUserAmount(amount)
   const [savedAndParsedAmount] = useState(() => parsedAmount)
 
   const [congratulationsModalOpen, setCongratulationsModalOpen] =
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index a5ca2f8e8..39830dc3d 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -13,9 +13,8 @@ import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import { useTransactionSuccessCallback } from "shared/hooks"
 import { TransactionProgressStatus } from "shared/types"
 import {
-  bigIntToUserAmount,
+  bigIntToDisplayUserAmount,
   getClaimXpTransactionID,
-  separateThousandsByComma,
 } from "shared/utils"
 
 const getAggregatedTransactionStatus = (
@@ -79,8 +78,8 @@ export default function XpClaimModal({
         const id = getClaimXpTransactionID(data)
         return {
           id,
-          title: `${index + 1}. Claim ${separateThousandsByComma(
-            bigIntToUserAmount(BigInt(data.claim.amount))
+          title: `${index + 1}. Claim ${bigIntToDisplayUserAmount(
+            data.claim.amount
           )} XP`,
           buttonLabel: "Claim XP",
           status: claimXpTransactionStatus[id],

From 21b4dc39583313a875cba5c6a163c18ef1220e8a Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 11:36:10 +0100
Subject: [PATCH 07/28] Fix XP symbol in the claim modal

---
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index 39830dc3d..e179040d6 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -8,6 +8,7 @@ import {
   selectUnclaimedXpById,
   selectXpClaimTransactionStatuses,
   stopTrackingClaimTransactions,
+  selectRealmById,
 } from "redux-state"
 import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import { useTransactionSuccessCallback } from "shared/hooks"
@@ -45,6 +46,7 @@ export default function XpClaimModal({
 }) {
   const dispatch = useDappDispatch()
   const realmId = useDappSelector(selectDisplayedRealmId)
+  const realm = useDappSelector((state) => selectRealmById(state, realmId))
 
   const unclaimedDrops = useDappSelector((state) =>
     realmId ? selectUnclaimedXpById(state, realmId) : []
@@ -95,7 +97,7 @@ export default function XpClaimModal({
         <>
           Claiming{" "}
           <span style={{ color: "var(--primary-p2-100)", fontSize: "inherit" }}>
-            {displayAmount} XP
+            {displayAmount} {realm?.xpToken.symbol}
           </span>
         </>
       }

From e4efa47a3ad35ca862228dc3246bb0c90b86f5c6 Mon Sep 17 00:00:00 2001
From: Jagoda Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 12:13:47 +0100
Subject: [PATCH 08/28] Fix typo

Co-authored-by: Karolina Kosiorowska <karolina.kosiorowska@tally.cash>
---
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index e179040d6..c3960fec6 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -38,7 +38,7 @@ export default function XpClaimModal({
   onClose,
 }: {
   isOpen: boolean
-  // displayAmount - it is alerady parsed to be displayed,
+  // displayAmount - it is already parsed to be displayed,
   // constant amount that won't be changed after each claim
   displayAmount: string
   onClaim: () => void

From 8c2188ef76828e6143245b9b102af2ea62417572 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 12:17:43 +0100
Subject: [PATCH 09/28] Remove duplicated function

---
 .../Island/RealmDetails/XpClaim/XpClaimModal.tsx  | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index c3960fec6..b28edfc10 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -12,25 +12,12 @@ import {
 } from "redux-state"
 import TransactionsModal from "shared/components/Transactions/TransactionsModal"
 import { useTransactionSuccessCallback } from "shared/hooks"
-import { TransactionProgressStatus } from "shared/types"
 import {
   bigIntToDisplayUserAmount,
+  getAggregatedTransactionStatus,
   getClaimXpTransactionID,
 } from "shared/utils"
 
-const getAggregatedTransactionStatus = (
-  statusArray: TransactionProgressStatus[]
-) => {
-  if (!statusArray.length) {
-    return TransactionProgressStatus.Idle
-  }
-  return statusArray.every(
-    (status) => status === TransactionProgressStatus.Done
-  )
-    ? TransactionProgressStatus.Done
-    : TransactionProgressStatus.Idle
-}
-
 export default function XpClaimModal({
   isOpen,
   displayAmount,

From c1a01c0777a3cbc1d1ddd313fba60921cf99f094 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 12:38:52 +0100
Subject: [PATCH 10/28] Avoid updating unclaimed drops array over the Claim
 modal lifespan

Having one state of `unclaimedDrops` while the claim modal is visible
will provide better UX than updating it after each transaction.
---
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index b28edfc10..510b3d1c1 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 
 import {
   useDappDispatch,
@@ -38,6 +38,7 @@ export default function XpClaimModal({
   const unclaimedDrops = useDappSelector((state) =>
     realmId ? selectUnclaimedXpById(state, realmId) : []
   )
+  const [savedUnclaimedDrops] = useState(() => unclaimedDrops)
 
   const claimXpTransactionStatus = useDappSelector((state) =>
     realmId ? selectXpClaimTransactionStatuses(state, realmId) : {}
@@ -63,7 +64,7 @@ export default function XpClaimModal({
 
   const claimTransactionsData = useMemo(
     () =>
-      unclaimedDrops.map((data, index) => {
+      savedUnclaimedDrops.map((data, index) => {
         const id = getClaimXpTransactionID(data)
         return {
           id,
@@ -75,7 +76,7 @@ export default function XpClaimModal({
           onClick: () => realmId && dispatch(claimXp({ id, claimData: data })),
         }
       }),
-    [claimXpTransactionStatus, dispatch, realmId, unclaimedDrops]
+    [claimXpTransactionStatus, dispatch, realmId, savedUnclaimedDrops]
   )
 
   return (

From 12fb0f5ebb56baf7a0404f3a198cb0559802abaf Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Thu, 2 Nov 2023 14:01:20 +0100
Subject: [PATCH 11/28] Ensure claim XP modal display correct tx status after
 claim is done

---
 src/redux-state/selectors/island.ts                 | 8 +++++++-
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/redux-state/selectors/island.ts b/src/redux-state/selectors/island.ts
index 75f8337fd..01434af41 100644
--- a/src/redux-state/selectors/island.ts
+++ b/src/redux-state/selectors/island.ts
@@ -2,6 +2,7 @@ import { createSelector } from "@reduxjs/toolkit"
 import { RootState } from "redux-state/reducers"
 import { getClaimXpTransactionID, isSameAddress } from "shared/utils"
 import { DAY } from "shared/constants"
+import { UnclaimedXpData } from "shared/types"
 import { selectTransactionStatusById } from "./wallet"
 
 export const selectIslandMode = (state: RootState) => state.island.mode
@@ -166,8 +167,13 @@ export const selectUnclaimedXpSumById = createSelector(
     0n
 )
 
+// We need to use stable instance of unclaimed drops array to ensure they are not causing
+// rerenders while claims transaction modal is visible
 export const selectXpClaimTransactionStatuses = createSelector(
-  [selectUnclaimedXpById, (state) => state.wallet],
+  [
+    (_, savedUnclaimedDrops: UnclaimedXpData[]) => savedUnclaimedDrops,
+    (state) => state.wallet,
+  ],
   (unclaimedXp, walletState) =>
     Object.fromEntries(
       unclaimedXp.map((data) => {
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index 510b3d1c1..2580910b4 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -41,7 +41,7 @@ export default function XpClaimModal({
   const [savedUnclaimedDrops] = useState(() => unclaimedDrops)
 
   const claimXpTransactionStatus = useDappSelector((state) =>
-    realmId ? selectXpClaimTransactionStatuses(state, realmId) : {}
+    selectXpClaimTransactionStatuses(state, savedUnclaimedDrops)
   )
 
   const claimTransactionSuccessCallback = useCallback(() => {

From b52916e108f88988d7953a98372c128b024287ac Mon Sep 17 00:00:00 2001
From: Piotr Kacprzyk <ayioerthi@gmail.com>
Date: Mon, 6 Nov 2023 15:45:01 +0100
Subject: [PATCH 12/28] Display real xp allocatable in the realm modal

---
 src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx b/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
index 550b4f087..e259b1812 100644
--- a/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
+++ b/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import {
   selectIsEndOfSeason,
+  selectRealmById,
   selectSeasonDurationInWeeks,
   selectSeasonWeek,
   selectWeekEndDate,
@@ -23,6 +24,7 @@ export default function QuestsDetails({
   const seasonWeek = useDappSelector(selectSeasonWeek)
   const duration = useDappSelector(selectSeasonDurationInWeeks)
   const isEndOfSeason = useDappSelector(selectIsEndOfSeason)
+  const realm = useDappSelector((state) => selectRealmById(state, realmId))
 
   return (
     <div className="content">
@@ -55,7 +57,7 @@ export default function QuestsDetails({
               width="32px"
               color="var(--primary-p1-100)"
             />
-            {separateThousandsByComma(WEEKLY_XP_ALLOCATION)}
+            {separateThousandsByComma(realm?.xpAllocatable ?? WEEKLY_XP_ALLOCATION)}
           </h1>
           {tokenSymbol}
         </div>

From bab3aecb2e7af89c52e14f42b83c1f6f5bded408 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Mon, 6 Nov 2023 18:25:38 +0100
Subject: [PATCH 13/28] Rename `unclaimedXpData` argument

---
 src/redux-state/thunks/island.ts                    | 6 +++---
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/redux-state/thunks/island.ts b/src/redux-state/thunks/island.ts
index 6028fb3e8..c2baa2d86 100644
--- a/src/redux-state/thunks/island.ts
+++ b/src/redux-state/thunks/island.ts
@@ -360,14 +360,14 @@ export const claimXp = createDappAsyncThunk(
   async (
     {
       id,
-      claimData,
+      unclaimedXpData,
     }: {
       id: string
-      claimData: UnclaimedXpData
+      unclaimedXpData: UnclaimedXpData
     },
     { dispatch, extra: { transactionService } }
   ) => {
-    const { distributorContractAddress, claim } = claimData
+    const { distributorContractAddress, claim } = unclaimedXpData
 
     const receipt = await transactionService.send(id, claimXpTokens, {
       distributorContractAddress,
diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index 2580910b4..e6aed54dd 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -73,7 +73,8 @@ export default function XpClaimModal({
           )} XP`,
           buttonLabel: "Claim XP",
           status: claimXpTransactionStatus[id],
-          onClick: () => realmId && dispatch(claimXp({ id, claimData: data })),
+          onClick: () =>
+            realmId && dispatch(claimXp({ id, unclaimedXpData: data })),
         }
       }),
     [claimXpTransactionStatus, dispatch, realmId, savedUnclaimedDrops]

From 1cb5a004a751b41d818565c4cb68684225e2764a Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Mon, 6 Nov 2023 18:30:34 +0100
Subject: [PATCH 14/28] Move floating point regex to a const

---
 src/shared/utils/numbers.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/shared/utils/numbers.ts b/src/shared/utils/numbers.ts
index 8775fd90f..19fa568fa 100644
--- a/src/shared/utils/numbers.ts
+++ b/src/shared/utils/numbers.ts
@@ -1,5 +1,8 @@
 import { FixedPointNumber } from "shared/types/stake"
 
+// Matches floating point numbers with optional thousands separators
+const FLOATING_POINT_REGEX = /^[^0-9]*([0-9,]+)(?:\.([0-9]*))?$/
+
 export const separateThousandsByComma = (
   value: number | bigint | string
 ): string => {
@@ -10,7 +13,7 @@ export const separateThousandsByComma = (
 function parseToFixedPointNumber(
   floatingPointString: string
 ): FixedPointNumber | undefined {
-  if (!floatingPointString.match(/^[^0-9]*([0-9,]+)(?:\.([0-9]*))?$/)) {
+  if (!floatingPointString.match(FLOATING_POINT_REGEX)) {
     return undefined
   }
 

From 4c0b0b5beb64184ad86c9b0e45121c58ea5a88f4 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Mon, 6 Nov 2023 18:31:29 +0100
Subject: [PATCH 15/28] Don't nest close function in props

---
 src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
index e6aed54dd..b7e641140 100644
--- a/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
+++ b/src/ui/Island/RealmDetails/XpClaim/XpClaimModal.tsx
@@ -91,7 +91,7 @@ export default function XpClaimModal({
         </>
       }
       isOpen={isOpen}
-      close={() => onClose()}
+      close={onClose}
       transactions={claimTransactionsData}
     />
   )

From 6e3ac4bddefb72d1ea11112f38c568e3b4ce6d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 13:06:17 +0100
Subject: [PATCH 16/28] Create resuable `Popup` component

---
 .../index.tsx => shared/components/Popup.tsx}        |  6 +++---
 .../AssistantContent/AssistantFirstRealm.tsx         |  9 +++------
 src/ui/Assistant/AssistantContent/AssistantJoin.tsx  |  6 +++---
 .../Assistant/AssistantContent/AssistantQuests.tsx   |  6 +++---
 .../Assistant/AssistantContent/AssistantWelcome.tsx  | 12 +++++-------
 5 files changed, 17 insertions(+), 22 deletions(-)
 rename src/{ui/Assistant/AssistantContent/index.tsx => shared/components/Popup.tsx} (91%)

diff --git a/src/ui/Assistant/AssistantContent/index.tsx b/src/shared/components/Popup.tsx
similarity index 91%
rename from src/ui/Assistant/AssistantContent/index.tsx
rename to src/shared/components/Popup.tsx
index e749b31fe..599847b84 100644
--- a/src/ui/Assistant/AssistantContent/index.tsx
+++ b/src/shared/components/Popup.tsx
@@ -4,18 +4,18 @@ import { useVisibilityTransition } from "shared/hooks"
 import Icon from "shared/components/Icon"
 import closeIcon from "shared/assets/icons/s/close.svg"
 
-export type AssistantContentProps = {
+export type PopupProps = {
   isVisible: boolean
   close: () => void
   style?: React.CSSProperties
 }
 
-export default function AssistantContent({
+export default function Popup({
   children,
   isVisible,
   close,
   style,
-}: AssistantContentProps & { children: ReactNode }) {
+}: PopupProps & { children: ReactNode }) {
   const transition = useVisibilityTransition(isVisible)
 
   return (
diff --git a/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx b/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
index 39c92c330..615fb4c27 100644
--- a/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useAssistant, useLocalStorageChange } from "shared/hooks"
 import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
-import AssistantContent from "."
+import Popup from "shared/components/Popup"
 
 export default function AssistantFirstRealm() {
   const { updateAssistant, assistantVisible } = useAssistant()
@@ -16,10 +16,7 @@ export default function AssistantFirstRealm() {
 
   return (
     <>
-      <AssistantContent
-        isVisible={assistantVisible("first-realm")}
-        close={closeAssistant}
-      >
+      <Popup isVisible={assistantVisible("first-realm")} close={closeAssistant}>
         <div className="header">Why join a Realm?</div>
         <p className="paragraph">
           Realm Citizens can complete <strong>Quests</strong>, earn{" "}
@@ -32,7 +29,7 @@ export default function AssistantFirstRealm() {
           $TAHO you stake, the more $XP you earn. The more Citizens in each
           Realm, the more your weekly $XP reward gets diluted.
         </p>
-      </AssistantContent>
+      </Popup>
       <style jsx>{`
         .header {
           font: var(--text-h1);
diff --git a/src/ui/Assistant/AssistantContent/AssistantJoin.tsx b/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
index 98fc803a6..cc18dd71a 100644
--- a/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
@@ -1,14 +1,14 @@
 import React from "react"
 import { useAssistant } from "shared/hooks"
 import { LINKS } from "shared/constants"
-import AssistantContent from "."
+import Popup from "shared/components/Popup"
 
 export default function AssistantJoin() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <AssistantContent
+      <Popup
         isVisible={assistantVisible("default")}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
@@ -52,7 +52,7 @@ export default function AssistantJoin() {
           </a>
           .
         </p>
-      </AssistantContent>
+      </Popup>
       <style jsx>{`
         .header {
           font-size: 22px;
diff --git a/src/ui/Assistant/AssistantContent/AssistantQuests.tsx b/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
index 2d8877538..4631142c9 100644
--- a/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
@@ -2,14 +2,14 @@ import React from "react"
 import Icon from "shared/components/Icon"
 import starIcon from "shared/assets/icons/star-2.svg"
 import { useAssistant } from "shared/hooks"
-import AssistantContent from "."
+import Popup from "shared/components/Popup"
 
 export default function AssistantQuests() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <AssistantContent
+      <Popup
         isVisible={assistantVisible("quests")}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
@@ -33,7 +33,7 @@ export default function AssistantQuests() {
           <strong>$XP every Tuesday</strong>... so stay tuned and let us know on
           Discord if you have any questions.
         </p>
-      </AssistantContent>
+      </Popup>
       <style jsx>{`
         .header {
           font-size: 22px;
diff --git a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
index a0d63f1af..084d56e5a 100644
--- a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
@@ -2,16 +2,16 @@ import React from "react"
 import Icon from "shared/components/Icon"
 import realmPointer from "shared/assets/realm-pointer.png"
 import { useAssistant } from "shared/hooks"
-import AssistantContent from "."
+import Popup from "shared/components/Popup"
 
 export default function AssistantWelcome() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <AssistantContent
+      <Popup
         isVisible={assistantVisible("welcome")}
-        style={{width: 620}}
+        style={{ width: 620 }}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
         <div className="header">Welcome to Subscape, Nomad</div>
@@ -23,12 +23,10 @@ export default function AssistantWelcome() {
         <div className="hint row_center">
           <Icon src={realmPointer} type="image" height="37px" width="30px" />
           <p>
-            <strong>
-              Start exploring by hovering over our 5 Beta Realms
-            </strong>
+            <strong>Start exploring by hovering over our 5 Beta Realms</strong>
           </p>
         </div>
-      </AssistantContent>
+      </Popup>
       <style jsx>{`
         .header {
           font-size: 36px;

From 90baf29aa7830b165c5355d27f5062847b55f821 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 13:22:58 +0100
Subject: [PATCH 17/28] Refactor `AssistantContent`

---
 src/shared/components/DApps/DesktopDApp.tsx   | 52 ++++++++++---------
 src/shared/components/Popup.tsx               | 15 ++++--
 .../AssistantContent/AssistantFirstRealm.tsx  |  9 ++--
 .../AssistantContent/AssistantJoin.tsx        |  6 +--
 .../AssistantContent/AssistantQuests.tsx      |  6 +--
 .../AssistantContent/AssistantWelcome.tsx     |  6 +--
 src/ui/Assistant/AssistantContent/index.tsx   | 29 +++++++++++
 7 files changed, 83 insertions(+), 40 deletions(-)
 create mode 100644 src/ui/Assistant/AssistantContent/index.tsx

diff --git a/src/shared/components/DApps/DesktopDApp.tsx b/src/shared/components/DApps/DesktopDApp.tsx
index 581c233e0..59f619d11 100644
--- a/src/shared/components/DApps/DesktopDApp.tsx
+++ b/src/shared/components/DApps/DesktopDApp.tsx
@@ -34,6 +34,7 @@ import LiquidityPool from "ui/LiquidityPool"
 import Footer from "ui/Footer"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { usePostHog } from "posthog-js/react"
+import PrivacyPolicy from "../PrivacyPolicy"
 
 function TrackEvents({ children }: { children: ReactNode[] }) {
   const location = useLocation()
@@ -65,30 +66,33 @@ export default function DesktopDApp() {
 
   return (
     <Router>
-      {(!walletOnboarded || !isConnected) && <Onboarding />}
-      {walletOnboarded && isConnected && (
-        <TrackEvents>
-          <FullPageLoader
-            loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
-          />
-          <IslandComponent />
-          <TestingPanel />
-          {islandMode === "default" && <Nav />}
-          <Switch>
-            <Route path={ROUTES.CLAIM.HOME}>
-              <Claim />
-            </Route>
-            <Route path={ROUTES.REFERRALS}>
-              <Referrals />
-            </Route>
-            {/* TODO should be removed or defined later */}
-            <Route path={ROUTES.LP}>
-              <LiquidityPool />
-            </Route>
-          </Switch>
-          <Footer />
-        </TrackEvents>
-      )}
+      <TrackEvents>
+        {(!walletOnboarded || !isConnected) && <Onboarding />}
+        {walletOnboarded && isConnected && (
+          <>
+            <FullPageLoader
+              loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
+            />
+            <IslandComponent />
+            <TestingPanel />
+            {islandMode === "default" && <Nav />}
+            <Switch>
+              <Route path={ROUTES.CLAIM.HOME}>
+                <Claim />
+              </Route>
+              <Route path={ROUTES.REFERRALS}>
+                <Referrals />
+              </Route>
+              {/* TODO should be removed or defined later */}
+              <Route path={ROUTES.LP}>
+                <LiquidityPool />
+              </Route>
+            </Switch>
+            <Footer />
+          </>
+        )}
+        <PrivacyPolicy />
+      </TrackEvents>
     </Router>
   )
 }
diff --git a/src/shared/components/Popup.tsx b/src/shared/components/Popup.tsx
index 599847b84..af962ef08 100644
--- a/src/shared/components/Popup.tsx
+++ b/src/shared/components/Popup.tsx
@@ -5,8 +5,12 @@ import Icon from "shared/components/Icon"
 import closeIcon from "shared/assets/icons/s/close.svg"
 
 export type PopupProps = {
+  children: ReactNode
   isVisible: boolean
   close: () => void
+  bottomPosition: string | number
+  rightPosition: string | number
+  width: string | number
   style?: React.CSSProperties
 }
 
@@ -14,8 +18,11 @@ export default function Popup({
   children,
   isVisible,
   close,
+  bottomPosition,
+  rightPosition,
+  width,
   style,
-}: PopupProps & { children: ReactNode }) {
+}: PopupProps) {
   const transition = useVisibilityTransition(isVisible)
 
   return (
@@ -24,12 +31,12 @@ export default function Popup({
         style={{
           ...transition,
           position: "absolute",
-          bottom: "calc(100% + 16px)",
-          right: 0,
+          bottom: bottomPosition,
+          right: rightPosition,
           background: "#043937",
           borderRadius: 16,
           padding: "24px 32px 32px",
-          width: 375,
+          width,
           pointerEvents: isVisible ? "all" : "none",
           ...style,
         }}
diff --git a/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx b/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
index 615fb4c27..38590931b 100644
--- a/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useAssistant, useLocalStorageChange } from "shared/hooks"
 import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
-import Popup from "shared/components/Popup"
+import AsisstantContent from "."
 
 export default function AssistantFirstRealm() {
   const { updateAssistant, assistantVisible } = useAssistant()
@@ -16,7 +16,10 @@ export default function AssistantFirstRealm() {
 
   return (
     <>
-      <Popup isVisible={assistantVisible("first-realm")} close={closeAssistant}>
+      <AsisstantContent
+        isVisible={assistantVisible("first-realm")}
+        close={closeAssistant}
+      >
         <div className="header">Why join a Realm?</div>
         <p className="paragraph">
           Realm Citizens can complete <strong>Quests</strong>, earn{" "}
@@ -29,7 +32,7 @@ export default function AssistantFirstRealm() {
           $TAHO you stake, the more $XP you earn. The more Citizens in each
           Realm, the more your weekly $XP reward gets diluted.
         </p>
-      </Popup>
+      </AsisstantContent>
       <style jsx>{`
         .header {
           font: var(--text-h1);
diff --git a/src/ui/Assistant/AssistantContent/AssistantJoin.tsx b/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
index cc18dd71a..d7aee522b 100644
--- a/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
@@ -1,14 +1,14 @@
 import React from "react"
 import { useAssistant } from "shared/hooks"
 import { LINKS } from "shared/constants"
-import Popup from "shared/components/Popup"
+import AsisstantContent from "."
 
 export default function AssistantJoin() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <Popup
+      <AsisstantContent
         isVisible={assistantVisible("default")}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
@@ -52,7 +52,7 @@ export default function AssistantJoin() {
           </a>
           .
         </p>
-      </Popup>
+      </AsisstantContent>
       <style jsx>{`
         .header {
           font-size: 22px;
diff --git a/src/ui/Assistant/AssistantContent/AssistantQuests.tsx b/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
index 4631142c9..2850c930c 100644
--- a/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
@@ -2,14 +2,14 @@ import React from "react"
 import Icon from "shared/components/Icon"
 import starIcon from "shared/assets/icons/star-2.svg"
 import { useAssistant } from "shared/hooks"
-import Popup from "shared/components/Popup"
+import AsisstantContent from "."
 
 export default function AssistantQuests() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <Popup
+      <AsisstantContent
         isVisible={assistantVisible("quests")}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
@@ -33,7 +33,7 @@ export default function AssistantQuests() {
           <strong>$XP every Tuesday</strong>... so stay tuned and let us know on
           Discord if you have any questions.
         </p>
-      </Popup>
+      </AsisstantContent>
       <style jsx>{`
         .header {
           font-size: 22px;
diff --git a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
index 084d56e5a..85e87e0a3 100644
--- a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
@@ -2,14 +2,14 @@ import React from "react"
 import Icon from "shared/components/Icon"
 import realmPointer from "shared/assets/realm-pointer.png"
 import { useAssistant } from "shared/hooks"
-import Popup from "shared/components/Popup"
+import AsisstantContent from "."
 
 export default function AssistantWelcome() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <Popup
+      <AsisstantContent
         isVisible={assistantVisible("welcome")}
         style={{ width: 620 }}
         close={() => updateAssistant({ visible: false, type: "default" })}
@@ -26,7 +26,7 @@ export default function AssistantWelcome() {
             <strong>Start exploring by hovering over our 5 Beta Realms</strong>
           </p>
         </div>
-      </Popup>
+      </AsisstantContent>
       <style jsx>{`
         .header {
           font-size: 36px;
diff --git a/src/ui/Assistant/AssistantContent/index.tsx b/src/ui/Assistant/AssistantContent/index.tsx
new file mode 100644
index 000000000..2558ddd04
--- /dev/null
+++ b/src/ui/Assistant/AssistantContent/index.tsx
@@ -0,0 +1,29 @@
+import React, { CSSProperties, ReactNode } from "react"
+import Popup from "shared/components/Popup"
+
+type AssistantContentProps = {
+  children: ReactNode
+  isVisible: boolean
+  close: () => void
+  style?: CSSProperties
+}
+
+export default function AsisstantContent({
+  children,
+  isVisible,
+  close,
+  style,
+}: AssistantContentProps) {
+  return (
+    <Popup
+      isVisible={isVisible}
+      close={close}
+      style={style}
+      bottomPosition="calc(100% + 16px)"
+      rightPosition={0}
+      width={375}
+    >
+      {children}
+    </Popup>
+  )
+}

From f0f83aa0455abcd52300355a835a1a96ec0f8a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 13:32:39 +0100
Subject: [PATCH 18/28] Make `Popup` x-axis position configurable

---
 src/shared/components/Popup.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/Popup.tsx b/src/shared/components/Popup.tsx
index af962ef08..9a3a42815 100644
--- a/src/shared/components/Popup.tsx
+++ b/src/shared/components/Popup.tsx
@@ -8,36 +8,47 @@ export type PopupProps = {
   children: ReactNode
   isVisible: boolean
   close: () => void
-  bottomPosition: string | number
+  leftPosition?: string | number
+  bottomPosition?: string | number
   rightPosition: string | number
   width: string | number
   style?: React.CSSProperties
 }
 
+type XAxisPsition = {
+  left?: string | number
+  right?: string | number
+}
+
 export default function Popup({
   children,
   isVisible,
   close,
   bottomPosition,
+  leftPosition,
   rightPosition,
   width,
   style,
 }: PopupProps) {
   const transition = useVisibilityTransition(isVisible)
+  const xPosition: XAxisPsition = {}
+
+  if (leftPosition) xPosition.left = leftPosition
+  if (rightPosition) xPosition.right = rightPosition
 
   return (
     <>
       <animated.div
         style={{
-          ...transition,
           position: "absolute",
           bottom: bottomPosition,
-          right: rightPosition,
           background: "#043937",
           borderRadius: 16,
           padding: "24px 32px 32px",
           width,
           pointerEvents: isVisible ? "all" : "none",
+          ...transition,
+          ...xPosition,
           ...style,
         }}
       >

From db4f020b135c24e8406074d9c132e8dcbd7fc164 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 13:59:49 +0100
Subject: [PATCH 19/28] Add privacy policy

---
 src/shared/assets/icons/cookies.svg     |  7 +++
 src/shared/assets/icons/s/new-tab.svg   |  5 ++
 src/shared/components/Button.tsx        | 20 +++++++-
 src/shared/components/Popup.tsx         |  7 ++-
 src/shared/components/PrivacyPolicy.tsx | 66 +++++++++++++++++++++++++
 src/shared/constants/external-links.ts  |  1 +
 6 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/assets/icons/cookies.svg
 create mode 100644 src/shared/assets/icons/s/new-tab.svg
 create mode 100644 src/shared/components/PrivacyPolicy.tsx

diff --git a/src/shared/assets/icons/cookies.svg b/src/shared/assets/icons/cookies.svg
new file mode 100644
index 000000000..c6f3e5faf
--- /dev/null
+++ b/src/shared/assets/icons/cookies.svg
@@ -0,0 +1,7 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icons8-cookie 1">
+<path id="Vector" d="M25.073 13.8962C24.2882 13.8962 23.5861 13.5584 23.0901 13.0268C22.2745 13.5735 21.2957 13.8962 20.2397 13.8962C17.4037 13.8962 15.1042 11.5967 15.1042 8.76074C15.1042 7.70466 15.4239 6.72349 15.9706 5.90726C15.4402 5.41124 15.1042 4.71101 15.1042 3.92741C15.1042 3.3897 15.2656 2.89126 15.535 2.46895C15.1931 2.43995 14.8493 2.41699 14.5001 2.41699C7.82646 2.41699 2.41675 7.8267 2.41675 14.5003C2.41675 21.1739 7.82646 26.5837 14.5001 26.5837C21.1737 26.5837 26.5834 21.1739 26.5834 14.5003C26.5834 14.1505 26.5635 13.8061 26.5339 13.4636C26.1116 13.7342 25.6119 13.8962 25.073 13.8962Z" fill="#E4EEEE" fill-opacity="0.9"/>
+<path id="Vector_2" d="M20.8438 6.64616C20.7247 6.64616 20.6069 6.6696 20.4969 6.71514C20.387 6.76069 20.2871 6.82744 20.2029 6.91159C20.1188 6.99575 20.052 7.09565 20.0065 7.2056C19.9609 7.31555 19.9375 7.4334 19.9375 7.55241C19.9375 7.67142 19.9609 7.78926 20.0065 7.89922C20.052 8.00917 20.1188 8.10907 20.2029 8.19322C20.2871 8.27738 20.387 8.34413 20.4969 8.38967C20.6069 8.43522 20.7247 8.45866 20.8438 8.45866C20.9628 8.45866 21.0806 8.43522 21.1906 8.38967C21.3005 8.34413 21.4004 8.27738 21.4846 8.19322C21.5687 8.10907 21.6355 8.00917 21.681 7.89922C21.7266 7.78926 21.75 7.67142 21.75 7.55241C21.75 7.4334 21.7266 7.31555 21.681 7.2056C21.6355 7.09565 21.5687 6.99575 21.4846 6.91159C21.4004 6.82744 21.3005 6.76069 21.1906 6.71514C21.0806 6.6696 20.9628 6.64616 20.8438 6.64616ZM25.6771 8.45866C25.4367 8.45866 25.2062 8.55414 25.0363 8.72409C24.8663 8.89405 24.7708 9.12456 24.7708 9.36491C24.7708 9.60526 24.8663 9.83577 25.0363 10.0057C25.2062 10.1757 25.4367 10.2712 25.6771 10.2712C25.9174 10.2712 26.1479 10.1757 26.3179 10.0057C26.4879 9.83577 26.5833 9.60526 26.5833 9.36491C26.5833 9.12456 26.4879 8.89405 26.3179 8.72409C26.1479 8.55414 25.9174 8.45866 25.6771 8.45866ZM21.75 2.41699C21.4295 2.41699 21.1222 2.5443 20.8956 2.7709C20.669 2.99751 20.5417 3.30486 20.5417 3.62533C20.5417 3.9458 20.669 4.25314 20.8956 4.47975C21.1222 4.70635 21.4295 4.83366 21.75 4.83366C22.0705 4.83366 22.3778 4.70635 22.6044 4.47975C22.831 4.25314 22.9583 3.9458 22.9583 3.62533C22.9583 3.30486 22.831 2.99751 22.6044 2.7709C22.3778 2.5443 22.0705 2.41699 21.75 2.41699Z" fill="#E4EEEE" fill-opacity="0.9"/>
+<path id="Vector_3" d="M7.85425 11.4792C7.61623 11.4792 7.38054 11.526 7.16063 11.6171C6.94073 11.7082 6.74092 11.8417 6.57262 12.01C6.40431 12.1783 6.2708 12.3781 6.17972 12.5981C6.08863 12.818 6.04175 13.0536 6.04175 13.2917C6.04175 13.5297 6.08863 13.7654 6.17972 13.9853C6.2708 14.2052 6.40431 14.405 6.57262 14.5733C6.74092 14.7416 6.94073 14.8751 7.16063 14.9662C7.38054 15.0573 7.61623 15.1042 7.85425 15.1042C8.09227 15.1042 8.32796 15.0573 8.54786 14.9662C8.76776 14.8751 8.96757 14.7416 9.13588 14.5733C9.30419 14.405 9.43769 14.2052 9.52878 13.9853C9.61987 13.7654 9.66675 13.5297 9.66675 13.2917C9.66675 13.0536 9.61987 12.818 9.52878 12.5981C9.43769 12.3781 9.30419 12.1783 9.13588 12.01C8.96757 11.8417 8.76776 11.7082 8.54786 11.6171C8.32796 11.526 8.09227 11.4792 7.85425 11.4792ZM16.9167 19.3333C16.436 19.3333 15.975 19.5243 15.6351 19.8642C15.2952 20.2041 15.1042 20.6651 15.1042 21.1458C15.1042 21.6265 15.2952 22.0876 15.6351 22.4275C15.975 22.7674 16.436 22.9583 16.9167 22.9583C17.3975 22.9583 17.8585 22.7674 18.1984 22.4275C18.5383 22.0876 18.7292 21.6265 18.7292 21.1458C18.7292 20.6651 18.5383 20.2041 18.1984 19.8642C17.8585 19.5243 17.3975 19.3333 16.9167 19.3333ZM9.96883 18.7292C9.56824 18.7292 9.18406 18.8883 8.90081 19.1716C8.61755 19.4548 8.45841 19.839 8.45841 20.2396C8.45841 20.6402 8.61755 21.0244 8.90081 21.3076C9.18406 21.5909 9.56824 21.75 9.96883 21.75C10.3694 21.75 10.7536 21.5909 11.0369 21.3076C11.3201 21.0244 11.4792 20.6402 11.4792 20.2396C11.4792 19.839 11.3201 19.4548 11.0369 19.1716C10.7536 18.8883 10.3694 18.7292 9.96883 18.7292ZM13.5938 13.8958C13.3535 13.8958 13.123 13.9913 12.953 14.1613C12.7831 14.3312 12.6876 14.5617 12.6876 14.8021C12.6876 15.0424 12.7831 15.2729 12.953 15.4429C13.123 15.6129 13.3535 15.7083 13.5938 15.7083C13.8342 15.7083 14.0647 15.6129 14.2346 15.4429C14.4046 15.2729 14.5001 15.0424 14.5001 14.8021C14.5001 14.5617 14.4046 14.3312 14.2346 14.1613C14.0647 13.9913 13.8342 13.8958 13.5938 13.8958ZM20.8438 15.7083C20.6035 15.7083 20.373 15.8038 20.203 15.9738C20.0331 16.1437 19.9376 16.3742 19.9376 16.6146C19.9376 16.8549 20.0331 17.0854 20.203 17.2554C20.373 17.4254 20.6035 17.5208 20.8438 17.5208C21.0842 17.5208 21.3147 17.4254 21.4846 17.2554C21.6546 17.0854 21.7501 16.8549 21.7501 16.6146C21.7501 16.3742 21.6546 16.1437 21.4846 15.9738C21.3147 15.8038 21.0842 15.7083 20.8438 15.7083ZM11.1772 7.25C10.9368 7.25 10.7063 7.34548 10.5363 7.51543C10.3664 7.68539 10.2709 7.9159 10.2709 8.15625C10.2709 8.3966 10.3664 8.62711 10.5363 8.79707C10.7063 8.96702 10.9368 9.0625 11.1772 9.0625C11.4175 9.0625 11.648 8.96702 11.818 8.79707C11.9879 8.62711 12.0834 8.3966 12.0834 8.15625C12.0834 7.9159 11.9879 7.68539 11.818 7.51543C11.648 7.34548 11.4175 7.25 11.1772 7.25Z" fill="#0D2321"/>
+</g>
+</svg>
diff --git a/src/shared/assets/icons/s/new-tab.svg b/src/shared/assets/icons/s/new-tab.svg
new file mode 100644
index 000000000..0f1c69799
--- /dev/null
+++ b/src/shared/assets/icons/s/new-tab.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/s/new-tab">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M3 2L6 2V4H4L4 12L12 12V10H14V13C14 13.5523 13.5523 14 13 14L3 14C2.44772 14 2 13.5523 2 13L2 3C2 2.44772 2.44772 2 3 2ZM14 4V3C14 2.44772 13.5523 2 13 2H12L9 2V4L10.5858 4L7.29289 7.29289L8.70711 8.70711L12 5.41421V7H14L14 4Z" fill="#ED9A26"/>
+</g>
+</svg>
diff --git a/src/shared/components/Button.tsx b/src/shared/components/Button.tsx
index 579220662..d9c44bc4b 100644
--- a/src/shared/components/Button.tsx
+++ b/src/shared/components/Button.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import React, { CSSProperties, ReactNode } from "react"
 import classnames from "classnames"
 
 type ButtonProps = {
@@ -6,7 +6,7 @@ type ButtonProps = {
   /**
    * @default "primary"
    */
-  type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject"
+  type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject" | "border"
   /**
    * @default "medium"
    */
@@ -21,6 +21,7 @@ type ButtonProps = {
   iconSrc?: string
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
   onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  style?: CSSProperties
 }
 
 export default function Button({
@@ -34,6 +35,7 @@ export default function Button({
   iconSrc,
   onClick,
   onMouseDown,
+  style,
 }: ButtonProps) {
   return (
     <>
@@ -48,12 +50,14 @@ export default function Button({
           tertiary: type === "tertiary",
           twitter: type === "twitter",
           reject: type === "reject",
+          border: type === "border",
           medium: size === "medium",
           large: size === "large",
           reversed: iconPosition === "left",
           disabled: isDisabled,
           inactive: isInactive,
         })}
+        style={style}
       >
         {children}
         {iconSrc && (
@@ -210,6 +214,18 @@ export default function Button({
             height: auto;
           }
 
+          .border {
+            color: var(--primary-p2-100);
+            background: transparent;
+            padding: 4px;
+            border: 2px solid var(--primary-p2-100);
+            transition: all 0.2s;
+          }
+          .border:hover {
+            background: var(--primary-p2-100);
+            color: var(--secondary-s1-90);
+          }
+
           .disabled,
           .disabled:hover,
           .disabled:active {
diff --git a/src/shared/components/Popup.tsx b/src/shared/components/Popup.tsx
index 9a3a42815..6e987b0bb 100644
--- a/src/shared/components/Popup.tsx
+++ b/src/shared/components/Popup.tsx
@@ -9,9 +9,10 @@ export type PopupProps = {
   isVisible: boolean
   close: () => void
   leftPosition?: string | number
-  bottomPosition?: string | number
-  rightPosition: string | number
+  bottomPosition: string | number
+  rightPosition?: string | number
   width: string | number
+  hasPointer?: boolean
   style?: React.CSSProperties
 }
 
@@ -28,6 +29,7 @@ export default function Popup({
   leftPosition,
   rightPosition,
   width,
+  hasPointer = true,
   style,
 }: PopupProps) {
   const transition = useVisibilityTransition(isVisible)
@@ -69,6 +71,7 @@ export default function Popup({
           padding: 0;
         }
         .content::after {
+          display: ${hasPointer ? "block" : "none"};
           content: "";
           background: #043937;
           height: 12px;
diff --git a/src/shared/components/PrivacyPolicy.tsx b/src/shared/components/PrivacyPolicy.tsx
new file mode 100644
index 000000000..f2219cc64
--- /dev/null
+++ b/src/shared/components/PrivacyPolicy.tsx
@@ -0,0 +1,66 @@
+import React from "react"
+import Popup from "shared/components/Popup"
+import cookiesIcon from "shared/assets/icons/cookies.svg"
+import newTabIcon from "shared/assets/icons/s/new-tab.svg"
+import { LINKS } from "shared/constants"
+import Icon from "./Icon"
+import Button from "./Button"
+
+export default function PrivacyPolicy() {
+  return (
+    <>
+      <Popup
+        isVisible
+        close={() => {}}
+        bottomPosition={16}
+        leftPosition={19}
+        width={419}
+        hasPointer={false}
+        style={{ zIndex: "var(--z-assistant-icon)" }}
+      >
+        <div className="header row_center">
+          <Icon src={cookiesIcon} type="image" height="29px" width="29px" />
+          <span>We respect your privacy</span>
+        </div>
+        <p className="content">
+          Continuing to use the website means you are accepting our cookie
+          policy.
+        </p>
+        <div className="row_center" style={{ gap: 38 }}>
+          <Button type="border" style={{ width: 85 }}>
+            OK
+          </Button>
+          <a
+            href={LINKS.PRIVACY_POLICY}
+            title="Privacy policy"
+            className="privacy_link row_center"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span>Privacy policy</span>
+            <Icon src={newTabIcon} type="image" height="16px" width="16px" />
+          </a>
+        </div>
+      </Popup>
+      <style jsx>{`
+        .header {
+          margin-bottom: 16px;
+          gap: 8px;
+        }
+        .header span {
+          font-size: 20px;
+          color: var(--secondary-s1-90);
+        }
+        .content {
+          color: var(--secondary-s1-70);
+          margin-bottom: 16px;
+        }
+        .privacy_link {
+          font-weight: 600;
+          gap: 8px;
+          color: var(--primary-p2-100);
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/src/shared/constants/external-links.ts b/src/shared/constants/external-links.ts
index f217e1c17..86fcec8d9 100644
--- a/src/shared/constants/external-links.ts
+++ b/src/shared/constants/external-links.ts
@@ -8,4 +8,5 @@ export default {
   BRAVE_SUPPORT:
     "https://support.brave.com/hc/en-us/articles/360023646212-How-do-I-configure-global-and-site-specific-Shields-settings-",
   FEEDBACK: "https://tahowallet.typeform.com/subscapebeta",
+  PRIVACY_POLICY: "https://taho.xyz/privacy",
 }

From 2c398e996d1ce521346c6e3f53e19b7d46f064c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 14:08:34 +0100
Subject: [PATCH 20/28] Handle privacy policy popup in `localStorage`

---
 src/shared/components/PrivacyPolicy.tsx | 15 +++++++++++----
 src/shared/constants/local-storage.ts   |  1 +
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/PrivacyPolicy.tsx b/src/shared/components/PrivacyPolicy.tsx
index f2219cc64..765212fe7 100644
--- a/src/shared/components/PrivacyPolicy.tsx
+++ b/src/shared/components/PrivacyPolicy.tsx
@@ -2,16 +2,23 @@ import React from "react"
 import Popup from "shared/components/Popup"
 import cookiesIcon from "shared/assets/icons/cookies.svg"
 import newTabIcon from "shared/assets/icons/s/new-tab.svg"
-import { LINKS } from "shared/constants"
+import { LINKS, LOCAL_STORAGE_COOKIES } from "shared/constants"
+import { useLocalStorageChange } from "shared/hooks"
 import Icon from "./Icon"
 import Button from "./Button"
 
 export default function PrivacyPolicy() {
+  const { value, updateStorage } = useLocalStorageChange<boolean>(
+    LOCAL_STORAGE_COOKIES
+  )
+
+  const closePopup = () => updateStorage(true)
+
   return (
     <>
       <Popup
-        isVisible
-        close={() => {}}
+        isVisible={value === null}
+        close={closePopup}
         bottomPosition={16}
         leftPosition={19}
         width={419}
@@ -27,7 +34,7 @@ export default function PrivacyPolicy() {
           policy.
         </p>
         <div className="row_center" style={{ gap: 38 }}>
-          <Button type="border" style={{ width: 85 }}>
+          <Button type="border" onClick={closePopup} style={{ width: 85 }}>
             OK
           </Button>
           <a
diff --git a/src/shared/constants/local-storage.ts b/src/shared/constants/local-storage.ts
index 35db0a817..4f38b5705 100644
--- a/src/shared/constants/local-storage.ts
+++ b/src/shared/constants/local-storage.ts
@@ -2,3 +2,4 @@ export const LOCAL_STORAGE_ASSISTANT = "taho.assistant"
 export const LOCAL_STORAGE_WALLET = "onboarded_wallet"
 export const LOCAL_STORAGE_VISITED_REALM = "taho.visitedRealm"
 export const LOCAL_STORAGE_BRAVE = "taho.brave"
+export const LOCAL_STORAGE_COOKIES = "taho.cookies"

From 4a17fd783ed7bba25d848d94c823cd555e11245b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 14:42:44 +0100
Subject: [PATCH 21/28] Fix type-o

---
 src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx | 6 +++---
 src/ui/Assistant/AssistantContent/AssistantJoin.tsx       | 6 +++---
 src/ui/Assistant/AssistantContent/AssistantQuests.tsx     | 6 +++---
 src/ui/Assistant/AssistantContent/AssistantWelcome.tsx    | 6 +++---
 src/ui/Assistant/AssistantContent/index.tsx               | 2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx b/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
index 38590931b..39c92c330 100644
--- a/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useAssistant, useLocalStorageChange } from "shared/hooks"
 import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
-import AsisstantContent from "."
+import AssistantContent from "."
 
 export default function AssistantFirstRealm() {
   const { updateAssistant, assistantVisible } = useAssistant()
@@ -16,7 +16,7 @@ export default function AssistantFirstRealm() {
 
   return (
     <>
-      <AsisstantContent
+      <AssistantContent
         isVisible={assistantVisible("first-realm")}
         close={closeAssistant}
       >
@@ -32,7 +32,7 @@ export default function AssistantFirstRealm() {
           $TAHO you stake, the more $XP you earn. The more Citizens in each
           Realm, the more your weekly $XP reward gets diluted.
         </p>
-      </AsisstantContent>
+      </AssistantContent>
       <style jsx>{`
         .header {
           font: var(--text-h1);
diff --git a/src/ui/Assistant/AssistantContent/AssistantJoin.tsx b/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
index d7aee522b..98fc803a6 100644
--- a/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantJoin.tsx
@@ -1,14 +1,14 @@
 import React from "react"
 import { useAssistant } from "shared/hooks"
 import { LINKS } from "shared/constants"
-import AsisstantContent from "."
+import AssistantContent from "."
 
 export default function AssistantJoin() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <AsisstantContent
+      <AssistantContent
         isVisible={assistantVisible("default")}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
@@ -52,7 +52,7 @@ export default function AssistantJoin() {
           </a>
           .
         </p>
-      </AsisstantContent>
+      </AssistantContent>
       <style jsx>{`
         .header {
           font-size: 22px;
diff --git a/src/ui/Assistant/AssistantContent/AssistantQuests.tsx b/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
index 2850c930c..2d8877538 100644
--- a/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantQuests.tsx
@@ -2,14 +2,14 @@ import React from "react"
 import Icon from "shared/components/Icon"
 import starIcon from "shared/assets/icons/star-2.svg"
 import { useAssistant } from "shared/hooks"
-import AsisstantContent from "."
+import AssistantContent from "."
 
 export default function AssistantQuests() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <AsisstantContent
+      <AssistantContent
         isVisible={assistantVisible("quests")}
         close={() => updateAssistant({ visible: false, type: "default" })}
       >
@@ -33,7 +33,7 @@ export default function AssistantQuests() {
           <strong>$XP every Tuesday</strong>... so stay tuned and let us know on
           Discord if you have any questions.
         </p>
-      </AsisstantContent>
+      </AssistantContent>
       <style jsx>{`
         .header {
           font-size: 22px;
diff --git a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
index 85e87e0a3..45b68542c 100644
--- a/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
+++ b/src/ui/Assistant/AssistantContent/AssistantWelcome.tsx
@@ -2,14 +2,14 @@ import React from "react"
 import Icon from "shared/components/Icon"
 import realmPointer from "shared/assets/realm-pointer.png"
 import { useAssistant } from "shared/hooks"
-import AsisstantContent from "."
+import AssistantContent from "."
 
 export default function AssistantWelcome() {
   const { updateAssistant, assistantVisible } = useAssistant()
 
   return (
     <>
-      <AsisstantContent
+      <AssistantContent
         isVisible={assistantVisible("welcome")}
         style={{ width: 620 }}
         close={() => updateAssistant({ visible: false, type: "default" })}
@@ -26,7 +26,7 @@ export default function AssistantWelcome() {
             <strong>Start exploring by hovering over our 5 Beta Realms</strong>
           </p>
         </div>
-      </AsisstantContent>
+      </AssistantContent>
       <style jsx>{`
         .header {
           font-size: 36px;
diff --git a/src/ui/Assistant/AssistantContent/index.tsx b/src/ui/Assistant/AssistantContent/index.tsx
index 2558ddd04..da70315bf 100644
--- a/src/ui/Assistant/AssistantContent/index.tsx
+++ b/src/ui/Assistant/AssistantContent/index.tsx
@@ -8,7 +8,7 @@ type AssistantContentProps = {
   style?: CSSProperties
 }
 
-export default function AsisstantContent({
+export default function AssistantContent({
   children,
   isVisible,
   close,

From 5be3e4c85361b4df6ad0ae154c320f82f5e3ba56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 14:45:24 +0100
Subject: [PATCH 22/28] Remove unnecessary `Button` type

---
 src/shared/components/Button.tsx        | 15 +--------------
 src/shared/components/PrivacyPolicy.tsx |  2 +-
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/shared/components/Button.tsx b/src/shared/components/Button.tsx
index d9c44bc4b..5b090897c 100644
--- a/src/shared/components/Button.tsx
+++ b/src/shared/components/Button.tsx
@@ -6,7 +6,7 @@ type ButtonProps = {
   /**
    * @default "primary"
    */
-  type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject" | "border"
+  type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject"
   /**
    * @default "medium"
    */
@@ -50,7 +50,6 @@ export default function Button({
           tertiary: type === "tertiary",
           twitter: type === "twitter",
           reject: type === "reject",
-          border: type === "border",
           medium: size === "medium",
           large: size === "large",
           reversed: iconPosition === "left",
@@ -214,18 +213,6 @@ export default function Button({
             height: auto;
           }
 
-          .border {
-            color: var(--primary-p2-100);
-            background: transparent;
-            padding: 4px;
-            border: 2px solid var(--primary-p2-100);
-            transition: all 0.2s;
-          }
-          .border:hover {
-            background: var(--primary-p2-100);
-            color: var(--secondary-s1-90);
-          }
-
           .disabled,
           .disabled:hover,
           .disabled:active {
diff --git a/src/shared/components/PrivacyPolicy.tsx b/src/shared/components/PrivacyPolicy.tsx
index 765212fe7..bc926df69 100644
--- a/src/shared/components/PrivacyPolicy.tsx
+++ b/src/shared/components/PrivacyPolicy.tsx
@@ -34,7 +34,7 @@ export default function PrivacyPolicy() {
           policy.
         </p>
         <div className="row_center" style={{ gap: 38 }}>
-          <Button type="border" onClick={closePopup} style={{ width: 85 }}>
+          <Button type="secondary" onClick={closePopup}>
             OK
           </Button>
           <a

From 5671e7718f6bb7ae82639ad6cdeec2b8095ba3b2 Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Tue, 7 Nov 2023 15:19:53 +0100
Subject: [PATCH 23/28] Use predefined wallet selector

---
 src/redux-state/selectors/xp.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/redux-state/selectors/xp.ts b/src/redux-state/selectors/xp.ts
index feb124a27..0c8b3813a 100644
--- a/src/redux-state/selectors/xp.ts
+++ b/src/redux-state/selectors/xp.ts
@@ -1,5 +1,5 @@
 import { createSelector } from "@reduxjs/toolkit"
-import { createIslandSelector } from "redux-state/selectors"
+import { createIslandSelector, selectWallet } from "redux-state/selectors"
 import { UnclaimedXpData } from "shared/types"
 import { getClaimXpTransactionID } from "shared/utils"
 import { selectTransactionStatusById } from "./wallet"
@@ -23,7 +23,7 @@ export const selectUnclaimedXpSumById = createSelector(
 export const selectXpClaimTransactionStatuses = createSelector(
   [
     (_, savedUnclaimedDrops: UnclaimedXpData[]) => savedUnclaimedDrops,
-    (state) => state.wallet,
+    selectWallet,
   ],
   (unclaimedXp, walletState) =>
     Object.fromEntries(

From 7606e5133c88b21d7101127f203fe494e666b6ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Tue, 7 Nov 2023 15:35:18 +0100
Subject: [PATCH 24/28] Change x-axis position condition check

---
 src/shared/components/Popup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Popup.tsx b/src/shared/components/Popup.tsx
index 6e987b0bb..b527b3a9d 100644
--- a/src/shared/components/Popup.tsx
+++ b/src/shared/components/Popup.tsx
@@ -35,8 +35,8 @@ export default function Popup({
   const transition = useVisibilityTransition(isVisible)
   const xPosition: XAxisPsition = {}
 
-  if (leftPosition) xPosition.left = leftPosition
-  if (rightPosition) xPosition.right = rightPosition
+  if (leftPosition !== null) xPosition.left = leftPosition
+  if (rightPosition !== null) xPosition.right = rightPosition
 
   return (
     <>

From 47fdc33b655adcd3ac86d1493cc7d878100555ed Mon Sep 17 00:00:00 2001
From: Piotr Kacprzyk <ayioerthi@gmail.com>
Date: Tue, 7 Nov 2023 16:30:42 +0100
Subject: [PATCH 25/28] xpAllocatable if 0

---
 src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx b/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
index e259b1812..27e1045bd 100644
--- a/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
+++ b/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import {
   selectIsEndOfSeason,
   selectRealmById,
@@ -57,7 +57,7 @@ export default function QuestsDetails({
               width="32px"
               color="var(--primary-p1-100)"
             />
-            {separateThousandsByComma(realm?.xpAllocatable ?? WEEKLY_XP_ALLOCATION)}
+            {separateThousandsByComma(realm?.xpAllocatable || WEEKLY_XP_ALLOCATION)}
           </h1>
           {tokenSymbol}
         </div>

From a84b03966ee9e5eb2bc80718a144aafebf6102e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Wed, 8 Nov 2023 10:43:57 +0100
Subject: [PATCH 26/28] Refactor `DApps` folder

---
 src/index.tsx                                 |  2 +-
 src/shared/components/DApps/DesktopDApp.tsx   | 98 -------------------
 src/ui/DApps/DesktopDApp.tsx                  | 53 ++++++++++
 src/ui/DApps/IslandView.tsx                   | 49 ++++++++++
 .../components => ui}/DApps/MobileDApp.tsx    |  0
 src/{shared/components => ui}/DApps/index.tsx |  0
 6 files changed, 103 insertions(+), 99 deletions(-)
 delete mode 100644 src/shared/components/DApps/DesktopDApp.tsx
 create mode 100644 src/ui/DApps/DesktopDApp.tsx
 create mode 100644 src/ui/DApps/IslandView.tsx
 rename src/{shared/components => ui}/DApps/MobileDApp.tsx (100%)
 rename src/{shared/components => ui}/DApps/index.tsx (100%)

diff --git a/src/index.tsx b/src/index.tsx
index 4de05c15b..f1458cbe5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,7 @@ import web3Onboard from "shared/utils/web3Onboard"
 // no-extraneous-dependencies.
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { PostHogProvider } from "posthog-js/react"
-import DApp from "shared/components/DApps"
+import DApp from "ui/DApps"
 import reduxStore from "./redux-state"
 
 function DAppProviders() {
diff --git a/src/shared/components/DApps/DesktopDApp.tsx b/src/shared/components/DApps/DesktopDApp.tsx
deleted file mode 100644
index 59f619d11..000000000
--- a/src/shared/components/DApps/DesktopDApp.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { ReactNode, useEffect } from "react"
-import {
-  Route,
-  BrowserRouter as Router,
-  Switch,
-  useLocation,
-} from "react-router-dom"
-import {
-  selectHasLoadedBalances,
-  selectHasLoadedRealmData,
-  selectHasLoadedSeasonInfo,
-  selectIslandMode,
-  useDappSelector,
-} from "redux-state"
-import FullPageLoader from "shared/components/FullPageLoader"
-import {
-  useBalanceFetch,
-  useConnect,
-  useGameDataFetch,
-  useGameLoadDataFetch,
-  usePopulationFetch,
-  useWallet,
-  useWalletChange,
-  useWalletOnboarding,
-} from "shared/hooks"
-import Onboarding from "ui/Onboarding"
-import IslandComponent from "ui/Island"
-import TestingPanel from "testing/components/TestingPanel"
-import Nav from "ui/Nav"
-import { ROUTES } from "shared/constants"
-import Claim from "ui/Claim"
-import Referrals from "ui/Referrals"
-import LiquidityPool from "ui/LiquidityPool"
-import Footer from "ui/Footer"
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { usePostHog } from "posthog-js/react"
-import PrivacyPolicy from "../PrivacyPolicy"
-
-function TrackEvents({ children }: { children: ReactNode[] }) {
-  const location = useLocation()
-  const posthog = usePostHog()
-
-  useEffect(() => {
-    posthog?.capture("$pageview", { url: location.pathname })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return children
-}
-
-export default function DesktopDApp() {
-  const islandMode = useDappSelector(selectIslandMode)
-  const { isConnected } = useConnect()
-  const { walletOnboarded } = useWalletOnboarding()
-
-  const hasLoadedRealmData = useDappSelector(selectHasLoadedRealmData)
-  const hasLoadedSeasonInfo = useDappSelector(selectHasLoadedSeasonInfo)
-  const hasBalances = useDappSelector(selectHasLoadedBalances)
-
-  useWallet()
-  useGameLoadDataFetch()
-  useBalanceFetch()
-  usePopulationFetch()
-  useGameDataFetch()
-  useWalletChange()
-
-  return (
-    <Router>
-      <TrackEvents>
-        {(!walletOnboarded || !isConnected) && <Onboarding />}
-        {walletOnboarded && isConnected && (
-          <>
-            <FullPageLoader
-              loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
-            />
-            <IslandComponent />
-            <TestingPanel />
-            {islandMode === "default" && <Nav />}
-            <Switch>
-              <Route path={ROUTES.CLAIM.HOME}>
-                <Claim />
-              </Route>
-              <Route path={ROUTES.REFERRALS}>
-                <Referrals />
-              </Route>
-              {/* TODO should be removed or defined later */}
-              <Route path={ROUTES.LP}>
-                <LiquidityPool />
-              </Route>
-            </Switch>
-            <Footer />
-          </>
-        )}
-        <PrivacyPolicy />
-      </TrackEvents>
-    </Router>
-  )
-}
diff --git a/src/ui/DApps/DesktopDApp.tsx b/src/ui/DApps/DesktopDApp.tsx
new file mode 100644
index 000000000..735e318cd
--- /dev/null
+++ b/src/ui/DApps/DesktopDApp.tsx
@@ -0,0 +1,53 @@
+import React, { ReactNode, useEffect } from "react"
+import { BrowserRouter as Router, useLocation } from "react-router-dom"
+
+import {
+  useBalanceFetch,
+  useConnect,
+  useGameDataFetch,
+  useGameLoadDataFetch,
+  usePopulationFetch,
+  useWallet,
+  useWalletChange,
+  useWalletOnboarding,
+} from "shared/hooks"
+import Onboarding from "ui/Onboarding"
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { usePostHog } from "posthog-js/react"
+import PrivacyPolicy from "../../shared/components/PrivacyPolicy"
+import IslandView from "./IslandView"
+
+function TrackEvents({ children }: { children: ReactNode[] }) {
+  const location = useLocation()
+  const posthog = usePostHog()
+
+  useEffect(() => {
+    posthog?.capture("$pageview", { url: location.pathname })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return children
+}
+
+export default function DesktopDApp() {
+  const { isConnected } = useConnect()
+  const { walletOnboarded } = useWalletOnboarding()
+
+  useWallet()
+  useGameLoadDataFetch()
+  useBalanceFetch()
+  usePopulationFetch()
+  useGameDataFetch()
+  useWalletChange()
+
+  return (
+    <Router>
+      <TrackEvents>
+        {(!walletOnboarded || !isConnected) && <Onboarding />}
+        {walletOnboarded && isConnected && <IslandView />}
+        <PrivacyPolicy />
+      </TrackEvents>
+    </Router>
+  )
+}
diff --git a/src/ui/DApps/IslandView.tsx b/src/ui/DApps/IslandView.tsx
new file mode 100644
index 000000000..3ef4ca600
--- /dev/null
+++ b/src/ui/DApps/IslandView.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import IslandComponent from "ui/Island"
+import TestingPanel from "testing/components/TestingPanel"
+import Nav from "ui/Nav"
+import { ROUTES } from "shared/constants"
+import Claim from "ui/Claim"
+import Referrals from "ui/Referrals"
+import LiquidityPool from "ui/LiquidityPool"
+import Footer from "ui/Footer"
+import {
+  selectHasLoadedBalances,
+  selectHasLoadedRealmData,
+  selectHasLoadedSeasonInfo,
+  selectIslandMode,
+  useDappSelector,
+} from "redux-state"
+import FullPageLoader from "shared/components/FullPageLoader"
+import { Route, Switch } from "react-router-dom"
+
+export default function IslandView() {
+  const islandMode = useDappSelector(selectIslandMode)
+  const hasLoadedRealmData = useDappSelector(selectHasLoadedRealmData)
+  const hasLoadedSeasonInfo = useDappSelector(selectHasLoadedSeasonInfo)
+  const hasBalances = useDappSelector(selectHasLoadedBalances)
+
+  return (
+    <>
+      <FullPageLoader
+        loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
+      />
+      <IslandComponent />
+      <TestingPanel />
+      {islandMode === "default" && <Nav />}
+      <Switch>
+        <Route path={ROUTES.CLAIM.HOME}>
+          <Claim />
+        </Route>
+        <Route path={ROUTES.REFERRALS}>
+          <Referrals />
+        </Route>
+        {/* TODO should be removed or defined later */}
+        <Route path={ROUTES.LP}>
+          <LiquidityPool />
+        </Route>
+      </Switch>
+      <Footer />
+    </>
+  )
+}
diff --git a/src/shared/components/DApps/MobileDApp.tsx b/src/ui/DApps/MobileDApp.tsx
similarity index 100%
rename from src/shared/components/DApps/MobileDApp.tsx
rename to src/ui/DApps/MobileDApp.tsx
diff --git a/src/shared/components/DApps/index.tsx b/src/ui/DApps/index.tsx
similarity index 100%
rename from src/shared/components/DApps/index.tsx
rename to src/ui/DApps/index.tsx

From 2395dd04b4afe64c0c7f894c96d11bbbf3fd9a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Wed, 8 Nov 2023 11:44:27 +0100
Subject: [PATCH 27/28] Fix condition for displaying `Onboarding` component

---
 src/ui/DApps/DesktopDApp.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/DApps/DesktopDApp.tsx b/src/ui/DApps/DesktopDApp.tsx
index 735e318cd..7c07ea2ea 100644
--- a/src/ui/DApps/DesktopDApp.tsx
+++ b/src/ui/DApps/DesktopDApp.tsx
@@ -31,8 +31,8 @@ function TrackEvents({ children }: { children: ReactNode[] }) {
 }
 
 export default function DesktopDApp() {
-  const { isConnected } = useConnect()
   const { walletOnboarded } = useWalletOnboarding()
+  const { isConnected } = useConnect()
 
   useWallet()
   useGameLoadDataFetch()
@@ -44,7 +44,7 @@ export default function DesktopDApp() {
   return (
     <Router>
       <TrackEvents>
-        {(!walletOnboarded || !isConnected) && <Onboarding />}
+        {!walletOnboarded && <Onboarding />}
         {walletOnboarded && isConnected && <IslandView />}
         <PrivacyPolicy />
       </TrackEvents>

From 7a35b498d7e9f0a983ecc8de71173fd59d4b8bdc Mon Sep 17 00:00:00 2001
From: Jagoda Berry Rybacka <jagoda.rybacka@tally.cash>
Date: Wed, 8 Nov 2023 12:22:10 +0100
Subject: [PATCH 28/28] Take testing address from `.env`

---
 src/testing/utils/quickUnstaking.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/testing/utils/quickUnstaking.ts b/src/testing/utils/quickUnstaking.ts
index f489a542c..ce9df198c 100644
--- a/src/testing/utils/quickUnstaking.ts
+++ b/src/testing/utils/quickUnstaking.ts
@@ -1,7 +1,7 @@
 import { ethers } from "ethers"
 import { gameParametersAbi, tahoDeployerAbi } from "shared/contracts/abi"
 
-const TAHO_MULTISIG = "0x6e80164ea60673d64d5d6228beb684a1274bb017"
+const TAHO_MULTISIG = process.env.TAHO_MULTISIG_ADDRESS
 
 const localhostProvider =
   process.env.USE_LOCALHOST_FORK === "true"
@@ -25,6 +25,12 @@ export async function setQuickUnstaking() {
     )
   }
 
+  if (!TAHO_MULTISIG) {
+    throw new Error(
+      "Can't test quick unstaking without a TAHO_MULTISIG_ADDRESS set in .env"
+    )
+  }
+
   await impersonate(TAHO_MULTISIG)
   await setBalance(TAHO_MULTISIG, "0x1000000000000000")