#24 Update onboard dependencies and remove duplicates

.env.test

@@ -0,0 +1,3 @@
+# Env vars to be injected by turborepo when running test related tasks.
+NEXT_PUBLIC_PROJECT_ID=PROJECT_ID
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=WC_PROJECT_ID

.github/workflows/docker-rollups.yml

@@ -92,6 +92,9 @@ jobs:
 
             - name: Build & Push Docker Image (Depot)
               uses: depot/bake-action@v1
+              env:
+                  WC_PROJECT_ID: ${{ secrets.WC_PROJECT_ID }}
+                  INFURA_PROJECT_ID: ${{ secrets.INFURA_PROJECT_ID }}
               with:
                   project: ${{ vars.DEPOT_PROJECT }}
                   workdir: .

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.6.0] - 2023-07-31
+
+-   `Staking`
+    -   The wallet was upgraded. There is a change for ledger connection workflow that involves using the ledger live app.
+    -   Multiple library dependencies were upgraded.
+-   `Rollups`
+    -   We add a feedback message in the DApp detail view when there are no inputs to be displayed yet.
+-   Several dependencies were upgraded.
+
 ## [3.5.2] - 2023-07-18
 
 -   `Staking`
@@ -332,7 +341,8 @@ Staking Pools
 
 -   First release
 
-[unreleased]: https://github.com/cartesi/explorer/compare/v3.5.2...HEAD
+[unreleased]: https://github.com/cartesi/explorer/compare/v3.6.0...HEAD
+[3.6.0]: https://github.com/cartesi/explorer/compare/v3.5.2...v3.6.0
 [3.5.2]: https://github.com/cartesi/explorer/compare/v3.5.1...v3.5.2
 [3.5.1]: https://github.com/cartesi/explorer/compare/v3.5.0...v3.5.1
 [3.5.0]: https://github.com/cartesi/explorer/compare/v3.4.0...v3.5.0

apps/rollups/.env.development

@@ -2,4 +2,7 @@ NEXT_PUBLIC_ENVIRONMENT=development
 NEXT_PUBLIC_UNLEASH_PROXY_HOST=https://preview.unleash.cartesi.io/proxy
 NEXT_PUBLIC_UNLEASH_PROXY_CLIENT_KEY=bc1b71da9932b90ccd788d75203fb598c3640cabed3ccccdffd024f341a79d72
 NEXT_PUBLIC_USE_GRAPHQL_MOCK=false
-NEXT_PUBLIC_DAPP_LOCAL_DEV=true
+NEXT_PUBLIC_DAPP_LOCAL_DEV=false
+NEXT_PUBLIC_PROJECT_ID=YOUR_INFURA_PROJECT_ID
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID
+NEXT_PUBLIC_ROLLUPS_EXPLORER_URL=THE_ROLLUPS_PUBLIC_URL

apps/rollups/.env.production

@@ -2,4 +2,7 @@ NEXT_PUBLIC_ENVIRONMENT=production
 NEXT_PUBLIC_UNLEASH_PROXY_HOST=https://unleash.cartesi.io/proxy
 NEXT_PUBLIC_UNLEASH_PROXY_CLIENT_KEY=bc1b71da9932b90ccd788d75203fb598c3640cabed3ccccdffd024f341a79d72
 NEXT_PUBLIC_USE_GRAPHQL_MOCK=false
-NEXT_PUBLIC_DAPP_LOCAL_DEV=false
+NEXT_PUBLIC_DAPP_LOCAL_DEV=false
+NEXT_PUBLIC_PROJECT_ID=YOUR_INFURA_PROJECT_ID
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID
+NEXT_PUBLIC_ROLLUPS_EXPLORER_URL=THE_ROLLUPS_PUBLIC_URL

apps/rollups/src/components/Web3Container.tsx

@@ -9,17 +9,19 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import React from 'react';
 import { WalletConnectionProvider } from '@explorer/wallet';
 import networks from '../services/useNetwork';
 
