Merge branch 'main' into topup

Author: kpyszkowski

.env.example

@@ -8,9 +8,14 @@ REACT_APP_FEATURE_FLAG_TBTC_V2=true
 REACT_APP_FEATURE_FLAG_TBTC_V2_REDEMPTION=true
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
 REACT_APP_FEATURE_FLAG_FEEDBACK_MODULE=false
-REACT_APP_FEATURE_FLAG_POSTHOG=false
-REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
 REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
+
+REACT_APP_FEATURE_FLAG_GOOGLE_TAG_MANAGER=false
+REACT_APP_GOOGLE_TAG_MANAGER_ID=$GOOGLE_TAG_MANAGER_ID
+
+REACT_APP_FEATURE_FLAG_POSTHOG=false
+
+REACT_APP_FEATURE_FLAG_SENTRY=false
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
 REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL

.env.production

@@ -7,11 +7,16 @@ REACT_APP_FEATURE_FLAG_TBTC_V2=true
 REACT_APP_FEATURE_FLAG_TBTC_V2_REDEMPTION=true
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
 REACT_APP_FEATURE_FLAG_FEEDBACK_MODULE=false
+REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
+
+REACT_APP_FEATURE_FLAG_GOOGLE_TAG_MANAGER=$GOOGLE_TAG_MANAGER_SUPPORT
+REACT_APP_GOOGLE_TAG_MANAGER_ID=$GOOGLE_TAG_MANAGER_ID
+
 REACT_APP_FEATURE_FLAG_POSTHOG=$POSTHOG_SUPPORT
 REACT_APP_POSTHOG_API_KEY=$POSTHOG_API_KEY
 REACT_APP_POSTHOG_HOSTNAME_HTTP=$POSTHOG_HOSTNAME_HTTP
+
 REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
-REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
 REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL

.github/workflows/dashboard-mainnet.yml

@@ -58,6 +58,8 @@ jobs:
           SENTRY_SUPPORT: true
           SENTRY_DSN: ${{ secrets.MAINNET_SENTRY_DSN }}
           WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
+          GOOGLE_TAG_MANAGER_SUPPORT: false
+          GOOGLE_TAG_MANAGER_ID: ${{ secrets.GOOGLE_TAG_MANAGER_ID }}
 
       - name: Build
         if: github.event_name == 'release'
@@ -77,6 +79,8 @@ jobs:
           SENTRY_SUPPORT: true
           SENTRY_DSN: ${{ secrets.MAINNET_SENTRY_DSN }}
           WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
+          GOOGLE_TAG_MANAGER_SUPPORT: true
+          GOOGLE_TAG_MANAGER_ID: ${{ secrets.GOOGLE_TAG_MANAGER_ID }}
 
       - uses: actions/upload-artifact@v3
         with:

.github/workflows/reusable-build-and-publish.yml

@@ -138,7 +138,7 @@ jobs:
       - name: Resolve contracts
         shell: bash
         run: |
-          yarn upgrade \
+          yarn upgrade --ignore-scripts \
             @threshold-network/solidity-contracts@${{ steps.set-packages-versions.outputs.threshold-contracts-version }} \
             @keep-network/keep-core@${{ inputs.environment }} \
             @keep-network/keep-ecdsa@${{ inputs.environment }} \

README.md

@@ -56,7 +56,7 @@ git config --global url."https://".insteadOf git://
 
 Ref: https://github.com/keep-network/tbtc-v2/pull/403
 
