feat: add login with Keplr and WalletConnect [web-desmos] (forbole#1128)

## Description

Closes: #XXXX
[BDU-669](https://forbole.atlassian.net/browse/BDU-669)
[BDU-670](https://forbole.atlassian.net/browse/BDU-670)
[BDU-650](https://forbole.atlassian.net/browse/BDU-650)
[BDU-651](https://forbole.atlassian.net/browse/BDU-651)
<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [x] ran linting via `yarn lint`
- [x] wrote tests where necessary
- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [x] targeted the correct branch
- [x] provided a link to the relevant issue or specification
- [x] reviewed "Files changed" and left comments if necessary
- [x] confirmed all CI checks have passed
- [x] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)


[BDU-651]:
https://forbole.atlassian.net/browse/BDU-651?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

[BDU-669]:
https://forbole.atlassian.net/browse/BDU-669?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[BDU-670]:
https://forbole.atlassian.net/browse/BDU-670?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[BDU-650]:
https://forbole.atlassian.net/browse/BDU-650?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: teamchong <[email protected]>
Co-authored-by: rachelhox <[email protected]>

.changeset/wild-camels-leave.md

@@ -0,0 +1,34 @@
+---
+'shared-utils': minor
+'web-assetmantle': minor
+'web-persistence': minor
+'web-quicksilver': minor
+'web-multiversx': minor
+'web-provenance': minor
+'web-celestia': minor
+'web-crescent': minor
+'web-likecoin': minor
+'web-wormhole': minor
+'web-bitsong': minor
+'web-osmosis': minor
+'web-agoric': minor
+'web-comdex': minor
+'web-cosmos': minor
+'web-desmos': minor
+'web-emoney': minor
+'web-quasar': minor
+'web-shentu': minor
+'web-stride': minor
+'web-akash': minor
+'web-cheqd': minor
+'web-evmos': minor
+'web-nomic': minor
+'web-regen': minor
+'web-rizon': minor
+'web-band': minor
+'web-nym': minor
+'ui': minor
+'web': minor
+---
+
+Added login with Keplr and WalletConnect([\#1128](https://github.com/forbole/big-dipper-2.0-cosmos/pull/1128))

.env.sample

@@ -10,6 +10,11 @@ NEXT_PUBLIC_GRAPHQL_URL=
 NEXT_PUBLIC_GRAPHQL_WS=
 NODE_ENV=development
 PORT=3000
-NEXT_PUBLIC_RPC_WEBSOCKET=
 NEXT_PUBLIC_CHAIN_TYPE=
+NEXT_PUBLIC_KEPLR_CHAIN_ID=
+NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO=
+NEXT_PUBLIC_KEPLR_LCD_URL=
+NEXT_PUBLIC_NETWORK_NAME=
+NEXT_PUBLIC_RPC_WEBSOCKET=
+NEXT_PUBLIC_WC_BRIDGE_URL=
 PROJECT_NAME=web

.yarnrc.yml

@@ -13,6 +13,25 @@ packageExtensions:
         optional: true
       react:
         optional: true
+  "@walletconnect/browser-utils@*":
+    dependencies:
+      tslib: "*"
+  "@walletconnect/client@*":
+    dependencies:
+      tslib: "*"
+  "@walletconnect/core@*":
+    dependencies:
+      tslib: "*"
+  "@walletconnect/iso-crypto@*":
+    dependencies:
+      "@walletconnect/encoding": "*"
+      tslib: "*"
+  "@walletconnect/socket-transport@*":
+    dependencies:
+      tslib: "*"
+  "@walletconnect/utils@*":
+    dependencies:
+      tslib: "*"
   jest-config@*:
     dependencies:
       ts-node: "*"

Dockerfile

@@ -63,9 +63,14 @@ ENV NEXT_PUBLIC_BANNERS_JSON={{NEXT_PUBLIC_BANNERS_JSON}}
 ENV NEXT_PUBLIC_COINZILLA_ZONE={{NEXT_PUBLIC_COINZILLA_ZONE}}
 ENV NEXT_PUBLIC_GRAPHQL_URL={{NEXT_PUBLIC_GRAPHQL_URL}}
 ENV NEXT_PUBLIC_GRAPHQL_WS={{NEXT_PUBLIC_GRAPHQL_WS}}
+ENV NEXT_PUBLIC_KEPLR_CHAIN_ID={{NEXT_PUBLIC_KEPLR_CHAIN_ID}}
+ENV NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO={{NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO}}
+ENV NEXT_PUBLIC_KEPLR_LCD_URL={{NEXT_PUBLIC_KEPLR_LCD_URL}}
 ENV NEXT_PUBLIC_MATOMO_URL={{NEXT_PUBLIC_MATOMO_URL}}
 ENV NEXT_PUBLIC_MATOMO_SITE_ID={{NEXT_PUBLIC_MATOMO_SITE_ID}}
+ENV NEXT_PUBLIC_NETWORK_NAME={{NEXT_PUBLIC_NETWORK_NAME}}
 ENV NEXT_PUBLIC_RPC_WEBSOCKET={{NEXT_PUBLIC_RPC_WEBSOCKET}}
+ENV NEXT_PUBLIC_WC_BRIDGE_URL={{NEXT_PUBLIC_WC_BRIDGE_URL}}
 
 RUN export SENTRYCLI_SKIP_DOWNLOAD=$([ -z "${NEXT_PUBLIC_SENTRY_DSN}" ] && echo 1) \
   && corepack enable && yarn -v \
@@ -97,12 +102,22 @@ ARG NEXT_PUBLIC_GRAPHQL_URL
 ENV NEXT_PUBLIC_GRAPHQL_URL=${NEXT_PUBLIC_GRAPHQL_URL}
 ARG NEXT_PUBLIC_GRAPHQL_WS
 ENV NEXT_PUBLIC_GRAPHQL_WS=${NEXT_PUBLIC_GRAPHQL_WS}
+ARG NEXT_PUBLIC_KEPLR_CHAIN_ID
+ENV NEXT_PUBLIC_KEPLR_CHAIN_ID=${NEXT_PUBLIC_KEPLR_CHAIN_ID}
+ARG NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO
+ENV NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO=${NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO}
+ARG NEXT_PUBLIC_KEPLR_LCD_URL
+ENV NEXT_PUBLIC_KEPLR_LCD_URL=${NEXT_PUBLIC_KEPLR_LCD_URL}
 ARG NEXT_PUBLIC_MATOMO_URL
 ENV NEXT_PUBLIC_MATOMO_URL=${NEXT_PUBLIC_MATOMO_URL}
 ARG NEXT_PUBLIC_MATOMO_SITE_ID
 ENV NEXT_PUBLIC_MATOMO_SITE_ID=${NEXT_PUBLIC_MATOMO_SITE_ID}
+ARG NEXT_PUBLIC_NETWORK_NAME
+ENV NEXT_PUBLIC_NETWORK_NAME=${NEXT_PUBLIC_NETWORK_NAME}
 ARG NEXT_PUBLIC_RPC_WEBSOCKET
 ENV NEXT_PUBLIC_RPC_WEBSOCKET=${NEXT_PUBLIC_RPC_WEBSOCKET}
+ARG NEXT_PUBLIC_WC_BRIDGE_URL
+ENV NEXT_PUBLIC_WC_BRIDGE_URL=${NEXT_PUBLIC_WC_BRIDGE_URL}
 ARG PORT
 ENV PORT=${PORT:-3000}
 
@@ -142,9 +157,14 @@ NEXT_PUBLIC_BANNERS_JSON|\
 NEXT_PUBLIC_COINZILLA_ZONE|\
 NEXT_PUBLIC_GRAPHQL_URL|\
 NEXT_PUBLIC_GRAPHQL_WS|\
+NEXT_PUBLIC_KEPLR_CHAIN_ID|\
+NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO|\
+NEXT_PUBLIC_KEPLR_LCD_URL|\
 NEXT_PUBLIC_MATOMO_URL|\
 NEXT_PUBLIC_MATOMO_SITE_ID|\
-NEXT_PUBLIC_RPC_WEBSOCKET\
+NEXT_PUBLIC_NETWORK_NAME|\
+NEXT_PUBLIC_RPC_WEBSOCKET|\
+NEXT_PUBLIC_WC_BRIDGE_URL\
 )[}][}]\\1/gi, (match, quote, name) => {\n\
   console.log(`inject ${match} with ${JSON.stringify(process.env[name.toUpperCase()])} in ${file}`);\n\
   return JSON.stringify(process.env[name] ?? "")\n\
@@ -157,9 +177,14 @@ NEXT_PUBLIC_BANNERS_JSON|\
 NEXT_PUBLIC_COINZILLA_ZONE|\
 NEXT_PUBLIC_GRAPHQL_URL|\
 NEXT_PUBLIC_GRAPHQL_WS|\
+NEXT_PUBLIC_KEPLR_CHAIN_ID|\
+NEXT_PUBLIC_KEPLR_CUSTOM_CHAIN_INFO|\
+NEXT_PUBLIC_KEPLR_LCD_URL|\
 NEXT_PUBLIC_MATOMO_URL|\
 NEXT_PUBLIC_MATOMO_SITE_ID|\
-NEXT_PUBLIC_RPC_WEBSOCKET\
+NEXT_PUBLIC_NETWORK_NAME|\
+NEXT_PUBLIC_RPC_WEBSOCKET|\
+NEXT_PUBLIC_WC_BRIDGE_URL\
 )[}][}]' ./.next | xargs -I{} printf 'inject("'{}'");\n' | tee -a ./inject.js;
 
 # Don't run production as root

apps/web-agoric/package.json

@@ -15,12 +15,19 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.12",
+    "@cosmjs/encoding": "^0.29.5",
+    "@cosmjs/launchpad": "^0.27.1",
+    "@cosmjs/stargate": "^0.29.0",
     "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
+    "@keplr-wallet/types": "^0.11.59",
+    "@keplr-wallet/wc-client": "^0.11.38",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
     "@socialgouv/matomo-next": "^1.6.1",
+    "@walletconnect/client": "^1.8.0",
+    "@walletconnect/encoding": "^1.0.2",
     "@yarnpkg/pnpify": "^4.0.0-rc.42",
     "apollo-link-rest": "^0.9.0",
     "bech32": "^2.0.0",
@@ -55,7 +62,8 @@
     "shared-utils": "workspace:*",
     "subscriptions-transport-ws": "^0.11.0",
     "tsconfig": "workspace:*",
-    "tss-react": "^4.8.2",
+    "tslib": "^2.5.0",
+    "tss-react": "^4.6.0",
     "typanion": "^3.12.1",
     "ui": "workspace:*",
     "usehooks-ts": "^2.9.1",

apps/web-agoric/public/locales/en/common.json

@@ -56,6 +56,7 @@
   "params": "Params",
   "assets": "Assets",
   "assetsModule": "Assets Module",
+  "wasmContracts": "WASM Contracts",
   "errorTitle": "Opps! Looks like something went wrong :(",
   "errorDetails": "If you have time please report it to our github at <0>{{issue}}</0> with the url that caused the error.",
   "errorHome": "Click here to go back home",
@@ -67,6 +68,25 @@
   "insertValidDtag": "Please insert a valid dtag",
   "invalidAddress": "Invalid Address",
   "24-hour": "24-Hour Time",
-    "12-hour": "12-Hour Time",
-  "documentation": "Documentation"
-}
+  "12-hour": "12-Hour Time",
+  "documentation": "Documentation",
+  "welcomeToBigDipper": "Welcome to Big Dipper",
+  "chooseYourWallet": "Choose your wallet",
+  "loading": "Loading...",
+  "logIn": "Log in",
+  "signOut": "Sign out",
+  "continue": "Continue",
+  "changeWallet": "Change Wallet",
+  "accountDetails": "Account Details",
+  "retry": "Retry",
+  "pleaseInstallWallet": "Please install {{wallet}}",
+  "pleaseOpenWallet": "Please open {{wallet}}",
+  "pleasePairWallet": "Please proceed pairing in your wallet..",
+  "couldntFindWalletExtension": "Couldn't find {{wallet}} installed in the browser. Please install it using official <0>{{wallet}} website</0> and try again.",
+  "nowSelectNetwork": "Now Select {{name}} Network",
+  "waitingForAuthorization": "Waiting for authorization...",
+  "loginSuccess": "Login Success",
+  "loginSuccessMsg": "The system will automatically redirect to the previous \npage in 3 seconds.",
+  "connectWalletConnect": "Connect Wallet Connect",
+  "scanWalletConnectQR": "Please scan the QR with a WalletConnect compatible Wallet."
+}