+const ROLLUPS_PUBLIC_URL = process.env.NEXT_PUBLIC_ROLLUPS_EXPLORER_URL;
+
 export const chainIds = Object.keys(networks).map(
     (key) => networks[key].chain.id
 );
 
 export const appMetaData = {
-    name: 'Cartesi Blockchain Rollups',
+    name: 'Cartesi Rollups Explorer',
     description: 'A place where you can view instantiated DApps.',
+    explore: ROLLUPS_PUBLIC_URL,
 };
 
 const Web3Container = ({ children }) => (

apps/staking/.env.development

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_ENVIRONMENT=development
 NEXT_PUBLIC_UNLEASH_PROXY_HOST=https://preview.unleash.cartesi.io/proxy
-NEXT_PUBLIC_UNLEASH_PROXY_CLIENT_KEY=bc1b71da9932b90ccd788d75203fb598c3640cabed3ccccdffd024f341a79d72
+NEXT_PUBLIC_UNLEASH_PROXY_CLIENT_KEY=bc1b71da9932b90ccd788d75203fb598c3640cabed3ccccdffd024f341a79d72
+NEXT_PUBLIC_PROJECT_ID=YOUR_INFURA_PROJECT_ID
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID

apps/staking/.env.production

@@ -2,3 +2,5 @@ NEXT_PUBLIC_ENVIRONMENT=production
 NEXT_PUBLIC_UNLEASH_PROXY_HOST=https://unleash.cartesi.io/proxy
 NEXT_PUBLIC_UNLEASH_PROXY_CLIENT_KEY=bc1b71da9932b90ccd788d75203fb598c3640cabed3ccccdffd024f341a79d72
 NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-MS89D9K
+NEXT_PUBLIC_PROJECT_ID=YOUR_INFURA_PROJECT_ID
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID

apps/staking/.storybook/main.js

@@ -45,7 +45,11 @@ module.exports = {
                               /node_modules/.test(filename) &&
                               !/@chakra-ui/.test(filename) &&
                               !/@zag-js/.test(filename) &&
-                              !/ethers/.test(filename)
+                              !/@zag-js/.test(filename) &&
+                              !/ethers/.test(filename) &&
+                              !/@walletconnect/.test(filename) &&
+                              !/@web3modal/.test(filename) &&
+                              !/valtio\/vanilla/.test(filename)
                           );
                       },
                   }

apps/staking/jest.config.js

@@ -54,8 +54,5 @@ module.exports = {
             },
         ],
     },
-    transformIgnorePatterns: [
-        '/node_modules/(?!(@web3-onboard))/',
-        '^.+\\.module\\.(css|sass|scss)$',
-    ],
+    transformIgnorePatterns: ['^.+\\.module\\.(css|sass|scss)$'],
 };

apps/staking/package.json

@@ -27,13 +27,6 @@
         "@fortawesome/fontawesome-free": "5.15.3",
         "@metamask/onboarding": "1.0.1",
         "@types/humanize-duration": "3.25.1",
-        "@web3-onboard/coinbase": "2.2.0",
-        "@web3-onboard/core": "2.11.0",
-        "@web3-onboard/gnosis": "2.1.5",
-        "@web3-onboard/injected-wallets": "2.4.0",
-        "@web3-onboard/ledger": "2.3.2",
-        "@web3-onboard/react": "2.4.1",
-        "@web3-onboard/walletconnect": "2.2.1",
         "axios": "0.21.4",
         "big-number-input": "1.0.3",
         "chart.js": "3.9.1",
@@ -63,30 +56,30 @@
         "use-persisted-state": "0.3.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.15.5",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/core": "7.22.8",
+        "@babel/plugin-proposal-private-methods": "7.18.6",
         "@babel/plugin-proposal-class-properties": "7.18.6",
-        "@storybook/addon-actions": "^6.4.10",
-        "@storybook/addon-essentials": "^6.4.10",
-        "@storybook/addon-links": "^6.4.10",
-        "@storybook/react": "^6.4.10",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@typechain/ethers-v5": "^7.1.2",
-        "@types/countdown": "^0.0.8",
+        "@storybook/addon-actions": "6.5.16",
+        "@storybook/addon-essentials": "6.5.16",
+        "@storybook/addon-links": "6.5.16",
+        "@storybook/react": "6.5.16",
+        "@testing-library/jest-dom": "5.16.5",
+        "@testing-library/react": "13.4.0",
+        "@testing-library/user-event": "14.4.3",
+        "@typechain/ethers-v5": "7.1.2",
+        "@types/countdown": "0.0.8",
         "@types/lodash": "^4.14.174",
