Ledger live implementation

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.0",
  "@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,50 @@ 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"
 
 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,
+ },
+ },
+ {
+ 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 +117,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/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"