apps/web-agoric/public/locales/en/wasm_contracts.json

@@ -0,0 +1,26 @@
+{
+  "wasmContracts": "WASM Contracts",
+  "overview": "Overview",
+  "contracts": "Contracts",
+  "codes": "Codes",
+  "wasmCodes": "WASM Codes",
+  "Search by contract name": "Search by contract name",
+  "description": "The contract module provides an ownership structure for managing tokenized value backed by contracts or other tokenized units of value denominated as unit(s) of coin.",
+  "contractName": "Contract Name",
+  "contractTypeName": "Contract Type",
+  "contractAddress": "Contract Address",
+  "height": "Height",
+  "creator": "Creator",
+  "executes": "Executes",
+  "initiatedAt": "Initiated At",
+  "lastExecuted": "Last Executed",
+  "id": "ID",
+  "instantiatePermission": "Instantiate Permission",
+  "sender": "Sender",
+  "wasmContractDetails": "WASM Contract Details",
+  "wasmCode": "WASM Code",
+  "byteCode": "Compiled Code",
+  "compression": "Compression",
+  "gzipped": "Gzipped",
+  "uncompressed": "Uncompressed"
+}

apps/web-agoric/public/locales/it/common.json

@@ -56,6 +56,7 @@
   "params": "Parametri",
   "assets": "Risorse",
   "assetsModule": "Modulo Risorse",