-        "@types/luxon": "^2.0.4",
-        "@types/node": "^16.10.1",
-        "@types/react": "^18.0.21",
-        "@types/react-dom": "^18.0.6",
-        "@types/recharts": "^2.0.0",
-        "@types/use-persisted-state": "^0.3.0",
+        "@types/luxon": "2.4.0",
+        "@types/node": "16.18.38",
+        "@types/react": "18.2.14",
+        "@types/react-dom": "18.2.6",
+        "@types/recharts": "2.0.0",
+        "@types/use-persisted-state": "0.3.0",
         "@typescript-eslint/eslint-plugin": "5.48.0",
         "@typescript-eslint/parser": "5.48.0",
-        "babel-jest": "^29.0.3",
+        "babel-jest": "29.5.0",
         "babel-loader": "9.1.2",
-        "chromatic": "^5.10.1",
+        "chromatic": "5.10.2",
         "eslint": "7.32.0",
         "eslint-config-custom": "*",
         "eslint-config-prettier": "8.3.0",
@@ -96,16 +89,16 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.0.3",
-        "jest-canvas-mock": "^2.4.0",
-        "jest-environment-jsdom": "^29.0.3",
-        "jest-mock-extended": "^2.0.6",
+        "jest-canvas-mock": "2.5.1",
+        "jest-environment-jsdom": "29.6.1",
+        "jest-mock-extended": "2.0.9",
         "next-transpile-modules": "9.0.0",
-        "prettier": "^2.7.1",
-        "storybook-addon-apollo-client": "^4.0.11",
-        "storybook-addon-next-router": "^3.0.8",
-        "storybook-addon-performance": "^0.16.0",
+        "prettier": "2.8.8",
+        "storybook-addon-apollo-client": "4.1.4",
+        "storybook-addon-next-router": "3.1.1",
+        "storybook-addon-performance": "0.16.1",
         "tsconfig": "*",
-        "typechain": "^5.0.0",
+        "typechain": "5.2.0",
         "typescript": "4.9.4"
     }
 }

apps/staking/src/components/Web3Container.tsx

@@ -9,7 +9,6 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import React from 'react';
 import { WalletConnectionProvider } from '@explorer/wallet';
 import { networks } from '../utils/networks';
 
@@ -20,6 +19,7 @@ const Web3Container = ({ children }) => {
     const appMetaData = {
         name: 'Cartesi Blockchain Explorer',
         description: 'A place where you can stake your CTSI and much more.',
+        explore: 'https://explorer.cartesi.io',
     };
 
     return (

docker/Dockerfile-rollups

@@ -33,9 +33,13 @@ COPY --from=tbuilder /app/out/full/ .
 # Disabling telemetry during build
 ENV NEXT_TELEMETRY_DISABLED 1
 # Adding a default ARG value to true, therefore to build Rollups app with local_development mode active.
-# Could be overriden when building a new image using the command --build-arg=boolean_value
+# Could be overriden when building a new image using the command e.g. --build-arg LOCAL_DEV=boolean_value
 ARG LOCAL_DEV=true
+ARG WC_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID
+ARG INFURA_PROJECT_ID=YOUR_INFURA_PROJECT_ID
 ENV NEXT_PUBLIC_DAPP_LOCAL_DEV=$LOCAL_DEV
+ENV NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=$WC_PROJECT_ID
+ENV NEXT_PUBLIC_PROJECT_ID=$INFURA_PROJECT_ID
 # turbo task export has the graphql codegen and build as dependsOn tasks. It will generate a static version of the Rollups.
 RUN yarn export --filter=rollups
 

docker/docker-bake.rollups.hcl

@@ -1,8 +1,25 @@
 target "docker-metadata-action" {}
 
-target default {
+variable "LOCAL_DEV" {
+    default = true
+}
+
+variable "WC_PROJECT_ID" {
+    default = "$WC_PROJECT_ID"
+}
+
+variable "INFURA_PROJECT_ID" {
+    default = "$INFURA_PROJECT_ID"
+}
+
+target default {    
     inherits = ["docker-metadata-action"]
     dockerfile = "Dockerfile-rollups"
+    args = {
+        WC_PROJECT_ID = "${WC_PROJECT_ID}"
+        INFURA_PROJECT_ID = "${INFURA_PROJECT_ID}"
+        LOCAL_DEV = "${LOCAL_DEV}"
+    }
     platforms = ["linux/amd64", "linux/arm64"]
 }
 

package.json

@@ -12,15 +12,16 @@
         "export": "turbo run export",
         "dev": "turbo run dev --parallel",
         "lint": "turbo run lint",
-        "test": "turbo run test",
-        "test:ci": "turbo run test:ci",
+        "test": "dotenv -c test -- turbo run test",
+        "test:ci": "dotenv -c test -- turbo run test:ci",
         "build-storybook": "turbo run build-storybook",
         "storybook": "turbo run storybook",
         "format:check": "prettier --check \"**/*.{ts,tsx}\"",
         "format": "prettier --write \"**/*.{ts,tsx,md}\"",
         "coveralls": "mkdir coverage && ./node_modules/.bin/lcov-result-merger './!(node_modules)**/**/coverage/lcov.info' './coverage/lcov.info' --prepend-source-files"
     },
     "devDependencies": {
+        "dotenv-cli": "7.2.1",
         "eslint-config-custom": "*",
         "prettier": "latest",
         "turbo": "latest"
@@ -42,4 +43,4 @@
         "unleash-proxy-client": "2.2.1"
     },
     "packageManager": "yarn@1.22.19"
-}
+}