-Instead of the goerli contracts above you can also use `dapp-development-sepolia` contracts. They offer shorter durations for some specific elements in the contracts in comparison to goerli/mainnet and also allow to manually control mint and unmint process of tbtc-v2 (for more information see please see https://github.com/keep-network/tbtc-v2/pull/403) To install sepolia-dev contracts run:
+Instead of the `sepolia` contracts above you can also use `dapp-development-sepolia` contracts. They offer shorter durations for some specific elements in the contracts in comparison to `sepolia`/`mainnet` and also allow to manually control mint and unmint process of `tbtc-v2` (for more information see please see https://github.com/keep-network/tbtc-v2/pull/403). To install sepolia-dev contracts run:
 
 ```
 yarn @keep-network/keep-core@sepolia \
@@ -118,8 +118,14 @@ REACT_APP_FEATURE_FLAG_TBTC_V2=true
 REACT_APP_FEATURE_FLAG_TBTC_V2_REDEMPTION=true
 REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
 REACT_APP_FEATURE_FLAG_FEEDBACK_MODULE=false
+REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
+
+REACT_APP_FEATURE_FLAG_GOOGLE_TAG_MANAGER=false
+REACT_APP_GOOGLE_TAG_MANAGER_ID=$GOOGLE_TAG_MANAGER_ID
+
 REACT_APP_FEATURE_FLAG_POSTHOG=false
-REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
+
+REACT_APP_FEATURE_FLAG_SENTRY=false
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
 REACT_APP_ELECTRUM_PROTOCOL=wss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "token-dashboard",
-  "version": "1.15.0-pre",
+  "version": "1.16.0-pre",
   "private": true,
   "engines": {
     "node": ">=16"

src/App.tsx

@@ -62,6 +62,7 @@ import { useSentry } from "./hooks/sentry"
 import { useIsEmbed } from "./hooks/useIsEmbed"
 import TBTC from "./pages/tBTC"
 import { useDetectIfEmbed } from "./hooks/useDetectIfEmbed"
+import { useGoogleTagManager } from "./hooks/google-tag-manager"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToVendingMachineContractEvents()
@@ -175,6 +176,7 @@ const AppBody = () => {
   }, [dispatch])
 
   useDetectIfEmbed()
+  useGoogleTagManager()
   usePosthog()
   useCheckBonusEligibility()
   useFetchStakingRewards()

src/components/AnnouncementBanner/index.tsx

@@ -14,7 +14,7 @@ import {
 } from "@threshold-network/components"
 import ButtonLink from "../ButtonLink"
 
-export type AnnouncementBannerContainerProps = {
+type AnnouncementBannerContainerProps = {
   variant?: "primary" | "secondary"
   size?: "sm" | "lg"
   hideCloseBtn?: boolean

src/components/Modal/DeauthorizeApplicationModal/InititateDeauthorization.tsx

@@ -43,8 +43,13 @@ const InitiateDeauthorization: FC<
   isOperatorInPool,
   operator,
 }) => {
-  const shouldUpdateOperatorStatusAfterInitiation =
-    isOperatorInPool !== undefined && !isOperatorInPool
+  let shouldUpdateOperatorStatusAfterInitiation
+  if (stakingAppName === "taco") {
+    shouldUpdateOperatorStatusAfterInitiation = false
+  } else {
+    shouldUpdateOperatorStatusAfterInitiation =
+      isOperatorInPool !== undefined && !isOperatorInPool
+  }
   const { sendTransaction } = useInitiateDeauthorization(
     stakingAppName,
     shouldUpdateOperatorStatusAfterInitiation

src/components/Modal/SelectWalletModal/ConnectCoinbase.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import { useWeb3React } from "@web3-react/core"
 import { WalletConnectionModalBase } from "./components"
-import { ConnectionError, WalletType } from "../../../enums"
+import { ConnectionError } from "../../../enums"
 import { coinbaseConnector } from "../../../web3/connectors"
 import CoinbaseStatusAlert from "./components/CoinbaseStatusAlert"
 import { CoinbaseWallet } from "../../../static/icons/CoinbaseWallet"
@@ -34,7 +34,6 @@ const ConnectCoinbase: FC<{ goBack: () => void; closeModal: () => void }> = ({
       tryAgain={
         connectionRejected ? () => activate(coinbaseConnector) : undefined
       }
-      walletType={WalletType.Coinbase}
     >
       <CoinbaseStatusAlert
         connectionRejected={connectionRejected}

src/components/Modal/SelectWalletModal/ConnectLedgerLive.tsx

@@ -2,7 +2,7 @@ import { FC } from "react"
 import { useWeb3React } from "@web3-react/core"
 import { ledgerLive } from "../../../web3/connectors"
 import { WalletConnectionModalBase } from "./components"
-import { ConnectionError, WalletType } from "../../../enums"
+import { ConnectionError } from "../../../enums"
 import doesErrorInclude from "../../../web3/utils/doesErrorInclude"
 import { LedgerLight } from "../../../static/icons/LedgerLight"
 import { LedgerDark } from "../../../static/icons/LedgerDark"
@@ -34,7 +34,6 @@ const ConnectLedgerLive: FC<{ goBack: () => void; closeModal: () => void }> = ({
           : ""
       }
       tryAgain={connectionRejected ? () => activate(ledgerLive) : undefined}
-      walletType={WalletType.LedgerLive}
       shouldForceCloseModal
     />
   )

src/components/Modal/SelectWalletModal/ConnectMetamask.tsx

@@ -6,7 +6,7 @@ import {
   metamask,
 } from "../../../web3/connectors"
 import { MetamaskStatusAlert, WalletConnectionModalBase } from "./components"
-import { ConnectionError, WalletType } from "../../../enums"
+import { ConnectionError } from "../../../enums"
 import doesErrorInclude from "../../../web3/utils/doesErrorInclude"
 
 const ConnectMetamask: FC<{ goBack: () => void; closeModal: () => void }> = ({
@@ -38,7 +38,6 @@ const ConnectMetamask: FC<{ goBack: () => void; closeModal: () => void }> = ({
         !error ? "The MetaMask extension will open in an external window." : ""
       }
       tryAgain={connectionRejected ? () => activate(metamask) : undefined}
-      walletType={WalletType.Metamask}
     >
       <MetamaskStatusAlert
         metamaskNotInstalled={metamaskNotInstalled}

src/components/Modal/SelectWalletModal/ConnectTaho.tsx

@@ -18,7 +18,7 @@ import {
   WalletInitializeAlert,
   WalletRejectedAlert,
 } from "./components"
-import { ExternalHref, WalletType } from "../../../enums"
+import { ExternalHref } from "../../../enums"
 import Link from "../../Link"
 
 const ConnectTaho: FC<{ goBack: () => void; closeModal: () => void }> = ({
@@ -59,7 +59,6 @@ const ConnectTaho: FC<{ goBack: () => void; closeModal: () => void }> = ({
             }
           : undefined
       }
-      walletType={WalletType.TAHO}
     >
       {isTahoNotInstalled && <InstallTaho />}
       {isTahoNotDefaultWallet && <TahoIsNotSetAsDefaultWallet />}

src/components/Modal/SelectWalletModal/ConnectWalletConnect.tsx

@@ -5,7 +5,7 @@ import {
   WalletConnectionModalBase,
   WalletConnectStatusAlert,
 } from "./components"
-import { ConnectionError, WalletType } from "../../../enums"
+import { ConnectionError } from "../../../enums"
 import doesErrorInclude from "../../../web3/utils/doesErrorInclude"
 import { walletConnect } from "../../../web3/connectors/walletConnect"
 
@@ -35,7 +35,6 @@ const ConnectWalletConnect: FC<{
         walletConnect.provider = undefined
         activate(walletConnect)
       }}
-      walletType={WalletType.WalletConnect}
       shouldForceCloseModal
     >
       <WalletConnectStatusAlert

src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx

@@ -15,8 +15,6 @@ import { BaseModalProps } from "../../../../types"
 import { BodyMd, H4 } from "@threshold-network/components"
 import { AbstractConnector } from "../../../../web3/connectors"
 import { WalletType } from "../../../../enums"
-import { useCapture } from "../../../../hooks/posthog"
-import { PosthogEvent } from "../../../../types/posthog"
 
 interface Props extends BaseModalProps {
   WalletIcon: any
@@ -26,7 +24,6 @@ interface Props extends BaseModalProps {
   onContinue?: () => void
   goBack: () => void
   connector?: AbstractConnector
-  walletType: WalletType
   /**
    * This is required for some of the providers (for example WalletConnect v2),
    * because they have their own modal that is being opened. In that case we
@@ -47,25 +44,16 @@ const WalletConnectionModalBase: FC<Props> = ({
   tryAgain,
   onContinue,
   connector,
-  walletType,
   shouldForceCloseModal,
 }) => {
   const { activate, active, account } = useWeb3React()
-  const captureWalletConnected = useCapture(PosthogEvent.WalletConnected)
 
   useEffect(() => {
     if (!connector) return
 
-    captureWalletConnected({ walletType })
     activate(connector)
     if (shouldForceCloseModal) closeModal()
-  }, [
-    activate,
-    connector,
-    captureWalletConnected,
-    walletType,
-    shouldForceCloseModal,
-  ])
+  }, [activate, connector, shouldForceCloseModal])
 
   return (
     <>

src/components/Modal/tBTC/InitiateUnminting.tsx

@@ -31,6 +31,7 @@ import {
 } from "../../TransactionDetails"
 import ModalCloseButton from "../ModalCloseButton"
 import withBaseModal from "../withBaseModal"
+import { PosthogButtonId } from "../../../types/posthog"
 
 type InitiateUnmintingProps = {
   unmintAmount: string
@@ -126,7 +127,17 @@ const InitiateUnmintingBase: FC<InitiateUnmintingProps> = ({
         <Button onClick={closeModal} variant="outline" mr={2}>
           Cancel
         </Button>
-        <Button onClick={initiateUnminting}>Unmint</Button>
+        <Button
+          onClick={initiateUnminting}
+          data-ph-capture-attribute-button-name={"Unmint (Modal)"}
+          data-ph-capture-attribute-button-id={
+            PosthogButtonId.InitiateUnminting
+          }
+          data-ph-capture-attribute-button-text={"Unmint"}
+          data-ph-capture-attribute-unminted-tbtc-amount={unmintAmount}
+        >
+          Unmint
+        </Button>
       </ModalFooter>
     </>
   )

src/components/Navbar/AccountButton.tsx

@@ -1,7 +1,9 @@
 import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react"
 import { FC } from "react"
+import { useCapture } from "../../hooks/posthog"
 import { useAppDispatch } from "../../hooks/store"
 import { resetStoreAction } from "../../store"
+import { PosthogEvent } from "../../types/posthog"
 import shortenAddress from "../../utils/shortenAddress"
 import Identicon from "../Identicon"
 
@@ -11,8 +13,12 @@ const AccountButton: FC<{
   deactivate: () => void
 }> = ({ openWalletModal, account, deactivate }) => {
   const dispatch = useAppDispatch()
+  const captureWalletDisconnectedEvent = useCapture(
+    PosthogEvent.WalletDisconnected
+  )
 
   const onDisconnectClick = () => {
+    captureWalletDisconnectedEvent()
     dispatch(resetStoreAction())
     deactivate()
   }

src/components/Navbar/NavbarComponent.tsx

@@ -7,7 +7,6 @@ import {
   Stack,
   useColorModeValue,
   H5,
-  HStack,
 } from "@threshold-network/components"
 import { Routes, Route, Link, useMatch } from "react-router-dom"
 import WalletConnectionAlert from "./WalletConnectionAlert"
@@ -20,7 +19,6 @@ import ThresholdWhite from "../../static/icons/ThresholdWhite"
 import useChakraBreakpoint from "../../hooks/useChakraBreakpoint"
 import { pages } from "../../pages"
 import { PageComponent } from "../../types"
-import { NoBridgeFeesPageTitleBadge } from "../tBTC"
 
 interface NavbarComponentProps {
   account?: string | null
@@ -81,15 +79,7 @@ const renderPageTitle = (PageComponent: PageComponent) => {
       path={`${PageComponent.route.path}/*`}
       element={
         PageComponent.route.title ? (
-          <HStack display={{ base: "none", md: "flex" }}>
-            <PageTitle title={PageComponent.route.title} />
-            {PageComponent.route.title === "tBTC" && (
-              <NoBridgeFeesPageTitleBadge
-                display={"flex"}
-                alignItems={"center"}
-              />
-            )}
-          </HStack>
+          <PageTitle title={PageComponent.route.title} />
         ) : (
           <></>
         )
@@ -99,7 +89,11 @@ const renderPageTitle = (PageComponent: PageComponent) => {
 }
 
 const PageTitle: FC<{ title: string }> = ({ title }) => {
-  return <H5 ml={12}>{title}</H5>
+  return (
+    <H5 ml={12} display={{ base: "none", md: "block" }}>
+      {title}
+    </H5>
+  )
 }
 
 const renderMobileHeader = (PageComponent: PageComponent) => {
@@ -109,15 +103,7 @@ const renderMobileHeader = (PageComponent: PageComponent) => {
       path={`${PageComponent.route.path}/*`}
       element={
         PageComponent.route.title ? (
-          <HStack display={{ base: "flex", md: "none" }}>
-            <MobileHeader title={PageComponent.route.title} />
-            {PageComponent.route.title === "tBTC" && (
-              <NoBridgeFeesPageTitleBadge
-                display={"flex"}
-                alignItems={"center"}
-              />
-            )}
-          </HStack>
+          <MobileHeader title={PageComponent.route.title} />
         ) : (
           <></>
         )
@@ -128,7 +114,14 @@ const renderMobileHeader = (PageComponent: PageComponent) => {
 
 const MobileHeader: FC<{ title: string }> = ({ title }) => {
   return (
-    <Box as="header" pl={10} py={6} borderBottom="1px" borderColor="gray.100">
+    <Box
+      display={{ base: "flex", md: "none" }}
+      as="header"
+      pl={10}
+      py={6}
+      borderBottom="1px"
+      borderColor="gray.100"
+    >
       <H5>{title}</H5>
     </Box>
   )