🪄 [QA] Update stage environments (#872)

This is a pull request that upon merging will update stage environments
with recent `main` changes.
The environments that will be updated:
* Stage live: https://stage-live--taho-development.netlify.app/
* Stage fork: https://stage-fork--taho-development.netlify.app/

Read more: [Deployment to Production
Flow](https://github.com/tahowallet/dapp/blob/main/docs/testing-env.md)

.env.defaults

@@ -21,11 +21,14 @@ ALLOW_TENDERLY_RESET="false"
 # Analytics
 ANALYTICS_ENV=DEV
 POSTHOG_API_KEY=
+# Lifecycle
+IS_COMING_SOON="true"
+IS_BETA_CLOSED="false"
+IS_PORTAL_CLOSED="false"
 # Misc
 XP_HOSTING_BASE_URL="" # TBD
 SEASON_LENGTH_IN_WEEKS=8
 CONTRACT_DEPLOYMENT_BLOCK_NUMBER=553443
 SEASON_START_DATE="2023-10-26"
 SKIP_REACT_STRICT_MODE="false"
-IS_COMING_SOON="true"
-SHOW_WAITLIST="true"
+SHOW_WAITLIST="true"

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+## Issues connected
+
+Resolves
+
+## What has been done
+
+- Change 1
+
+## Testing
+
+- [ ] Test 1
+
+## Screenshots / images / videos
+
+Please provide assets necessary for the PR (remove if not applicable)

.github/workflows/test-list/release-test-list.md

@@ -83,11 +83,11 @@ environment 🚀**
    - [ ] with Taho and MM installed and Taho not set as a default - only Taho
          connection should be possible
    - [ ] with Taho not installed and MM installed - should show both options -
-         Taho directs to the Chrome store, MM opens method connection screen and
-         allows connecting
-   - [ ] with Taho not installed and no other - should be directed to the Chrome
-         store to download Taho & given a message in the dapp to do so
-
+         Taho directs to the Chrome store, MM opens the connection method screen
+         and allows connecting
+   - [ ] with Taho not installed and no other - should show both options - Taho
+         directs to the Chrome store, MM opens the connection method screen and
+         directs to the Chrome store
 10. XP
 
 - [ ] an account with XP to claim sees that under Claimable Rewards on the Realm modal (in pre-prod we can see this on stage-live but might be easiest to only test this when we're testing XP drops)

src/env.d.ts

@@ -43,3 +43,17 @@ declare namespace NodeJS {
 interface Navigator {
   brave?: { isBrave: () => boolean }
 }
+
+interface Window {
+  _cio: {
+    identify: ({
+      id,
+      email,
+      created_at,
+    }: {
+      id: string
+      email: string
+      created_at: number
+    }) => void
+  }
+}

src/public/index.html

@@ -4,6 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Subscape</title>
+    <!-- Script for sending data to customer.io -->
+    <script type="text/javascript">
+      var _cio = _cio || [];
+      (function() {
+        var a,b,c;a=function(f){return function(){_cio.push([f].
+        concat(Array.prototype.slice.call(arguments,0)))}};b=["load","identify",
+        "sidentify","track","page"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
+        var t = document.createElement('script'),
+            s = document.getElementsByTagName('script')[0];
+        t.async = true;
+        t.id    = 'cio-tracker';
+        t.setAttribute('data-site-id', '27aa7555738fc28e5fe8');
+        t.src = 'https://assets.customer.io/assets/track.js';
+        s.parentNode.insertBefore(t, s);
+      })();
+    </script>
+    <!-- Script for sending data to customer.io -->
     <style>
       body {
         background: #142D2B;

src/shared/components/Interface/Button.tsx

@@ -2,20 +2,12 @@ import React, { CSSProperties, ReactNode } from "react"
 import classnames from "classnames"
 
 type ButtonProps = {
-  children: ReactNode
-  /**
-   * @default "primary"
-   */
+  children?: ReactNode
   type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject" | "close"
-  /**
-   * @default "medium"
-   */
+  buttonType?: "button" | "submit"
   size?: "medium" | "large"
   isDisabled?: boolean
   isInactive?: boolean
-  /**
-   * @default "right"
-   */
   iconPosition?: "left" | "right"
   iconSize?: "medium" | "large"
   iconSrc?: string
@@ -27,6 +19,7 @@ type ButtonProps = {
 export default function Button({
   children,
   type = "primary",
+  buttonType = "button",
   size = "medium",
   isDisabled = false,
   isInactive = false,
@@ -40,7 +33,8 @@ export default function Button({
   return (
     <>
       <button
-        type="button"
+        // eslint-disable-next-line react/button-has-type
+        type={buttonType}
         onClick={onClick}
         onMouseDown={onMouseDown}
         className={classnames({

src/shared/components/Interface/TokenAmountInput.tsx

@@ -76,24 +76,28 @@ export default function TokenAmountInput({
     [balance, onValidate]
   )
 
-  useEffect(() => {
-    const textToBigIntAmount =
-      textAmount === "" ? null : userAmountToBigInt(textAmount) ?? 0n
-
-    const bigIntToTextAmount = bigIntToPreciseUserAmount(balance)
-
-    // As we may be loosing some precision, we need to compare the values.
-    // Clicking "Max" button may result in bigint that is too big to be
-    // represented as a float number. In this case we need to compare values to
-    // not override the external value that stores the bigint using greater precision.
-    if (textToBigIntAmount !== amount && textAmount !== bigIntToTextAmount) {
-      onChange(textToBigIntAmount)
-    }
-
-    // Make sure this is working only one way:
-    // from the text provided by input to the parent component
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [textAmount, onChange])
+  const internalOnChange = useCallback(
+    (newValue: string) => {
+      setTextAmount(newValue)
+
+      const newValueBigIntAmount =
+        newValue === "" ? null : userAmountToBigInt(newValue) ?? 0n
+
+      const balanceTextAmount = bigIntToPreciseUserAmount(balance)
+
+      // As we may be loosing some precision, we need to compare the values.
+      // Clicking "Max" button may result in bigint that is too big to be
+      // represented as a float number. In this case we need to compare values to
+      // not override the external value that stores the bigint using greater precision.
+      if (
+        newValueBigIntAmount !== amount &&
+        (newValue !== balanceTextAmount || newValueBigIntAmount === balance)
+      ) {
+        onChange(newValueBigIntAmount)
+      }
+    },
+    [amount, balance, onChange]
+  )
 
   useEffect(() => {
     // Allow clearing the input from parent componentthis should be the only case
@@ -115,7 +119,7 @@ export default function TokenAmountInput({
         label={inputLabel}
         value={textAmount}
         disabled={disabled}
-        onChange={setTextAmount}
+        onChange={internalOnChange}
         validate={validate}
         rightComponent={
           <Button

src/shared/constants/external-links.ts

@@ -9,4 +9,5 @@ export default {
     "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",
+  GALXE_NFT: "https://galxe.com/taho/campaign/GC17xttozQ",
 }

src/shared/constants/game.ts

@@ -1,4 +1,5 @@
-export const WEEKLY_XP_ALLOCATION = 1_000_000
+export const WEEKLY_XP_ALLOCATION =
+  process.env.IS_BETA_CLOSED === "true" ? 0 : 1_000_000
 export const WEEKLY_XP_BOOST = 1.2
 export const MOBILE_BREAKPOINT = 854
 export const TABLET_BREAKPOINT = 1152

src/shared/constants/local-storage.ts

@@ -5,3 +5,4 @@ export const LOCAL_STORAGE_BRAVE = "taho.brave"
 export const LOCAL_STORAGE_COOKIES = "taho.cookies"
 export const LOCAL_STORAGE_DISPLAYED_REALMS = "taho.displayedRealm"
 export const LOCAL_STORAGE_DISPLAYED_CHALLENGES = "taho.displayedChallenges"
+export const LOCAL_STORAGE_CACHED_NAMES = "taho.cachedNames"

src/shared/constants/regex.ts

@@ -1,5 +1,10 @@
+/* eslint-disable no-useless-escape */
+
 // Matches floating point numbers with optional thousands separators
 export const FLOATING_POINT_REGEX = /^[^0-9]*([0-9,]+)(?:\.([0-9]*))?$/
 
 // Matches number values and empty string
 export const NUMBER_INPUT_REGEX = /^-?[0-9]*\.?[0-9]*$/
+
+// Matches valid email
+export const EMAIL_REGEX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g

src/shared/hooks/assistant.ts

@@ -1,3 +1,4 @@
+import { useEffect } from "react"
 import { LOCAL_STORAGE_ASSISTANT } from "shared/constants"
 import { selectStakingRealmId, useDappSelector } from "redux-state"
 import { useLocalStorageChange } from "./helpers"
@@ -17,15 +18,30 @@ export function useAssistant(): {
 } {
   const isStakedInRealm = useDappSelector(selectStakingRealmId)
 
-  const { value, updateStorage } = useLocalStorageChange<Assistant>(
-    LOCAL_STORAGE_ASSISTANT
-  )
+  const { value: assistantState, updateStorage: updateAssistantState } =
+    useLocalStorageChange<Assistant>(LOCAL_STORAGE_ASSISTANT)
+
+  useEffect(() => {
+    if (!assistantState) {
+      if (!isStakedInRealm) {
+        updateAssistantState({ visible: true, type: "welcome" })
+      } else {
+        updateAssistantState({ visible: false, type: "default" })
+      }
+    }
+  }, [assistantState, updateAssistantState, isStakedInRealm])
 
   const assistantVisible = (type: AssistantType): boolean => {
     if ((type === "welcome" || type === "first-realm") && isStakedInRealm)
       return false
-    return value ? value.visible && value.type === type : false
+    return assistantState
+      ? assistantState.visible && assistantState.type === type
+      : false
   }
 
-  return { assistant: value, updateAssistant: updateStorage, assistantVisible }
+  return {
+    assistant: assistantState,
+    updateAssistant: updateAssistantState,
+    assistantVisible,
+  }
 }

src/shared/hooks/realm.ts

@@ -1,14 +1,19 @@
 import { easings, useSpring } from "@react-spring/web"
 import { useCallback, useMemo } from "react"
 import {
+  selectDisplayedRealmId,
   selectRealmPanelVisible,
   setDisplayedRealmId,
   setRealmPanelVisible,
   useDappDispatch,
   useDappSelector,
 } from "redux-state"
-import { REALM_PANEL_ANIMATION_TIME } from "shared/constants"
-import { useTabletScreen } from "./helpers"
+import {
+  LOCAL_STORAGE_VISITED_REALM,
+  REALM_PANEL_ANIMATION_TIME,
+} from "shared/constants"
+import { useLocalStorageChange, useTabletScreen } from "./helpers"
+import { useAssistant } from "./assistant"
 
 export function useRealmPanelTransition(position: "left" | "right") {
   const realmPanelVisible = useDappSelector(selectRealmPanelVisible)
@@ -94,3 +99,39 @@ export function usePanelRealmClose() {
 
   return handlePanelClose
 }
+
+export function useOnRealmClick() {
+  const realmId = useDappSelector(selectDisplayedRealmId)
+  const dispatch = useDappDispatch()
+  const { updateAssistant, assistantVisible } = useAssistant()
+
+  const { value: visitedRealm, updateStorage: updateVisitedRealm } =
+    useLocalStorageChange<boolean>(LOCAL_STORAGE_VISITED_REALM)
+
+  const onRealmClick = useCallback(
+    (id: string) => {
+      if (!realmId) {
+        dispatch(setDisplayedRealmId(String(id)))
+        dispatch(setRealmPanelVisible(true))
+
+        if (assistantVisible("welcome"))
+          updateAssistant({ visible: false, type: "default" })
+
+        if (!visitedRealm) {
+          updateVisitedRealm(true)
+          updateAssistant({ visible: true, type: "first-realm" })
+        }
+      }
+    },
+    [
+      assistantVisible,
+      dispatch,
+      realmId,
+      updateAssistant,
+      updateVisitedRealm,
+      visitedRealm,
+    ]
+  )
+
+  return onRealmClick
+}

src/shared/hooks/wallets.ts

@@ -13,11 +13,14 @@ import {
   selectDisplayedRealmId,
   connectArbitrumProviderFallback,
   fetchPopulation,
+  updateConnectedWallet,
+  selectWalletName,
 } from "redux-state"
 import {
   ARBITRUM_SEPOLIA,
   ARBITRUM_SEPOLIA_RPC_FALLBACK,
   BALANCE_UPDATE_INTERVAL,
+  LOCAL_STORAGE_CACHED_NAMES,
   LOCAL_STORAGE_WALLET,
   POPULATION_FETCH_INTERVAL,
 } from "shared/constants"
@@ -27,6 +30,10 @@ import { usePostHog } from "posthog-js/react"
 import { useAssistant } from "./assistant"
 import { useInterval, useLocalStorageChange } from "./helpers"
 
+type CachedNames = {
+  [key: string]: { ens?: { name: string }; uns?: { name: string } }
+}
+
 class StaticJsonBatchRpcProvider extends ethers.providers.JsonRpcBatchProvider {
   override async detectNetwork(): Promise<Network> {
     let { network } = this
@@ -169,6 +176,13 @@ export function useWalletOnboarding(): {
   const { value, updateStorage } =
     useLocalStorageChange<string>(LOCAL_STORAGE_WALLET)
 
+  // Automatically clear the onboarded wallet if portal is closed
+  useEffect(() => {
+    if (value && process.env.IS_PORTAL_CLOSED === "true") {
+      updateStorage("")
+    }
+  }, [value, updateStorage])
+
   return { walletOnboarded: value, updateWalletOnboarding: updateStorage }
 }
 
@@ -263,3 +277,35 @@ export function useWalletChange() {
     isStaked,
   ])
 }
+
+export function useCachedWalletName() {
+  const address = useDappSelector(selectWalletAddress)
+  const walletName = useDappSelector(selectWalletName)
+  const dispatch = useDappDispatch()
+
+  useEffect(() => {
+    const handleCachedNamesUpdate = () => {
+      if (!address) return
+
+      const cachedNames = localStorage.getItem(LOCAL_STORAGE_CACHED_NAMES)
+      if (!cachedNames) return
+
+      const parsedCachedNames: CachedNames = JSON.parse(cachedNames)
+      const { ens, uns } = parsedCachedNames[address]
+
+      if (ens || uns) {
+        // If cached name and redux wallet name are the same do not dispatch wallet update action
+        if (walletName === ens?.name || walletName === uns?.name) return
+
+        dispatch(
+          updateConnectedWallet({ address, name: ens?.name ?? uns?.name })
+        )
+      }
+    }
+
+    handleCachedNamesUpdate()
+    window.addEventListener("storage", handleCachedNamesUpdate)
+
+    return () => window.removeEventListener("storage", handleCachedNamesUpdate)
+  }, [address, walletName, dispatch])
+}