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"