+  "wasmContracts": "WASM Contracts",
   "errorTitle": "Ops! ",
   "errorDetails": "Se hai tempo, segnalalo al nostro github all'indirizzo <0>{{issue}}</0> con l'URL che ha causato l'errore.",
   "errorHome": "Clicca qui per tornare alla Home",
@@ -65,8 +66,27 @@
   "detailed": "Dettagliato",
   "profilesNotEnabled": "Profili non abilitati per questo explorer",
   "insertValidDtag": "Si prega di inserire una dtag valida",
-    "invalidAddress": "Address non valido",
+  "invalidAddress": "Address non valido",
   "24-hour": "Tempo di 24 ore",
-    "12-hour": "Tempo di 12 ore",
-  "documentation": "Documentazione"
+  "12-hour": "Tempo di 12 ore",
+  "documentation": "Documentazione",
+  "welcomeToBigDipper": "Welcome to Big Dipper",
+  "chooseYourWallet": "Choose your wallet",
+  "loading": "Loading...",
+  "logIn": "Log in",
+  "signOut": "Sign out",
+  "continue": "Continue",
+  "changeWallet": "Change Wallet",
+  "accountDetails": "Account Details",
+  "retry": "Retry",
+  "pleaseInstallWallet": "Please install {{wallet}}",
+  "pleaseOpenWallet": "Please open {{wallet}}",
+  "pleasePairWallet": "Please proceed pairing in your wallet..",
+  "couldntFindWalletExtension": "Couldn't find {{wallet}} installed in the browser. Please install it using official <0>{{wallet}} website</0> and try again.",
+  "nowSelectNetwork": "Now Select {{name}} Network",
+  "waitingForAuthorization": "Waiting for authorization...",
+  "loginSuccess": "Login Success",
+  "loginSuccessMsg": "The system will automatically redirect to the previous \npage in 3 seconds.",
+  "connectWalletConnect": "Connect Wallet Connect",
+  "scanWalletConnectQR": "Please scan the QR with a WalletConnect compatible Wallet."
 }