packages/ui/src/styles/onboard.ts

@@ -15,7 +15,8 @@ import { zIndices } from './foundations/zIndices';
 const grayColour = colors.gray[800];
 const white = colors.white;
 
-export const buildOnboardTheme = (props) => {
+export const buildOnboardTheme = (props: { colorMode: string }) => {
+    const LEDGER_MODAL = '.ledger-ck-modal > #ModalWrapper';
     const isDarkMode = props.colorMode === 'dark';
     const defaultVars = {
         '--onboard-font-family-normal': 'var(--chakra-fonts-body)',
@@ -24,6 +25,10 @@ export const buildOnboardTheme = (props) => {
         '--onboard-modal-z-index': zIndices.xxl,
         '--onboard-account-select-modal-z-index': zIndices.xxl,
     };
+    const wcVars = {
+        '--wcm-z-index': `${1060} !important`,
+        '--w3m-z-index': `${1060} !important`,
+    };
     let darkVars = {};
 
     if (isDarkMode) {
@@ -43,9 +48,13 @@ export const buildOnboardTheme = (props) => {
     }
 
     return {
+        [LEDGER_MODAL]: {
+            zIndex: zIndices.xxl,
+        },
         ':root': {
             ...defaultVars,
             ...darkVars,
+            ...wcVars,
         },
     };
 };

packages/wallet/__tests__/useOnboard.test.tsx

@@ -9,8 +9,17 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import { renderHook, waitFor, cleanup } from '@testing-library/react';
+import { Network, networks } from '@explorer/utils';
+import { cleanup, renderHook, waitFor } from '@testing-library/react';
+import Onboard, {
+    EIP1193Provider,
+    OnboardAPI,
+    WalletState,
+} from '@web3-onboard/core';
+import { ConnectedChain } from '@web3-onboard/core/dist/types';
 import { act } from 'react-dom/test-utils';
+import { UnsupportedNetworkError } from '../src';
+import { WalletType } from '../src/definitions';
 import {
     buildConfig,
     checkNetwork,
@@ -19,15 +28,6 @@ import {
     handlerBuilder,
     useOnboard,
 } from '../src/useOnboard';
-import { Network, networks } from '@explorer/utils';
-import { UnsupportedNetworkError } from '../src';
-import { WalletType } from '../src/definitions';
-import Onboard, {
-    EIP1193Provider,
-    OnboardAPI,
-    WalletState,
-} from '@web3-onboard/core';
-import { ConnectedChain } from '@web3-onboard/core/dist/types';
 
 jest.mock('ethers');
 
@@ -74,12 +74,6 @@ const wallet = {
 const mockedOnboard = Onboard as jest.MockedFunction<typeof Onboard>;
 
 describe('useOnBoard', () => {
-    const initialEnv = process.env;
-
-    afterAll(() => {
-        process.env = initialEnv;
-    });
-
     afterEach(() => {
         jest.clearAllMocks();
         cleanup();