🚀 [QA] Update release environment

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() {

src/redux-state/selectors/xp.ts

@@ -1,11 +1,14 @@
 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"
 
 export const selectUnclaimedXp = createIslandSelector("unclaimedXp")
 
 export const selectUnclaimedXpById = createSelector(
   [(_, realmId: string) => realmId, selectUnclaimedXp],
-  (realmId, unclaimedXp) => unclaimedXp[realmId]
+  (realmId, unclaimedXp) => unclaimedXp[realmId] ?? []
 )
 
 export const selectUnclaimedXpSumById = createSelector(
@@ -14,3 +17,19 @@ export const selectUnclaimedXpSumById = createSelector(
     unclaimedXp?.reduce((acc, item) => acc + BigInt(item.claim.amount), 0n) ??
     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(
+  [
+    (_, savedUnclaimedDrops: UnclaimedXpData[]) => savedUnclaimedDrops,
+    selectWallet,
+  ],
+  (unclaimedXp, walletState) =>
+    Object.fromEntries(
+      unclaimedXp.map((data) => {
+        const id = getClaimXpTransactionID(data)
+        return [id, selectTransactionStatusById({ wallet: walletState }, id)]
+      })
+    )
+)

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,33 +360,25 @@ export const claimXp = createDappAsyncThunk(
   async (
     {
       id,
-      realmId,
+      unclaimedXpData,
     }: {
       id: string
-      realmId: string
+      unclaimedXpData: UnclaimedXpData
     },
-    { dispatch, getState, extra: { transactionService } }
+    { dispatch, extra: { transactionService } }
   ) => {
-    const {
-      island: { unclaimedXp },
-    } = getState()
-    const claims = unclaimedXp[realmId] ?? []
+    const { distributorContractAddress, claim } = unclaimedXpData
 
-    if (!claims.length) {
+    const receipt = await transactionService.send(id, claimXpTokens, {
+      distributorContractAddress,
+      claim,
+    })
+
+    if (!receipt) {
       return false
     }
 
-    await Promise.allSettled(
-      claims.map(async ({ distributorContractAddress, claim }) => {
-        await transactionService.send(id, claimXpTokens, {
-          distributorContractAddress,
-          claim,
-        })
-      })
-    )
-
     dispatch(fetchUnclaimedXp())
-
     return true
   }
 )

src/redux-state/thunks/wallet.ts

@@ -1,8 +1,12 @@
-import { resolveAddressToWalletData } from "shared/utils"
+import {
+  isClaimXpTransactionID,
+  resolveAddressToWalletData,
+} from "shared/utils"
 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 +211,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(
+      isClaimXpTransactionID
+    )
+
+    claimTransactionIds.forEach((id) => {
+      dispatch(stopTrackingTransactionStatus(id))
+    })
+  }
+)

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 = {
@@ -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 (
     <>
@@ -54,6 +56,7 @@ export default function Button({
           disabled: isDisabled,
           inactive: isInactive,
         })}
+        style={style}
       >
         {children}
         {iconSrc && (

src/shared/components/Popup.tsx

@@ -0,0 +1,88 @@
+import React, { ReactNode } from "react"
+import { animated } from "@react-spring/web"
+import { useVisibilityTransition } from "shared/hooks"
+import Icon from "shared/components/Icon"
+import closeIcon from "shared/assets/icons/s/close.svg"
+
+export type PopupProps = {
+  children: ReactNode
+  isVisible: boolean
+  close: () => void
+  leftPosition?: string | number
+  bottomPosition: string | number
+  rightPosition?: string | number
+  width: string | number
+  hasPointer?: boolean
+  style?: React.CSSProperties
+}
+
+type XAxisPsition = {
+  left?: string | number
+  right?: string | number
+}
+
+export default function Popup({
+  children,
+  isVisible,
+  close,
+  bottomPosition,
+  leftPosition,
+  rightPosition,
+  width,
+  hasPointer = true,
+  style,
+}: PopupProps) {
+  const transition = useVisibilityTransition(isVisible)
+  const xPosition: XAxisPsition = {}
+
+  if (leftPosition !== null) xPosition.left = leftPosition
+  if (rightPosition !== null) xPosition.right = rightPosition
+
+  return (
+    <>
+      <animated.div
+        style={{
+          position: "absolute",
+          bottom: bottomPosition,
+          background: "#043937",
+          borderRadius: 16,
+          padding: "24px 32px 32px",
+          width,
+          pointerEvents: isVisible ? "all" : "none",
+          ...transition,
+          ...xPosition,
+          ...style,
+        }}
+      >
+        <button
+          type="button"
+          className="close_button button_reset"
+          onClick={close}
+        >
+          <Icon src={closeIcon} width="16px" height="16px" />
+        </button>
+        <div className="content">{children}</div>
+      </animated.div>
+      <style jsx>{`
+        .close_button {
+          position: absolute;
+          top: 14px;
+          right: 16px;
+          padding: 0;
+        }
+        .content::after {
+          display: ${hasPointer ? "block" : "none"};
+          content: "";
+          background: #043937;
+          height: 12px;
+          width: 12px;
+          position: absolute;
+          bottom: -4px;
+          right: 26px;
+          border-radius: 2px;
+          rotate: 45deg;
+        }
+      `}</style>
+    </>
+  )
+}