apps/web-agoric/public/locales/it/wasm_contracts.json

@@ -0,0 +1,26 @@
+{
+  "wasmContracts": "WASM Contracts",
+  "overview": "Overview",
+  "contracts": "Contracts",
+  "codes": "Codes",
+  "wasmCodes": "WASM Codes",
+  "Search by contract name": "Search by contract name",
+  "description": "The contract module provides an ownership structure for managing tokenized value backed by contracts or other tokenized units of value denominated as unit(s) of coin.",
+  "contractName": "Contract Name",
+  "contractTypeName": "Contract Type",
+  "contractAddress": "Contract Address",
+  "height": "Height",
+  "creator": "Creator",
+  "executes": "Executes",
+  "initiatedAt": "Initiated At",
+  "lastExecuted": "Last Executed",
+  "id": "ID",
+  "instantiatePermission": "Instantiate Permission",
+  "sender": "Sender",
+  "wasmContractDetails": "WASM Contract Details",
+  "wasmCode": "WASM Code",
+  "byteCode": "Compiled Code",
+  "compression": "Compression",
+  "gzipped": "Gzipped",
+  "uncompressed": "Uncompressed"
+}

apps/web-agoric/public/locales/pl/common.json

@@ -56,6 +56,7 @@
   "params": "Parametry",
   "assets": "Aktywa",
   "assetsModule": "Moduł aktywów",
