"Add chain" button in the header (#3084)

* redesign "add chain" button

* fix wallet detection

* [skip ci] update default value for ENV

* fix tests

* return button to the footer and add source to mixpanel event

* regcred from helmfile for review

* [skip ci] remove wallets env from values for demo stand

* use react-query to cache detection result

* add cookie to hide button in the topbar

* add prefix to svg ids to fix rabby icon

* update screenshot

* remove unnecessary comment

---------

Co-authored-by: Nick Zenchik <n.zenchik@gmail.com>

Author: tom2drum

.husky/pre-commit

@@ -10,7 +10,7 @@ echo 🧿 Running svg formatter...
 for file in `git diff --diff-filter=ACMRT --cached --name-only | grep ".svg\$"`
     do 
         echo "Formatting $file" 
-        ./node_modules/.bin/svgo -q $file 
+        ./node_modules/.bin/svgo -q $file --config svgo.config.format.js
         git add $file
     done
 

configs/app/features/web3Wallet.ts

@@ -13,7 +13,7 @@ const wallets = ((): Array<WalletType> | undefined => {
   const wallets = parseEnvJson<Array<WalletType>>(envValue)?.filter((type) => SUPPORTED_WALLETS.includes(type));
 
   if (!wallets || wallets.length === 0) {
-    return [ 'metamask' ];
+    return [ 'metamask', 'rabby', 'coinbase', 'trust', 'okx', 'token_pocket' ];
   }
 
   return wallets;

deploy/values/review/values.yaml.gotmpl

@@ -63,7 +63,6 @@ frontend:
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
     NEXT_PUBLIC_NETWORK_RPC_URL: https://eth-sepolia.public.blastapi.io
     NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
-    NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: gradient_avatar
     NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: true
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true

docs/ENVS.md

@@ -649,7 +649,7 @@ This feature is **enabled by default** with the `['metamask']` value. To switch
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_WEB3_WALLETS | `Array<'metamask' \| 'coinbase' \| 'token_pocket'>` | Array of Web3 wallets which will be used  to add tokens or chain to. The first wallet which is enabled in user's browser will be shown. | - | `[ 'metamask' ]` | `[ 'coinbase' ]` | v1.10.0+ |
+| NEXT_PUBLIC_WEB3_WALLETS | `Array<'metamask' \| 'coinbase' \| 'token_pocket' \| 'rabby' \| 'trust' \| 'okx'>` | Array of Web3 wallets which will be used  to add tokens or chain to. The first wallet which is enabled in user's browser will be shown. | - | `[ 'metamask', 'rabby', 'coinbase', 'trust', 'okx', 'token_pocket' ]` | `[ 'coinbase' ]` | v1.10.0+ |
 | NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET | `boolean`| Set to `true` to hide icon "Add to your wallet" next to token addresses | - | - | `true` | v1.0.x+ |
 
 &nbsp;