Update stage environments (#461)

This is a pull request that upon merging will update stage environments
with recent `main` changes.

.env.defaults

@@ -20,3 +20,4 @@ ALLOW_TENDERLY_RESET="false"
 SEASON_LENGTH_IN_WEEKS=8
 CONTRACT_DEPLOYMENT_BLOCK_NUMBER=553443
 SKIP_REACT_STRICT_MODE="false"
+IS_COMING_SOON="true"

.github/workflows/update-environments.yml

@@ -0,0 +1,41 @@
+name: Update staging and production environments
+
+on:
+  push:
+    branches:
+      - main
+      - stage-live
+
+jobs:
+  sync-main-to-stage-live:
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Open/update a PR from `main` to `stage-live`
+        id: pull
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          FROM_BRANCH: "main"
+          TO_BRANCH: "stage-live"
+          PULL_REQUEST_TITLE: "Update stage environments"
+          PULL_REQUEST_BODY: "This is a pull request that upon merging will update stage environments with recent `main` changes."
+          REVIEWERS: '["andreachapman"]'
+  sync-stage-live-to-release:
+    if: github.ref == 'refs/heads/stage-live'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Open/update a PR from `main` to `stage-live`
+        id: pull
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          FROM_BRANCH: "stage-live"
+          TO_BRANCH: "release"
+          PULL_REQUEST_TITLE: "Update release branch"
+          PULL_REQUEST_BODY: "This is a pull request that upon merging will update production environment with recent `stage-live` changes."
+          TEAM_REVIEWERS: '["tahowallet/extension-devs"]'

README.md

@@ -12,47 +12,7 @@
     ```
 3.  Open [http://localhost:9000](http://localhost:9000) to view it in the browser.
 
-## Working with locally forked Arbitrum Sepolia chain
+## Docs
 
-### In the dapp:
-
-- Override `USE_LOCALHOST_FORK="true"` in `.env` file.
-- Run the dapp
-
-### In the [extension](https://github.com/tahowallet/extension):
-
-- Install extension due to readme
-- Change `.env` variables
-  ```bash
-  # Forking Arbitrum Sepolia
-  USE_MAINNET_FORK=true
-  MAINNET_FORK_CHAIN_ID="421614"
-  CHAIN_API_URL="https://sepolia-rollup.arbitrum.io/rpc"
-  ```
-- Restart extension's process
-- Install extension as usual in the browser
-- In the wallet let's import the account from the private key of the `testertesting.eth`
-- Based on the Taho token's contract address (see `deployment-info.json` in the dapp or contracts repository) add the Taho asset to the wallet
-
-### In the [contracts](https://github.com/tahowallet/contracts):
-
-Instruction based on [the system tests readme](https://github.com/tahowallet/contracts/blob/main/system-tests/README.md)
-
-- Install contracts
-  - `nvm use`
-  - `yarn install`
-- Provide [`.envrc`](https://github.com/tahowallet/contracts/blob/main/system-tests/.envrc.SAMPLE) variables, make sure you have [Direnv](https://direnv.net/) installed
-  ```bash
-  export FORKING_URL="https://sepolia-rollup.arbitrum.io/rpc"
-  export TAHO_DEPLOYER_PRIVATE_KEY="..." # mnemonic or first private key from `testertesting.eth`
-  export FORKING_BLOCK="..." # historical block; optional - setting this var enables cache and speeds up repatable read operations
-  ```
-- Open first terminal and run `yarn run test:fork`
-
----
-
-After all the steps above you should have:
-
-- the Taho token deployed on the Arbitrum Sepolia forked chain
-- the dapp should be able to interact with the token
-- the extension should be able to display the token's balance
+- [Local environment setup](docs/local-env-setup.md)
+- [Testing environment](docs/testing-env.md)

docs/local-env-setup.md

@@ -0,0 +1,44 @@
+# Working with locally forked Arbitrum Sepolia chain
+
+### In the dapp:
+
+- Override `USE_LOCALHOST_FORK="true"` in `.env` file.
+- Run the dapp
+
+### In the [extension](https://github.com/tahowallet/extension):
+
+- Install extension due to readme
+- Change `.env` variables
+  ```bash
+  # Forking Arbitrum Sepolia
+  USE_MAINNET_FORK=true
+  MAINNET_FORK_CHAIN_ID="421614"
+  CHAIN_API_URL="https://sepolia-rollup.arbitrum.io/rpc"
+  ```
+- Restart extension's process
+- Install extension as usual in the browser
+- In the wallet let's import the account from the private key of the `testertesting.eth`
+- Based on the Taho token's contract address (see `deployment-info.json` in the dapp or contracts repository) add the Taho asset to the wallet
+
+### In the [contracts](https://github.com/tahowallet/contracts):
+
+Instruction based on [the system tests readme](https://github.com/tahowallet/contracts/blob/main/system-tests/README.md)
+
+- Install contracts
+  - `nvm use`
+  - `yarn install`
+- Provide [`.envrc`](https://github.com/tahowallet/contracts/blob/main/system-tests/.envrc.SAMPLE) variables, make sure you have [Direnv](https://direnv.net/) installed
+  ```bash
+  export FORKING_URL="https://sepolia-rollup.arbitrum.io/rpc"
+  export TAHO_DEPLOYER_PRIVATE_KEY="..." # mnemonic or first private key from `testertesting.eth`
+  export FORKING_BLOCK="..." # historical block; optional - setting this var enables cache and speeds up repatable read operations
+  ```
+- Open first terminal and run `yarn run test:fork`
+
+---
+
+After all the steps above you should have:
+
+- the Taho token deployed on the Arbitrum Sepolia forked chain
+- the dapp should be able to interact with the token
+- the extension should be able to display the token's balance

docs/testing-env.md

@@ -0,0 +1,82 @@
+# Development to Production Flow
+
+### Branches
+
+- `main`
+  - branch `main` is the base branch for current developement
+  - every feature branch should be merged into `main` via pull request
+- `stage-live`
+  - base for running the staging environment that is running on the live chain
+  - stage-live website is building based on the current status of the branch `stage-live`
+  - changes from `main` should be merged into the `stage-live` in batches using PR
+  - person QAing stage environment should be the one to accept and merge the PR - merging the PR means the staging environment will rebuild and manual tests can be started
+- `stage-fork`
+  - state of the branch `stage-fork` should be always the same as `stage-live`
+  - base for building the staging environment that is running on the chain fork
+  - stage-fork website is building based on the current status of the branch `stage-fork`
+  - changes on `stage-live` should be auto-merged to the `stage-fork` by the Github Action
+  - accepting the PR to `stage-live` means stage-fork website will rebuild as well as stage-live website
+- `release`
+  - changes from `stage-live` branch should be opening the PR to `release` branch
+  - batch of changes from the PR should be tested manually on staging environments and then PR to release should be accepted and merged by QA
+  - production environment is building based on the current status of the branch `release`
+
+### Environments
+
+- [app](https://app.taho.xyz/) or [release](https://release--taho-development.netlify.app/) - production env based on branch `release`
+- [stage fork](https://stage-fork--taho-development.netlify.app/) - staging env based on branch `stage-fork`
+  - running on Tenderly fork of Arbitrum
+  - can reset the fork by clicking a few times in the logo
+  - to be used together with special build of the Taho wallet 
+- [stage live](https://stage-live--taho-development.netlify.app/) - staging env based on branch `stage-live`
+  - running on live chain
+  - to be used with production version of the Taho wallet
+- [main](https://main--taho-development.netlify.app/) - development build based on `main`
+  - no need to do QA here
+  - running on chain fork
+  - can be used to preview most recent development
+
+### Hotfix flow
+
+If production needs a quick fix then:
+
+- create a feature branch from `main`
+- fix it as usual, merge back to `main`
+- cherry-pick the fix to separate branch
+- create a separate PR to `stage-live` 
+- merge it so fix will be added to the current batch of chages from staging env
+- QA on staging
+- merge PR `stage-live -> release`
+
+
+```mermaid
+---
+title: "Dapp Lifecycle"
+---
+flowchart
+	609277{"main\nbranch"} -->|"Auto PR"| 140433{"stage-live \nbranch\n"}
+	style 609277 fill:#8fe465
+	style 140433 fill:#64e3db
+	609277 -->|"Hotfix PR"| 140433
+	linkStyle 1 stroke:#dc2a2a
+	609277 <-->|"PR"| 788810{"feature\nbranch"}
+	linkStyle 2 stroke:#f103d0
+	style 788810 fill:#64e3db
+	788810 -->|"Auto deploy"| 588961(("PR-preview"))
+	style 588961 fill:#e3c464
+	140433 -->|"Auto deploy"| 836305(("stage-fork\n"))
+	style 836305 fill:#e3c464
+	809682{"stage-fork\nbranch"} -->|"Auto deploy"| 490721(("stage-live\n"))
+	style 809682 fill:#64e3db
+	style 490721 fill:#e36464
+	804724{"release\nbranch"} -->|"Auto deploy"| 389165(("app.taho.xyz"))
+	style 804724 fill:#8fe465
+	style 389165 fill:#e36464
+	140433 -->|"Auto PR\n"| 804724
+	140433 -->|"Auto merge"| 809682
+
+%% Mermaid Flow Diagram Link
+%% Keep this link to make future edits to your diagram
+%% https://www.mermaidflow.app/flowchart#N4IgZgNg9g7iBcoB2UAmBTAzgg2qGAlqgC4AWCAjAAwBsANCKegQOanGUAsAnA0QiBpVuAJgDsYkAwAOUTAWIEoSBKAAeCUQDoKADk4ia3Gof3cAzLxABPBGICsVLUZG7dl+-ZH2KAXwaoAIbEgaogEIEARugQAgC2gQRIADpIkQBOgUgAxuQMmMTWEFi44AQQEPAAxLpg6Jw09iAAugyZSADWmAAimTAqiP4g0oHp6EjEAEpZHQhUAX0AyoXFCGCBEJjoQ4XS6ALppFBxkQCumAByaPv5MejZxOioaxtbC4EsLEksL5voMnIFEokABBSKYKAQU6PMIaeDaPQGIwmGhmSwMWzwBxOFxuDxeHy+fz4IhkSi0BhMVjsLhWfjwEC6KicMQiThSYaAxTKWEITi6Cg6cQ0MRuewOcz2fQYhDmahaLwNHz2bhS8UUGhDIIhMIRaKxBljYqBLapDJZXIcgpFErwHBlCrVWr1RotNozHp9AbAIYjMYTaadObvGDLG2-LY7ax7A5HE7nK4YDmyeTc0HgyHQ-aIEBw-mCijC0W6cX2SXSmyy+WKxoUFVqsQaoZbYoPJ4R-4gVCZT7fDvEkCEEjkeAUaiU5hsDijnx8Z4MiicZnmczJrnA3nwfk0LSSzxUTxicwHkQyrHmXRaAUa1zcXTGAzcLXBUI5vUxAQFD7oAC0EAIABu6AAARmu0uSpFaKy2vaYDlJUVQ0Jw6DmKgkRuiA7RdL0gT9KovqjOMUwzMGXZLNB-YMLs2aYXGZyXNcVp3G287rH87y9kgPzwGxbycqmwJghCUIwjmea6Due6OIex5eGeR6XteJj3veSEiE+A5DmSo5ULoE7UtOdbzCA9KMsIqIiGuAk8mJCA0IuWhiJwDQGK4PCuKelbwJ45hXl4wjMmyJZOc+OpvlEH4Ml+LC-mAUDpB0YEWnkIDWsU2B2g6CFIShaEYVhnq4d6BH+sRQbwMZ3a4WGqw8a82xUdGNGHMc9GJjcqXMY8rH1RxXxcR2ALWemwlZpu9mcI5zlqW5oi6J5mI+X5IgBQY-LipwRJ0CSw7kvQjCTjSo48HOAjFgKVBWUCNnqAg-lntQ4iha+oDvga4DoMEpxjElOQpWlMFZdUOWoehrSYR6OF4YMMiEQGJEVSGNXZrxDUgNRsatQmjFDddI2ZqJt3eStD1UE9tytt1g1kR8-XcajmmkiOhbmPpU6UCIrMmfOIAXtwGpNLjaabvNC2yiIIjPbqEXvYE0jSFoIRHFoajWAAXlBNoZbB8HVChSFIflkNevhsOlYGsyIzToYUXVfxRjGDLZAQ6TZMU7VMZT7Z23xVWcfTvX8XjQkE9mROi2e5gS1tO3adQ+1UuzOn7aZPBUKyFBXcLtk6Qizk3hLor2CKZ7ir53BUBQljmPZjSNvYUvhfqn4hDFf6AegkH5NB2tA1U+suUbnSFdDPpm0RFukVVNvhj7aMY07Ltu+gHsU-cVNz31fab0HaYhyJYe5uSeecAX4gliXXll1oFdVxYtfqg3jO7TpekHQZ5Jv6Z7g0LJWcbjnfQxlMQSE1AEF80tm5RVbrFeKiUVDdy1qUOCjp+7mGyIPcGBUobFXHvDcqlVyKzwZo1R2IBnau3djjTqXsersRpv7amKZg4ZgPiLJc8kxCamfnHCgVhE5HTHHSHmUpVKZyFgA8OckvLUAaI3V6MsBAAAVJg-mkGMACBB0BwEQelZBus0EYMNlg42RVTbDDhmVS2hDqq2xIejJqAgKHL1XjQ9e3tUZbwGjvZhe9WFjUAdIzEsjuHgyeDFbWoAF7kPOMQY4HIEgJXQOkZYoxpwgCgHsBBIBEkdGSQAUSQDzWQSQOB8AmMkwIDxgQAHUmYIBJqlW2oACjpCgHkupL8-D5CgN9bINEhCiAkFaXprt0AAAksioFqiAcR6NRgxXSYuZcq4qILPQMQSZRSZmWVOgycJv5jzHlPu4HyugORZAIAkDeniuwQJzADUorT2noGqJECg7zIg0Awm9Tp2kKxvXGYdacbI+CYHyagIE3jblvQECCaEUBgIqJAM2LqHj6oDmidkWJ8SGC5OSak9I6TMnjASaMPJ6RCnFKgKUjkpTKnVOUH8kcjTHkPOIG0jp9T4CeUhZgaQERMQmSQP+JA+xmyjP6QIQZ4hJA9L6RMqZMy5khHSIsgQyzOArg5KqxZWzpk0TmaZA5P4LDMgPM5FUEkLlICucEdF9DtQvSabPe0zy8nVFQNkEQgQfU-JlsyzQXNAXAoaZwMFEKoUB3obChk4yoDEDgmoJFkwUVrxYpRKJjinY4riGSpJKTVXpJKRMfNFKqUCBLWU4VjxMiMqQIGnlxk2UtI5S8xt3TUqSoGcIWVIyFX6p2Tq9Z6TzrUGHWqjZg7DV0p5iamuPgLxmA2jau1NzA5OrCGyt1baPVVDANQVCl1wa-O5ZwewDAQ0fx5eGky4LIWKG8Ry04nZY0gGRai2hCBn0NSzWQ7FBRcU5PJQSotAgSXZPxZSoplaaWlvKbWqpaZG2suaU0zl6AO0SoVWdNwF1+1jOnRqid6qGSiOMCqkdRGFyzoECarwlgmQiDHOe75DBLnXIdb7e5rbXXoZeW8j5HzvknoDdyscnkr1J1BXeyNj7o18TffCuJwEMACqgLYT97i6GRm2g4-9uay2gbSeBrJRnoPUtpQhhlyHuWodnq2jDWH5VjI1UuLVqyu0DqVTRXZ8zJ3pJ-n-NZAXqOzNo-s1AbdVSslZJ4OufmOP2p052Td7K+PuteVUT5wn-X6g7YWS9MsgXXpkwQe9UbqZKYRap9A6nNPpvXfbPTWLDN4pA4WkzDIIPmYrQyKtdKKl1tsy-eztVHPtvE9h1zDImTGHmgR-pYW-O6o2QINOGcSNTp8wIPzxqou-iXAu483gl2rs4yl8BYVeO1R3RhwTnyRNFfy+Jwr4RiuhpvRGh928YWKIZMpxFanoANbcRmuemLs0xMA3m9rBbCXErM3D8tMH+twerfS4btS7PNrQ5l5zXmZtmRZGyRbirtm+a2+kvmAsqfLYiyAE1Tl078m8GIe+53kvUzSzd7Md2BPZaE18vLMQCuSY+6V295W5O-cDtVlTwONNprB013Tf6aIAbibD4D8OwPdaRzrlHln4M1ps9j0buOHP8a5V06bUqFzue1S5pbO2aMhdI8T1k7J3fbYp7thnTPZFjgkqfVEnPVepZ4y6271uss5eF6Jl7L8AUS+k1Lir8mqv-ZAIDlNkEtPg5IerpxbXDfGaJaZ0lyOCmo85FZ03WOmU490YffHU3neGsd55iE3m-du-8x7ubFk6eu5AHtudB2fyWDrHKIwtAw-sdtRd7nUft2x4e7lxPovxPCGezEErafvuVZ3vLxFcRkkxWVy2bT-ZwaaO0bICvOdmNOEcOYVkbIhAakbG-TETIhSNh1g8CWD8zzQMBqxQDxIVSORsjcBHih5arcAGDFxbRdgEAfCZBxAACyGygQ3QUekKYw9aAgAAKgAEIchgBtITBYHBC1phCKDEAzLdDoEsCYHAQkEKCrBaguzrwdzazgzZDHDn4TACEMBuwmhbACFDDS5qCP7EBKJZAxAADyZm8AP6DALA0AkQGwEKMUJB2aoAqApwGwVWSQ6ABhZCwk-ADABytBBalhNEA24hkI8UAgguj2yuWhUAOhEA7UjhDBUOziVCSYLh0A6Q7hVAUR0RHIOh2QHQbBvSRSAAwq4REQyIYoPAwJEPFBgOkKkeEZEdEVEbEbkckiQaQAQPEWKpgBlF2v+M8GCvgZgEwClkSEAA
+
+```

package.json

@@ -31,6 +31,7 @@
     "crypto-browserify": "^3.12.0",
     "emittery": "^1.0.1",
     "ethers": "^5",
+    "@ethersproject/networks": "^5.7.1",
     "gifler": "^0.1.0",
     "https-browserify": "^1.0.0",
     "konva": "^9.2.0",
@@ -71,6 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^11.0.0",
     "dotenv-defaults": "^5.0.2",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.44.0",

src/shared/components/Modals/OnboardingModal.tsx

@@ -39,7 +39,7 @@ export default function OnboardingModal({
       <style jsx>{`
         .label {
           font: var(--text-h1);
-          margin-bottom: 24px;
+          margin-bottom: ${buttonLabel ? "24px" : "0"};
         }
       `}</style>
     </>

src/shared/hooks/wallets.ts

@@ -1,6 +1,6 @@
 import { useConnectWallet } from "@web3-onboard/react"
 import { useCallback, useEffect, useMemo, useState } from "react"
-import { ethers } from "ethers"
+import { ethers, logger } from "ethers"
 import {
   useDappDispatch,
   connectWalletGlobally,
@@ -17,14 +17,43 @@ import {
   BALANCE_UPDATE_INTERVAL,
   LOCAL_STORAGE_WALLET,
 } from "shared/constants"
+import { Logger, defineReadOnly } from "ethers/lib/utils"
+import { Network } from "@ethersproject/networks"
 import { useAssistant } from "./assistant"
 import { useInterval, useLocalStorageChange } from "./helpers"
 
+class StaticJsonBatchRpcProvider extends ethers.providers.JsonRpcBatchProvider {
+  override async detectNetwork(): Promise<Network> {
+    let { network } = this
+    if (network == null) {
+      network = await super.detectNetwork()
+
+      if (!network) {
+        logger.throwError(
+          "no network detected",
+          Logger.errors.UNKNOWN_ERROR,
+          {}
+        )
+      }
+
+      // If still not set, set it
+      // eslint-disable-next-line no-underscore-dangle
+      if (this._network == null) {
+        // A static network does not support "any"
+        defineReadOnly(this, "_network", network)
+
+        this.emit("network", network, null)
+      }
+    }
+    return network
+  }
+}
+
 // To make it possible to start fetching blockchain data before the user
 // connects the wallet let's get the provider from the RPC URL
 export function useArbitrumProvider(): ethers.providers.JsonRpcBatchProvider {
   const arbitrumProvider = useMemo(
-    () => new ethers.providers.JsonRpcBatchProvider(ARBITRUM_SEPOLIA.rpcUrl),
+    () => new StaticJsonBatchRpcProvider(ARBITRUM_SEPOLIA.rpcUrl),
     []
   )
 
@@ -130,7 +159,11 @@ export function useConnect() {
     return wallet && disconnect(wallet)
   }, [wallet, disconnect, updateWalletOnboarding])
 
-  return { isConnected: !!wallet, connect, disconnect: disconnectBound }
+  return {
+    isConnected: process.env.IS_COMING_SOON !== "true" && !!wallet,
+    connect,
+    disconnect: disconnectBound,
+  }
 }
 
 // Hook is invoked after user switched accounts

src/testing/utils/quickUnstaking.ts

@@ -3,9 +3,10 @@ import { gameParametersAbi, tahoDeployerAbi } from "shared/contracts/abi"
 
 const TAHO_MULTISIG = "0x6e80164ea60673d64d5d6228beb684a1274bb017"
 
-const localhostProvider = process.env.USE_LOCALHOST_FORK
-  ? new ethers.providers.JsonRpcProvider(process.env.LOCALHOST_RPC_URL)
-  : null
+const localhostProvider =
+  process.env.USE_LOCALHOST_FORK === "true"
+    ? new ethers.providers.JsonRpcProvider(process.env.LOCALHOST_RPC_URL)
+    : null
 
 const impersonate = (address: string) =>
   localhostProvider?.send("hardhat_impersonateAccount", [address])

src/ui/Nav/index.tsx

@@ -14,13 +14,13 @@ const NAV_ITEMS = [
     title: "The Island",
     exact: true,
     extraInfo: "BETA",
-  },
-  {
-    path: ROUTES.FEEDBACK,
-    exact: true,
-    title: "Feedback",
-    target: "blank",
-    icon: feedbackIcon,
+  } as {
+    path: string
+    title: string
+    exact: boolean
+    extraInfo?: string
+    target?: string
+    icon?: string
   },
   // {
   //   path: ROUTES.REFERRALS,
@@ -37,6 +37,16 @@ const NAV_ITEMS = [
   // },
 ]
 
+if (process.env.IS_COMING_SOON !== "true") {
+  NAV_ITEMS.push({
+    path: ROUTES.FEEDBACK,
+    title: "Feedback",
+    exact: true,
+    target: "blank",
+    icon: feedbackIcon,
+  })
+}
+
 function EnvironmentInfo() {
   if (process.env.USE_LOCALHOST_FORK === "true") {
     return <span>🏝️ Using localhost</span>
@@ -103,6 +113,7 @@ export default function Nav(): JSX.Element {
                 iconSize="large"
                 iconSrc={walletIcon}
                 onClick={() => connect()}
+                isDisabled={process.env.IS_COMING_SOON === "true"}
               >
                 Connect wallet
               </Button>

src/ui/Onboarding/Teaser.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import OnboardingModal from "shared/components/Modals/OnboardingModal"
+
+export default function Teaser() {
+  return (
+    <OnboardingModal>
+      Portal opens
+      <br />
+      soon
+    </OnboardingModal>
+  )
+}