ST-492: wallet-kit integration (#418)

package.json

@@ -20,15 +20,13 @@
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.9.1",
     "@sentry/react": "^7.53.1",
-    "@terra-money/feather.js": "^1.0.6",
-    "@terra-money/ledger-station-js": "^1.3.7",
+    "@terra-money/feather.js": "^1.0.8",
+    "@terra-money/ledger-station-js": "^1.3.8",
     "@terra-money/log-finder-ruleset": "^3.0.0",
     "@terra-money/terra-utils": "^1.0.9",
     "@terra-money/terra.js": "^3.1.9",
     "@terra-money/terra.proto": "^2.0.0",
-    "@terra-money/use-wallet": "4.0.0-beta.3",
-    "@terra-money/wallet-controller": "4.0.0-beta.3",
-    "@terra-money/wallet-provider": "4.0.0-beta.3",
+    "@terra-money/wallet-kit": "^1.0.4",
     "@tippyjs/react": "^4.2.6",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",

src/app/InitWallet.tsx

@@ -1,6 +1,5 @@
 import { PropsWithChildren, useEffect } from "react"
-import { WalletStatus } from "@terra-money/wallet-types"
-import { useWallet } from "@terra-money/use-wallet"
+import { WalletStatus, useWallet } from "@terra-money/wallet-kit"
 import { isWallet, useAuth } from "auth"
 import Online from "./containers/Online"
 import NetworkLoading from "./NetworkLoading"
@@ -15,7 +14,7 @@ const InitWallet = ({ children }: PropsWithChildren<{}>) => {
       timeout={{
         time: 3000,
         fallback: () => {
-          localStorage.removeItem("__terra_extension_router_session__")
+          localStorage.removeItem("__wallet_kit_connected_wallet")
           window.location.reload()
         },
       }}

src/app/sections/ConnectWallet.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next"
 import UsbIcon from "@mui/icons-material/Usb"
-import { useWallet } from "@terra-money/wallet-provider"
+import { useWallet } from "@terra-money/wallet-kit"
 import { STATION } from "config/constants"
 import { RenderButton } from "types/components"
 import { useAddress } from "data/wallet"
@@ -20,7 +20,7 @@ interface Props {
 const ConnectWallet = ({ renderButton }: Props) => {
   const { t } = useTranslation()
 
-  const { connect, availableConnections, availableInstallations } = useWallet()
+  const { connect, availableWallets } = useWallet()
 
   const { available } = useAuth()
 
@@ -34,23 +34,25 @@ const ConnectWallet = ({ renderButton }: Props) => {
   )
 
   const list = [
-    ...availableConnections
-      .filter(({ type }) => type !== "READONLY")
-      .map(({ type, identifier, name, icon }) => ({
+    ...availableWallets
+      .filter(({ isInstalled }) => isInstalled)
+      .map(({ id, name, icon }) => ({
         src: icon,
         children: name,
-        onClick: () => connect(type, identifier),
+        onClick: () => connect(id),
       })),
     {
       icon: <UsbIcon />,
       to: "/auth/ledger",
       children: t("Access with ledger"),
     },
-    ...availableInstallations.map(({ name, icon, url }) => ({
-      src: icon,
-      children: t(`Install ${name}`),
-      href: url,
-    })),
+    ...availableWallets
+      .filter(({ isInstalled, website }) => !isInstalled && website)
+      .map(({ name, icon, website }) => ({
+        src: icon,
+        children: t(`Install ${name}`),
+        href: website ?? "",
+      })),
   ]
 
   return (

src/app/sections/Connected.tsx

@@ -18,7 +18,7 @@ import styles from "./Connected.module.scss"
 import { useRecoilState } from "recoil"
 import { isWalletBarOpen, walletBarRoute, Path } from "pages/wallet/Wallet"
 import { useNavigate } from "react-router-dom"
-import { useWallet } from "@terra-money/use-wallet"
+import { useConnectedWallet, useWallet } from "@terra-money/wallet-kit"
 import {
   Contacts as ContactsIcon,
   Logout as LogoutIcon,
@@ -30,6 +30,7 @@ const Connected = () => {
   const navigate = useNavigate()
   const { wallet, getLedgerKey, disconnect: disconnectLedger } = useAuth()
   const { disconnect } = useWallet()
+  const connectedWallet = useConnectedWallet()
   const { data: name } = useTnsName(address ?? "")
   const [, setWalletIsOpen] = useRecoilState(isWalletBarOpen)
   const [, setWalletRoute] = useRecoilState(walletBarRoute)
@@ -117,7 +118,9 @@ const Connected = () => {
         className={styles.button}
       >
         <span className={styles.button__text}>
-          {isWallet.local(wallet) ? wallet.name : truncate(name ?? address)}
+          {isWallet.local(wallet)
+            ? wallet.name
+            : connectedWallet?.name ?? truncate(name ?? address)}
         </span>
       </Button>
     </Popover>

src/app/sections/Preferences.tsx

@@ -8,7 +8,7 @@ import NetworkSetting from "./NetworkSetting"
 import DisplayChainsSetting from "./DisplayChainsSetting"
 import LanguageSetting from "./LanguageSetting"
 import CurrencySetting from "./CurrencySetting"
-import { useWallet, WalletStatus } from "@terra-money/wallet-provider"
+import { useWallet, WalletStatus } from "@terra-money/wallet-kit"
 import { ModalButton } from "components/feedback"
 import SettingsButton from "components/layout/SettingsButton"
 import { useNetwork, useNetworkName } from "data/wallet"
@@ -70,8 +70,7 @@ const Preferences = () => {
       key: "network",
       tab: t("Network"),
       value: capitalize(networkName),
-      disabled:
-        !sandbox && connectedWallet.status === WalletStatus.WALLET_CONNECTED,
+      disabled: !sandbox && connectedWallet.status === WalletStatus.CONNECTED,
     },
     lang: {
       key: "lang",

src/auth/hooks/useAddress.ts

@@ -1,4 +1,4 @@
-import { useConnectedWallet } from "@terra-money/use-wallet"
+import { useConnectedWallet } from "@terra-money/wallet-kit"
 import { useNetworks } from "app/InitNetworks"
 import { addressFromWords } from "utils/bech32"
 import useAuth from "./useAuth"

src/auth/hooks/useNetwork.ts

@@ -1,7 +1,7 @@
 import { atom, useRecoilState, useRecoilValue } from "recoil"
 import { useNetworks } from "app/InitNetworks"
 import { getStoredNetwork, storeNetwork } from "../scripts/network"
-import { useWallet, WalletStatus } from "@terra-money/wallet-provider"
+import { useWallet, WalletStatus } from "@terra-money/wallet-kit"
 import { walletState } from "./useAuth"
 import is from "../scripts/is"
 import { useCustomLCDs } from "utils/localStorage"
@@ -51,7 +51,7 @@ export const useNetwork = (): Record<ChainID, InterchainNetwork> => {
   }
 
   // check connected wallet
-  if (connectedWallet.status === WalletStatus.WALLET_CONNECTED) {
+  if (connectedWallet.status === WalletStatus.CONNECTED) {
     if (network !== "mainnet" && "phoenix-1" in connectedWallet.network) {
       setNetwork("mainnet")
     } else if (network !== "testnet" && "pisco-1" in connectedWallet.network) {

src/auth/modules/select/SwitchWallet.tsx

@@ -11,7 +11,7 @@ import useAuth from "../../hooks/useAuth"
 import is from "../../scripts/is"
 import SelectPreconfigured from "./SelectPreconfigured"
 import styles from "./SwitchWallet.module.scss"
-import { useWallet } from "@terra-money/use-wallet"
+import { useWallet } from "@terra-money/wallet-kit"
 
 const SwitchWallet = () => {
   const { disconnect } = useWallet()

src/index.tsx

@@ -3,14 +3,12 @@ import { render } from "react-dom"
 import { BrowserRouter } from "react-router-dom"
 import { ReactQueryDevtools } from "react-query/devtools"
 import { RecoilRoot } from "recoil"
-import { getChainOptions } from "@terra-money/wallet-controller"
-import { WalletProvider } from "@terra-money/wallet-provider"
+import { WalletProvider, getInitialConfig } from "@terra-money/wallet-kit"
 import "tippy.js/dist/tippy.css"
 import { initSentry } from "utils/analytics/setupSentry"
 import { createAmplitudeClient } from "utils/analytics/setupAmplitude"
 
 import "config/lang"
-import { BRIDGE } from "config/constants"
 import { debug } from "utils/env"
 
 import "index.scss"
@@ -24,17 +22,16 @@ import InitChains from "app/InitChains"
 import WithNodeInfo from "app/WithNodeInfo"
 import InitQueryClient from "app/InitQueryClient"
 
-const connectorOpts = { bridge: BRIDGE }
 initSentry()
 createAmplitudeClient()
 
-getChainOptions().then((chainOptions) =>
+getInitialConfig().then((defaultNetworks) =>
   render(
     <StrictMode>
       <RecoilRoot>
         <BrowserRouter>
           <ScrollToTop />
-          <WalletProvider {...chainOptions} connectorOpts={connectorOpts}>
+          <WalletProvider defaultNetworks={defaultNetworks}>
             <InitQueryClient>
               <InitNetworks>
                 <WithNodeInfo>

src/pages/stake/QuickStake.tsx

@@ -25,8 +25,7 @@ import TokenSelector, {
   TokenInterface,
 } from "components/form/Selectors/TokenSelector/TokenSelector"
 import { useState } from "react"
-import { useAuth } from "auth"
-import is from "auth/scripts/is"
+import { useIsLedger } from "utils/ledger"
 
 export enum QuickStakeAction {
   DELEGATE = "Delegate",
@@ -89,7 +88,7 @@ const QuickStake = () => {
   const readNativeDenom = useNativeDenoms()
   const networks = useNetwork()
   const [token, setToken] = useState<string | undefined>("uluna")
-  const { wallet } = useAuth()
+  const isLedger = useIsLedger()
 
   const alliancesData = useAllAlliances()
   const alliances = alliancesData.reduce(
@@ -242,13 +241,6 @@ const QuickStake = () => {
                 )
               },
             },
-            /*{
-              title: t("Chain"),
-              dataIndex: "chainID",
-              defaultSortOrder: "desc",
-              sorter: ({ chainID: a }, { chainID: b }) => a.localeCompare(b),
-              render: (chainID) => networks[chainID]?.name || chainID,
-            },*/
             {
               title: (
                 <span>
@@ -316,7 +308,7 @@ const QuickStake = () => {
                   <ModalButton
                     title={t("Staking Details")}
                     renderButton={(open) =>
-                      is.ledger(wallet) && isAlliance ? (
+                      isLedger && isAlliance ? (
                         <InlineFlex gap={4} start>
                           <Tooltip
                             content={

src/txs/Tx.tsx

@@ -13,9 +13,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"
 import { isDenom } from "@terra-money/terra-utils"
 import { Coin, Coins, CreateTxOptions } from "@terra-money/feather.js"
 import { Fee } from "@terra-money/feather.js"
-import { ConnectType, UserDenied } from "@terra-money/wallet-types"
-import { CreateTxFailed, TxFailed } from "@terra-money/wallet-types"
-import { useWallet, useConnectedWallet } from "@terra-money/use-wallet"
+import { useWallet, useConnectedWallet } from "@terra-money/wallet-kit"
 
 import { Contents } from "types/components"
 import { has } from "utils/num"
@@ -137,7 +135,7 @@ function Tx<TxValues>(props: Props<TxValues>) {
     [queryKey.tx.create, key, isWalletEmpty],
     async () => {
       if (!key.address || isWalletEmpty) return 0
-      if (!(wallet || connectedWallet?.availablePost)) return 0
+      if (!(wallet || connectedWallet)) return 0
       if (!simulationTx || !simulationTx.msgs.length) return 0
       try {
         const unsignedTx = await lcd.tx.create([{ address: key.address }], {
@@ -279,6 +277,7 @@ function Tx<TxValues>(props: Props<TxValues>) {
         !hideLoader && setLatestTx({ txhash, ...latestTxBase })
       } else {
         const { result } = await post({ ...tx, fee })
+        if (!result) throw new Error("Tx failed")
         !hideLoader && setLatestTx({ txhash: result.txhash, ...latestTxBase })
       }
 
@@ -414,14 +413,11 @@ function Tx<TxValues>(props: Props<TxValues>) {
     )
   }
 
-  const walletError =
-    connectedWallet?.connectType === ConnectType.READONLY
-      ? t("Wallet is connected as read-only mode")
-      : !availableGasDenoms.length
-      ? t("Insufficient balance to pay transaction fee")
-      : isWalletEmpty
-      ? t("Coins required to post transactions")
-      : ""
+  const walletError = !availableGasDenoms.length
+    ? t("Insufficient balance to pay transaction fee")
+    : isWalletEmpty
+    ? t("Coins required to post transactions")
+    : ""
 
   const submitButton = (
     <>
@@ -468,22 +464,14 @@ function Tx<TxValues>(props: Props<TxValues>) {
   const modal = !error
     ? undefined
     : {
-        title:
-          error instanceof UserDenied ||
-          error?.toString().includes("UserDenied")
-            ? t("Transaction was denied by user")
-            : error instanceof CreateTxFailed
-            ? t("Failed to create tx")
-            : error instanceof TxFailed
-            ? t("Tx failed")
-            : t("Error"),
-        children:
-          error instanceof UserDenied ||
-          error?.toString().includes("UserDenied") ? null : (
-            <Pre height={120} normal break>
-              {error?.message}
-            </Pre>
-          ),
+        title: error?.toString().includes("UserDenied")
+          ? t("Transaction was denied by user")
+          : t("Error"),
+        children: error?.toString().includes("UserDenied") ? null : (
+          <Pre height={120} normal break>
+            {error?.message}
+          </Pre>
+        ),
       }
 
   return (

src/utils/ledger.ts

@@ -1,5 +1,8 @@
 import BluetoothTransport from "@ledgerhq/hw-transport-web-ble"
 import { LEDGER_TRANSPORT_TIMEOUT } from "config/constants"
+import is from "auth/scripts/is"
+import { useAuth } from "auth"
+import { useConnectedWallet } from "@terra-money/wallet-kit"
 
 export async function isBleAvailable() {
   const n: any = navigator
@@ -9,3 +12,10 @@ export async function isBleAvailable() {
 export async function createBleTransport() {
   return await BluetoothTransport.create(LEDGER_TRANSPORT_TIMEOUT)
 }
+
+export function useIsLedger(): boolean {
+  const { wallet } = useAuth()
+  const connectedWallet = useConnectedWallet()
+
+  return connectedWallet?.ledger || is.ledger(wallet)
+}