Ledger Live App

manifest-ledger-live-app.json

@@ -0,0 +1,40 @@
+{
+  "id": "threshold",
+  "name": "Threshold",
+  "url": "http://localhost:3000?embed=true",
+  "homepageUrl": "http://localhost:3000",
+  "icon": "https://dashboard.threshold.network/favicon-T.png",
+  "platform": "all",
+  "apiVersion": "2.0.0",
+  "manifestVersion": "1",
+  "branch": "stable",
+  "categories": ["tbtc", "bitocin", "bridge"],
+  "currencies": ["bitcoin", "ethereum", "bitcoin_testnet", "ethereum_goerli"],
+  "content": {
+    "shortDescription": {
+      "en": "Threshold's tBTC is a truly decentralized bridge between Bitcoin and Ethereum."
+    },
+    "description": {
+      "en": "tBTC is Threshold’s decentralized bridge to bring BTC to the Ethereum network; the only permissionless solution on the market today. Bridge your Bitcoin to Ethereum in a secure and trustless way to participate in DeFi."
+    }
+  },
+  "permissions": [
+    "account.list",
+    "account.receive",
+    "account.request",
+    "currency.list",
+    "device.close",
+    "device.exchange",
+    "device.transport",
+    "message.sign",
+    "transaction.sign",
+    "transaction.signAndBroadcast",
+    "storage.set",
+    "storage.get",
+    "bitcoin.getXPub",
+    "wallet.capabilities",
+    "wallet.userId",
+    "wallet.info"
+  ],
+  "domains": ["https://*", "wss://*"]
+}

package.json

@@ -21,6 +21,8 @@
     "@keep-network/tbtc": "development",
     "@keep-network/tbtc-v2.ts": "^2.3.0",
     "@ledgerhq/connect-kit-loader": "^1.1.2",
+    "@ledgerhq/wallet-api-client": "^1.2.0",
+    "@ledgerhq/wallet-api-client-react": "^1.1.1",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.33.0",
@@ -44,6 +46,7 @@
     "@web3-react/types": "^6.0.7",
     "@web3-react/walletlink-connector": "^6.2.13",
     "axios": "^0.24.0",
+    "bignumber.js": "^9.1.2",
     "bitcoin-address-validation": "^2.2.1",
     "crypto-js": "^4.1.1",
     "ethereum-blockies-base64": "^1.0.2",

src/App.tsx

@@ -40,6 +40,7 @@ import { useCheckBonusEligibility } from "./hooks/useCheckBonusEligibility"
 import { useFetchStakingRewards } from "./hooks/useFetchStakingRewards"
 import { isSameETHAddress } from "./web3/utils"
 import { ThresholdProvider } from "./contexts/ThresholdContext"
+import { LedgerLiveAppProvider } from "./contexts/LedgerLiveAppContext"
 import {
   useSubscribeToAuthorizationIncreasedEvent,
   useSubscribeToAuthorizationDecreaseApprovedEvent,
@@ -58,6 +59,9 @@ import {
   useSubscribeToRedemptionRequestedEvent,
 } from "./hooks/tbtc"
 import { useSentry } from "./hooks/sentry"
+import { useIsEmbed } from "./hooks/useIsEmbed"
+import TBTC from "./pages/tBTC"
+import { useDetectIfEmbed } from "./hooks/useDetectIfEmbed"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToVendingMachineContractEvents()
@@ -170,6 +174,7 @@ const AppBody = () => {
     dispatch(fetchETHPriceUSD())
   }, [dispatch])
 
+  useDetectIfEmbed()
   usePosthog()
   useCheckBonusEligibility()
   useFetchStakingRewards()
