Merge pull request #515 from threshold-network/ledger-live-implementa…

…tion

Ledger live implementation

This pull request introduces a new feature to support Ledger Live integration
in web3 applications using the `@ledgerhq/connect-kit-loader` package. This
newly created connector allows users to connect their wallets through 
Ledger Live app directly to the application and sign transactions securely. It
also allows them to connect their Ledger Nano device directly to the web3 app
by using [Ledger Extension](https://www.ledger.com/ledger-extension) (available
only on Safari).

### Changes

1. Added a new `LedgerConnector` class in the `connectors` directory to handle
the Ledger Live integration.
2. Integrated the `@ledgerhq/connect-kit-loader` package as a dependency to
facilitate communication with Ledger devices.
3. Implemented necessary methods in the `LedgerConnector` class to handle
connection, account retrieval etc.
4. Added `Ledger Live` option in `SelectWalletModal` component so that the
`LedgerLive` is displayed as one of the options when connecting to the dApp.

### Ledger Live documentation


[https://developers.ledger.com/docs/dapp-connect-kit/introduction/](https://developers.ledger.com/docs/dapp-connect-kit/introduction/)

Note: Most info down below are from [the
documentation](https://developers.ledger.com/docs/dapp-connect-kit/introduction/).
Check it out for more context!

The `@ledgerhq/connect-kit-loader` package provides a simple way to integrate
Ledger Live into web3 applications. The package handles communication with
Ledger devices, allowing users to manage accounts, sign transactions, and
access other blockchain-related features. This pull request leverages the
package to implement a web3-react connector for Ledger Live, providing a
seamless experience for users with Ledger hardware wallets. For more info about
the impementation see
https://developers.ledger.com/docs/dapp-connect-kit/implementation/ (`Custom
integration` chapter)

### How it works

The DApp Connect Kit lets you connect your DApps to Ledger hardware wallets. It
has two components:

- [Ledger Extension (intro
video)](https://www.youtube.com/watch?v=YbsrsbodpzQ), that makes it easy to
connect your Nano to Web3 directly from your browser, and also includes an
advanced mechanism to verify the security of the DApp. See [Web3
Check](https://developers.ledger.com/docs/dapp-connect-kit/web3-check/).
- Ledger Live which is a mobile and desktop application working as hardware
wallet synchronization manager and allowing Ledger users to buy, swap, grow,
and manage their digital assets from the security of their hardware wallet.


### Supported platforms

- Ledger Extension: is available on Safari for all Apple devices (requires
iOS16+ or MacOS 12+). Support for other desktop browsers will be added in
2023.

- Ledger Live mobile app: Native mobile apps and other browsers on iOS and
Android will trigger the Ledger Live app using a WalletConnect deeplink. Both
Ledger Live on iOS and Android can also be used to connect on desktop via the
WalletConnect QRcode.

- Ledger Live desktop app: Used as a fall back on desktop browsers until the
Ledger Extension support is added, and for USB connections.

If user is using Safari then he will be asked to use or install `Ledger
Extension`. If he uses any other browser then the modal will let him use or
install either `Ledger Live mobile app` or `Ledger Live desktop app`.

### Example of usage

After clicking `Connect wallet` user will see the `Ledger Live` option as one
of the methods to connect:

#### Case 1 - Safari browser

- Case 1.1 - User doesn't have the extenstion installed.

**Result**: Display a modal to guide the user with the setup process of the
browser extension, or the enable setting.

- Case 1.2 - User has the extenstion installed.

**Result**: On the first use, user is prompted to select and account to connect
to dApp. Otherwise  it autoconnects with the preciously used account. If you
want the dApp to ask you again then you need to press `Clear storage` in the
extension options.

#### Case 2 - Browser other than Safari

- Case 2.1 Ledger Live is installed

Result: Open a modal from which Ledger Live can be opened. If user is already
connected through Ledger Live then we connect him automatically.

For more information about modal behaviour please check
[https://developers.ledger.com/docs/dapp-connect-kit/button-behaviour/](https://developers.ledger.com/docs/dapp-connect-kit/button-behaviour/).

.env

@@ -9,6 +9,7 @@ REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
 REACT_APP_FEATURE_FLAG_FEEDBACK_MODULE=false
 REACT_APP_FEATURE_FLAG_POSTHOG=false
 REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
+REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
 REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL

.env.production

@@ -10,6 +10,7 @@ REACT_APP_FEATURE_FLAG_POSTHOG=$POSTHOG_SUPPORT
 REACT_APP_POSTHOG_API_KEY=$POSTHOG_API_KEY
 REACT_APP_POSTHOG_HOSTNAME_HTTP=$POSTHOG_HOSTNAME_HTTP
 REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
+REACT_APP_FEATURE_FLAG_LEDGER_LIVE=true
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
 REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL

package.json

@@ -19,6 +19,7 @@
     "@keep-network/tbtc": "development",
     "@keep-network/tbtc-v2": "development",
     "@keep-network/tbtc-v2.ts": "development",
+    "@ledgerhq/connect-kit-loader": "^1.1.2",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.33.0",

src/components/Modal/SelectWalletModal/ConnectLedgerLive.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react"
+import { useWeb3React } from "@web3-react/core"
+import { ledgerLive } from "../../../web3/connectors"
+import { WalletConnectionModalBase } from "./components"
+import { ConnectionError, WalletType } from "../../../enums"
+import doesErrorInclude from "../../../web3/utils/doesErrorInclude"
+import { LedgerLight } from "../../../static/icons/LedgerLight"
+import { LedgerDark } from "../../../static/icons/LedgerDark"
+import { useColorModeValue } from "@threshold-network/components"
+
+const ConnectLedgerLive: FC<{ goBack: () => void; closeModal: () => void }> = ({
+  goBack,
+  closeModal,
+}) => {
+  const { activate, error } = useWeb3React()
+
+  const connectionRejected = doesErrorInclude(
+    error,
+    ConnectionError.RejectedMetamaskConnection
+  )
+
+  const walletIcon = useColorModeValue(LedgerLight, LedgerDark)
+
+  return (
+    <WalletConnectionModalBase
+      connector={ledgerLive}
+      goBack={goBack}
+      closeModal={closeModal}
+      WalletIcon={walletIcon}
+      title="Ledger Live"
+      subTitle={
+        !error
+          ? "The Ledger Live extension will open in an external window."
+          : ""
+      }
+      tryAgain={connectionRejected ? () => activate(ledgerLive) : undefined}
+      walletType={WalletType.LedgerLive}
+      shouldForceCloseModal
+    />
+  )
+}
+
+export default ConnectLedgerLive

src/components/Modal/SelectWalletModal/ConnectWalletConnect.tsx

@@ -36,6 +36,7 @@ const ConnectWalletConnect: FC<{
         activate(walletConnect)
       }}
       walletType={WalletType.WalletConnect}
+      shouldForceCloseModal
     >
       <WalletConnectStatusAlert
         connectionRejected={connectionRejected}

src/components/Modal/SelectWalletModal/InitialSelection.tsx

@@ -18,26 +18,29 @@ const InitialWalletSelection: FC<{
 }> = ({ walletOptions, onSelect }) => {
   return (
     <VStack divider={<StackDivider margin="0 40px !important" />}>
-      {walletOptions.map((opt) => (
-        <Button
-          key={opt.id}
-          variant="unstyled"
-          w="100%"
-          h="100px"
-          _hover={{ bg: useColorModeValue("gray.100", "gray.500") }}
-          _active={{ bg: "gray.300" }}
-          borderRadius={0}
-          onClick={() => onSelect(opt.id)}
-        >
-          <Stack justify="space-between" direction="row" px="40px">
-            <Stack direction="row">
-              <Icon as={opt.icon} h="40px" w="40px" mr="32px" />
-              <H4>{opt.title}</H4>
+      {walletOptions.map((opt) => {
+        const icon = useColorModeValue(opt.icon.light, opt.icon.dark)
+        return (
+          <Button
+            key={opt.id}
+            variant="unstyled"
+            w="100%"
+            h="100px"
+            _hover={{ bg: useColorModeValue("gray.100", "gray.500") }}
+            _active={{ bg: "gray.300" }}
+            borderRadius={0}
+            onClick={() => onSelect(opt.id)}
+          >
+            <Stack justify="space-between" direction="row" px="40px">
+              <Stack direction="row">
+                <Icon as={icon} h="40px" w="40px" mr="32px" />
+                <H4>{opt.title}</H4>
+              </Stack>
+              <Icon as={BiRightArrowAlt} h="40px" w="40px" />
             </Stack>
-            <Icon as={BiRightArrowAlt} h="40px" w="40px" />
-          </Stack>
-        </Button>
-      ))}
+          </Button>
+        )
+      })}
     </VStack>
   )
 }

src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx

@@ -27,6 +27,14 @@ interface Props extends BaseModalProps {
   goBack: () => void
   connector?: AbstractConnector
   walletType: WalletType
+  /**
+   * This is required for some of the providers (for example WalletConnect v2),
+   * because they have their own modal that is being opened. In that case we
+   * can't display our loading modal because it has larger z-index than
+   * provider's one and it's too problematic to change that.
+   *
+   */
+  shouldForceCloseModal?: boolean
 }
 
 const WalletConnectionModalBase: FC<Props> = ({
@@ -40,6 +48,7 @@ const WalletConnectionModalBase: FC<Props> = ({
   onContinue,
   connector,
   walletType,
+  shouldForceCloseModal,
 }) => {
   const { activate, active, account } = useWeb3React()
   const captureWalletConnected = useCapture(PosthogEvent.WalletConnected)
@@ -49,8 +58,14 @@ const WalletConnectionModalBase: FC<Props> = ({
 
     captureWalletConnected({ walletType })
     activate(connector)
-    if (walletType === WalletType.WalletConnect) closeModal()
-  }, [activate, connector, captureWalletConnected, walletType])
+    if (shouldForceCloseModal) closeModal()
+  }, [
+    activate,
+    connector,
+    captureWalletConnected,
+    walletType,
+    shouldForceCloseModal,
+  ])
 
   return (
     <>

src/components/Modal/SelectWalletModal/index.tsx

@@ -16,27 +16,55 @@ import { CoinbaseWallet } from "../../../static/icons/CoinbaseWallet"
 import { useModal } from "../../../hooks/useModal"
 import ModalCloseButton from "../ModalCloseButton"
 import ConnectTaho from "./ConnectTaho"
+import ConnectLedgerLive from "./ConnectLedgerLive"
+import { LedgerLight } from "../../../static/icons/LedgerLight"
+import { LedgerDark } from "../../../static/icons/LedgerDark"
+import { featureFlags } from "../../../constants"
 
 const walletOptions: WalletOption[] = [
   {
     id: WalletType.TAHO,
     title: "Taho",
-    icon: Taho,
+    icon: {
+      light: Taho,
+      dark: Taho,
+    },
   },
   {
     id: WalletType.Metamask,
     title: "MetaMask",
-    icon: MetaMaskIcon,
+    icon: {
+      light: MetaMaskIcon,
+      dark: MetaMaskIcon,
+    },
   },
+  ...(featureFlags.LEDGER_LIVE
+    ? [
+        {
+          id: WalletType.LedgerLive,
+          title: "Ledger Live",
+          icon: {
+            light: LedgerLight,
+            dark: LedgerDark,
+          },
+        },
+      ]
+    : []),
   {
     id: WalletType.WalletConnect,
     title: "WalletConnect",
-    icon: WalletConnectIcon,
+    icon: {
+      light: WalletConnectIcon,
+      dark: WalletConnectIcon,
+    },
   },
   {
     id: WalletType.Coinbase,
     title: "Coinbase Wallet",
-    icon: CoinbaseWallet,
+    icon: {
+      light: CoinbaseWallet,
+      dark: CoinbaseWallet,
+    },
   },
 ]
 
@@ -94,6 +122,8 @@ const ConnectWallet: FC<{
       return <ConnectWalletConnect goBack={goBack} closeModal={onClose} />
     case WalletType.Coinbase:
       return <ConnectCoinbase goBack={goBack} closeModal={onClose} />
+    case WalletType.LedgerLive:
+      return <ConnectLedgerLive goBack={goBack} closeModal={onClose} />
     default:
       return <></>
   }

src/components/Navbar/WalletConnectionAlert.tsx

@@ -4,41 +4,49 @@ import {
   AlertIcon,
   CloseButton,
 } from "@chakra-ui/react"
-import { FC, useEffect, useMemo, useState } from "react"
+import { FC, useEffect, useState } from "react"
 import isSupportedNetwork from "../../utils/isSupportedNetwork"
 import chainIdToNetworkName from "../../utils/chainIdToNetworkName"
 import { supportedChainId } from "../../utils/getEnvVariable"
+import { useWeb3React } from "@web3-react/core"
 
 const WalletConnectionAlert: FC<{
   account?: string | null
   chainId?: number
 }> = ({ account, chainId }) => {
   const [hideAlert, setHideAlert] = useState(false)
+  const { error } = useWeb3React()
+  const [alertDescription, setAlertDescription] = useState("")
 
-  const alertDescription = useMemo(() => {
-    if (!account) {
+  const errorMessage = error?.message
+
+  useEffect(() => {
+    if (errorMessage) {
+      setAlertDescription(errorMessage)
       setHideAlert(false)
       return
     }
 
-    if (!isSupportedNetwork(chainId)) {
-      return `Your wallet is on an unsupported network. Switch to the ${chainIdToNetworkName(
-        supportedChainId
-      )} network`
-    }
-  }, [account, chainId])
-
-  useEffect(() => {
     if (!account || (account && isSupportedNetwork(chainId))) {
       setHideAlert(true)
       return
     }
 
     if (!isSupportedNetwork(chainId)) {
+      setAlertDescription(
+        `Your wallet is on an unsupported network. Switch to the ${chainIdToNetworkName(
+          supportedChainId
+        )} network`
+      )
       setHideAlert(false)
       return
     }
-  }, [account, chainId])
+  }, [account, chainId, errorMessage])
+
+  const resetAlert = () => {
+    setHideAlert(true)
+    setAlertDescription("")
+  }
 
   if (hideAlert) {
     return null
@@ -60,7 +68,7 @@ const WalletConnectionAlert: FC<{
         position="absolute"
         right="8px"
         top="8px"
-        onClick={() => setHideAlert(true)}
+        onClick={resetAlert}
       />
     </Alert>
   )

src/constants/featureFlags.ts

@@ -18,3 +18,6 @@ export const SENTRY = getEnvVariable(EnvVariable.FEATURE_FLAG_SENTRY) === "true"
 
 export const TBTC_V2_REDEMPTION =
   getEnvVariable(EnvVariable.FEATURE_FLAG_TBTC_V2_REDEMPTION) === "true"
+
+export const LEDGER_LIVE =
+  getEnvVariable(EnvVariable.FEATURE_FLAG_LEDGER_LIVE) === "true"

src/enums/env.ts

@@ -7,6 +7,7 @@ const envVariables = [
   "FEATURE_FLAG_MULTI_APP_STAKING",
   "FEATURE_FLAG_POSTHOG",
   "FEATURE_FLAG_FEEDBACK_MODULE",
+  "FEATURE_FLAG_LEDGER_LIVE",
   "POSTHOG_HOSTNAME_HTTP",
   "POSTHOG_API_KEY",
   "ELECTRUM_PROTOCOL",

src/enums/web3.ts

@@ -16,4 +16,5 @@ export enum WalletType {
   Metamask = "METAMASK",
   WalletConnect = "WALLET_CONNECT",
   Coinbase = "COINBASE",
+  LedgerLive = "LEDGER_LIVE",
 }

src/static/icons/LedgerDark.tsx

@@ -0,0 +1,21 @@
+import { createIcon } from "@chakra-ui/icons"
+
+export const LedgerDark = createIcon({
+  displayName: "Ledger",
+  viewBox: "0 0 160 160",
+  path: (
+    <svg
+      width="160"
+      height="160"
+      viewBox="0 0 160 160"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="160" height="160" rx="16" fill="#00000D" />
+      <path
+        d="M93.1482 119.207V125H135V98.8769H128.902V119.207H93.1482ZM93.1482 33V38.792H128.902V59.1231H135V33H93.1482ZM74.0104 59.1231H67.9125V98.8769H95.4153V93.6539H74.0104V59.1231ZM26 98.8769V125H67.8518V119.207H32.0979V98.8769H26ZM26 33V59.1231H32.0979V38.792H67.8518V33H26Z"
+        fill="white"
+      />
+    </svg>
+  ),
+})

src/static/icons/LedgerLight.tsx

@@ -0,0 +1,21 @@
+import { createIcon } from "@chakra-ui/icons"
+
+export const LedgerLight = createIcon({
+  displayName: "Ledger",
+  viewBox: "0 0 160 160",
+  path: (
+    <svg
+      width="160"
+      height="160"
+      viewBox="0 0 160 160"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="160" height="160" rx="16" fill="white" />
+      <path
+        d="M93.1482 119.207V125H135V98.8769H128.902V119.207H93.1482ZM93.1482 33V38.792H128.902V59.1231H135V33H93.1482ZM74.0104 59.1231H67.9125V98.8769H95.4153V93.6539H74.0104V59.1231ZM26 98.8769V125H67.8518V119.207H32.0979V98.8769H26ZM26 33V59.1231H32.0979V38.792H67.8518V33H26Z"
+        fill="#00000D"
+      />
+    </svg>
+  ),
+})

src/types/wallet.ts

@@ -3,6 +3,9 @@ import { WalletType } from "../enums"
 
 export interface WalletOption {
   id: WalletType
-  icon: FC
   title: string
+  icon: {
+    light: FC
+    dark: FC
+  }
 }

src/web3/connectors/index.ts

@@ -2,5 +2,6 @@ export * from "./taho"
 export * from "./metamask"
 export * from "./walletConnect"
 export * from "./coinbaseWallet"
+export * from "./ledgerLive"
 export { AbstractConnector } from "@web3-react/abstract-connector"
 export { UserRejectedRequestError } from "@web3-react/injected-connector"