+  "wasmContracts": "WASM Contracts",
   "errorTitle": "Ups! ",
   "errorDetails": "Jeśli masz czas, zgłoś to na naszym githubie pod adresem <0>{{issue}}</0> dołączając adres URL strony gdzie wystąpił błąd.",
   "errorHome": "Kliknij tutaj, aby wrócić do strony głównej",
@@ -65,8 +66,27 @@
   "detailed": "Szczegółowy",
   "profilesNotEnabled": "Profile nie są aktywne dla tego eksploratora",
   "insertValidDtag": "Proszę wprowadzić poprawny dtag",
-    "invalidAddress": "Błędny adres",
+  "invalidAddress": "Błędny adres",
   "24-hour": "Czas 24-godzinny",
   "12-hour": "12-godzinny czas",
-  "documentation": "Dokumentacja"
+  "documentation": "Dokumentacja",
+  "welcomeToBigDipper": "Welcome to Big Dipper",
+  "chooseYourWallet": "Choose your wallet",
+  "loading": "Loading...",
+  "logIn": "Log in",
+  "signOut": "Sign out",
+  "continue": "Continue",
+  "changeWallet": "Change Wallet",
+  "accountDetails": "Account Details",
+  "retry": "Retry",
+  "pleaseInstallWallet": "Please install {{wallet}}",
+  "pleaseOpenWallet": "Please open {{wallet}}",
+  "pleasePairWallet": "Please proceed pairing in your wallet..",
+  "couldntFindWalletExtension": "Couldn't find {{wallet}} installed in the browser. Please install it using official <0>{{wallet}} website</0> and try again.",
+  "nowSelectNetwork": "Now Select {{name}} Network",
+  "waitingForAuthorization": "Waiting for authorization...",
+  "loginSuccess": "Login Success",
+  "loginSuccessMsg": "The system will automatically redirect to the previous \npage in 3 seconds.",
+  "connectWalletConnect": "Connect Wallet Connect",
+  "scanWalletConnectQR": "Please scan the QR with a WalletConnect compatible Wallet."
 }

apps/web-agoric/public/locales/pl/wasm_contracts.json

@@ -0,0 +1,26 @@
+{
+  "wasmContracts": "WASM Contracts",
+  "overview": "Overview",
+  "contracts": "Contracts",
+  "codes": "Codes",
+  "wasmCodes": "WASM Codes",
+  "Search by contract name": "Search by contract name",
+  "description": "The contract module provides an ownership structure for managing tokenized value backed by contracts or other tokenized units of value denominated as unit(s) of coin.",
+  "contractName": "Contract Name",
+  "contractTypeName": "Contract Type",
+  "contractAddress": "Contract Address",
+  "height": "Height",
+  "creator": "Creator",
+  "executes": "Executes",
+  "initiatedAt": "Initiated At",
+  "lastExecuted": "Last Executed",
+  "id": "ID",
+  "instantiatePermission": "Instantiate Permission",
+  "sender": "Sender",
+  "wasmContractDetails": "WASM Contract Details",
+  "wasmCode": "WASM Code",
+  "byteCode": "Compiled Code",
+  "compression": "Compression",
+  "gzipped": "Gzipped",
+  "uncompressed": "Uncompressed"
+}