@@ -180,12 +185,13 @@ const AppBody = () => {
 }
 
 const Layout = () => {
+  const { isEmbed } = useIsEmbed()
   return (
     <Box display="flex">
-      <Sidebar />
+      {!isEmbed && <Sidebar />}
       <Box
         // 100% - 80px is to account for the sidebar
-        w={{ base: "100%", md: "calc(100% - 80px)" }}
+        w={{ base: "100%", md: isEmbed ? "100%" : "calc(100% - 80px)" }}
         bg={useColorModeValue("transparent", "gray.900")}
       >
         <Navbar />
@@ -199,12 +205,15 @@ const Layout = () => {
 }
 
 const Routing = () => {
+  const { isEmbed } = useIsEmbed()
+  const finalPages = isEmbed ? [TBTC] : pages
+  const to = isEmbed ? "tBTC" : "overview"
   return (
     <Routes>
       <Route path="*" element={<Layout />}>
-        <Route index element={<Navigate to="overview" />} />
-        {pages.map(renderPageComponent)}
-        <Route path="*" element={<Navigate to="overview" />} />
+        <Route index element={<Navigate to={to} />} />
+        {finalPages.map(renderPageComponent)}
+        <Route path="*" element={<Navigate to={to} />} />
       </Route>
     </Routes>
   )
@@ -248,17 +257,19 @@ const App: FC = () => {
   return (
     <Router basename={`${process.env.PUBLIC_URL}`}>
       <Web3ReactProvider getLibrary={getLibrary}>
-        <ThresholdProvider>
-          <ReduxProvider store={reduxStore}>
-            <ChakraProvider theme={theme}>
-              <TokenContextProvider>
-                <Web3EventHandlerComponent />
-                <ModalRoot />
-                <AppBody />
-              </TokenContextProvider>
-            </ChakraProvider>
-          </ReduxProvider>
-        </ThresholdProvider>
+        <LedgerLiveAppProvider>
+          <ThresholdProvider>
+            <ReduxProvider store={reduxStore}>
+              <ChakraProvider theme={theme}>
+                <TokenContextProvider>
+                  <Web3EventHandlerComponent />
+                  <ModalRoot />
+                  <AppBody />
+                </TokenContextProvider>
+              </ChakraProvider>
+            </ReduxProvider>
+          </ThresholdProvider>
+        </LedgerLiveAppProvider>
       </Web3ReactProvider>
     </Router>
   )

src/components/Modal/tBTC/InitiateUnminting.tsx

@@ -10,7 +10,7 @@ import {
   ModalHeader,
   Skeleton,
 } from "@threshold-network/components"
-import { useWeb3React } from "@web3-react/core"
+import { useIsActive } from "../../../hooks/useIsActive"
 import { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import { useThreshold } from "../../../contexts/ThresholdContext"
@@ -43,7 +43,7 @@ const InitiateUnmintingBase: FC<InitiateUnmintingProps> = ({
   btcAddress,
 }) => {
   const navigate = useNavigate()
-  const { account } = useWeb3React()
+  const { account } = useIsActive()
   const { estimatedBTCAmount, thresholdNetworkFee } =
     useRedemptionEstimatedFees(unmintAmount)
   const threshold = useThreshold()

src/components/Navbar/index.tsx

@@ -1,18 +1,34 @@
-import { FC } from "react"
-import { useWeb3React } from "@web3-react/core"
-import { useModal } from "../../hooks/useModal"
+import { FC, useEffect } from "react"
 import NavbarComponent from "./NavbarComponent"
-import { ModalType } from "../../enums"
+import { useAppDispatch } from "../../hooks/store"
+import { walletConnected } from "../../store/account"
+import { useRequestEthereumAccount } from "../../hooks/ledger-live-app"
+import { useIsActive } from "../../hooks/useIsActive"
+import { useConnectWallet } from "../../hooks/useConnectWallet"
 
 const Navbar: FC = () => {
-  const { openModal } = useModal()
-  const { account, active, chainId, deactivate } = useWeb3React()
-  const openWalletModal = () => openModal(ModalType.SelectWallet)
+  const { isActive, account, chainId, deactivate } = useIsActive()
+  const dispatch = useAppDispatch()
+  const connectWallet = useConnectWallet()
+
+  const { account: ledgerLiveAccount, requestAccount } =
+    useRequestEthereumAccount()
+  const ledgerLiveAccountAddress = ledgerLiveAccount?.address
+
+  const openWalletModal = () => {
+    connectWallet()
+  }
+
+  useEffect(() => {
+    if (ledgerLiveAccountAddress) {
+      dispatch(walletConnected(ledgerLiveAccountAddress))
+    }
+  }, [ledgerLiveAccountAddress, dispatch])
 
   return (
     <NavbarComponent
       {...{
-        active,
+        active: isActive,
         account,
         chainId,
         openWalletModal,

src/components/SubmitTxButton.tsx

@@ -1,9 +1,8 @@
-import React, { FC } from "react"
+import { FC } from "react"
 import { Button, ButtonProps } from "@chakra-ui/react"
-import { ModalType } from "../enums"
-import { useWeb3React } from "@web3-react/core"
-import { useModal } from "../hooks/useModal"
+import { useIsActive } from "../hooks/useIsActive"
 import { useIsTbtcSdkInitializing } from "../contexts/ThresholdContext"
+import { useConnectWallet } from "../hooks/useConnectWallet"
 
 interface Props extends ButtonProps {
   onSubmit?: () => void
@@ -15,11 +14,15 @@ const SubmitTxButton: FC<Props> = ({
   submitText = "Upgrade",
   ...buttonProps
 }) => {
-  const { active } = useWeb3React()
-  const { openModal } = useModal()
+  const { isActive } = useIsActive()
   const { isSdkInitializedWithSigner } = useIsTbtcSdkInitializing()
+  const connectWallet = useConnectWallet()
 
-  if (active && isSdkInitializedWithSigner) {
+  const onConnectWalletClick = () => {
+    connectWallet()
+  }
+
+  if (isActive && isSdkInitializedWithSigner) {
     return (
       <Button mt={6} isFullWidth onClick={onSubmit} {...buttonProps}>
         {submitText}
@@ -31,7 +34,7 @@ const SubmitTxButton: FC<Props> = ({
     <Button
       mt={6}
       isFullWidth
-      onClick={() => openModal(ModalType.SelectWallet)}
+      onClick={onConnectWalletClick}
       {...buttonProps}
       type="button"
       isDisabled={false}

src/components/TokenBalance.tsx

@@ -12,9 +12,9 @@ import {
   BoxProps,
   Icon,
 } from "@threshold-network/components"
-import { useWeb3React } from "@web3-react/core"
 import { formatTokenAmount } from "../utils/formatAmount"
 import tokenIconMap, { TokenIcon } from "../static/icons/tokenIconMap"
+import { useIsActive } from "../hooks/useIsActive"
 
 export interface TokenBalanceProps {
   tokenAmount: string | number
@@ -95,8 +95,7 @@ const TokenBalance: FC<TokenBalanceProps & TextProps> = ({
   withHigherPrecision = false,
   ...restProps
 }) => {
-  const { active } = useWeb3React()
-  const shouldRenderTokenAmount = active
+  const { isActive: shouldRenderTokenAmount } = useIsActive()
 
   const _tokenAmount = useMemo(() => {
     return formatTokenAmount(tokenAmount || 0, tokenFormat, tokenDecimals)

src/components/TokenBalanceInput/index.tsx

@@ -31,6 +31,7 @@ export interface TokenBalanceInputProps
   hasError?: boolean
   errorMsgText?: string | JSX.Element
   helperText?: string | JSX.Element
+  tokenDecimals?: number
 }
 
 const TokenBalanceInput: FC<TokenBalanceInputProps> = ({
@@ -42,6 +43,7 @@ const TokenBalanceInput: FC<TokenBalanceInputProps> = ({
   errorMsgText,
   helperText,
   hasError = false,
+  tokenDecimals = web3Constants.STANDARD_ERC20_DECIMALS,
   ...inputProps
 }) => {
   const inputRef = useRef<HTMLInputElement>()
@@ -64,24 +66,18 @@ const TokenBalanceInput: FC<TokenBalanceInputProps> = ({
   const setToMax = () => {
     let remainder = Zero
     const { decimalScale } = inputProps
-    if (
-      decimalScale &&
-      decimalScale > 0 &&
-      decimalScale < web3Constants.STANDARD_ERC20_DECIMALS
-    ) {
+    if (decimalScale && decimalScale > 0 && decimalScale < tokenDecimals) {
       remainder = BigNumber.from(max).mod(
-        BigNumber.from(10).pow(
-          web3Constants.STANDARD_ERC20_DECIMALS - decimalScale
-        )
+        BigNumber.from(10).pow(tokenDecimals - decimalScale)
       )
     }
-    _setAmount(formatUnits(BigNumber.from(max).sub(remainder)))
+    _setAmount(formatUnits(BigNumber.from(max).sub(remainder), tokenDecimals))
     setAmount(valueRef.current)
   }
 
   const _setAmount = (value: string | number) => {
     valueRef.current = value
-      ? parseUnits(value.toString()).toString()
+      ? parseUnits(value.toString(), tokenDecimals).toString()
       : undefined
   }
 
@@ -106,7 +102,7 @@ const TokenBalanceInput: FC<TokenBalanceInputProps> = ({
           onValueChange={(values: NumberFormatInputValues) =>
             _setAmount(values.value)
           }
-          value={amount ? formatUnits(amount) : undefined}
+          value={amount ? formatUnits(amount, tokenDecimals) : undefined}
           onChange={() => {
             setAmount(valueRef.current)
           }}

src/components/tBTC/BridgeActivity.tsx

@@ -1,5 +1,4 @@
 import { FC, createContext, useContext, ReactElement } from "react"
-import { useWeb3React } from "@web3-react/core"
 import {
   Badge,
   BodyMd,
@@ -27,6 +26,7 @@ import { InlineTokenBalance } from "../TokenBalance"
 import Link from "../Link"
 import { OutlineListItem } from "../OutlineListItem"
 import { RedemptionDetailsLinkBuilder } from "../../utils/tBTC"
+import { useIsActive } from "../../hooks/useIsActive"
 
 export type BridgeActivityProps = {
   data: BridgeActivityType[]
@@ -105,7 +105,7 @@ const ActivityItem: FC<BridgeActivityType> = ({
   additionalData,
   txHash,
 }) => {
-  const { account } = useWeb3React()
+  const { account } = useIsActive()
 
   const link =
     bridgeProcess === "unmint"