add ledger live connector

dapp-oeth/ledger_manifest.json

@@ -0,0 +1,42 @@
+{
+  "id": "oeth",
+  "name": "Origin Ether",
+  "url": "https://dapp-browser.apps.ledger.com",
+  "params": {
+    "dappUrl": "https://app.oeth.com/?embed=true",
+    "nanoApp": "Ethereum",
+    "dappName": "Ethereum",
+    "networks": [
+      {
+        "currency": "ethereum",
+        "chainID": 1,
+        "nodeURL": ""
+      }
+    ]
+  },
+  "homepageUrl": "https://app.oeth.com/",
+  "icon": "https://www.oeth.com/images/oeth.svg",
+  "platform": "all",
+  "apiVersion": "0.0.1",
+  "manifestVersion": "1",
+  "branch": "stable",
+  "categories": [
+    "liquid staking derivatives",
+    "defi"
+  ],
+  "currencies": [
+    "ethereum"
+  ],
+  "content": {
+    "shortDescription": {
+      "en": "An ETH-pegged token that earns yield from all forms of staking."
+    },
+    "description": {
+      "en": "An ETH-pegged token that earns yield from all forms of staking."
+    }
+  },
+  "permissions": [],
+  "domains": [
+    "https://*"
+  ]
+}

dapp-oeth/next.config.js

@@ -110,6 +110,10 @@ const config = {
             key: 'x-ipfs-path',
             value: '/ipns/ousd.eth/',
           },
+          {
+            key: 'Content-Security-Policy',
+            value: "frame-ancestors https://*.ledger.com",
+          },
         ],
       },
     ]

dapp-oeth/package.json

@@ -90,7 +90,8 @@
     "react-styl": "^0.0.3",
     "react-toastify": "^6.2.0",
     "sass": "^1.39.2",
-    "use-analytics": "^0.0.5"
+    "use-analytics": "^0.0.5",
+    "web3-ledgerhq-frame-connector": "^1.0.1"
   },
   "babel": {
     "presets": [

dapp-oeth/src/components/GetOUSD.js

@@ -7,6 +7,7 @@ import { useRouter } from 'next/router'
 import withWalletSelectModal from 'hoc/withWalletSelectModal'
 import { event } from '../../lib/gtm'
 import { walletLogin } from 'utils/account'
+import { ledgerLiveConnector } from 'utils/connectors'
 
 const GetOUSD = ({
   id,
@@ -35,6 +36,7 @@ const GetOUSD = ({
     zIndex2 && 'zIndex2',
     navMarble && 'nav-marble'
   )
+  const ledgerLive = ledgerLiveConnector?.isLedgerApp()
 
   useEffect(() => {
     if (
@@ -58,7 +60,11 @@ const GetOUSD = ({
         onClick={() => {
           if (process.browser) {
             event({'event': 'connect_click'})
-            walletLogin(showLogin, activate)
+            if (ledgerLive) {
+              activate(ledgerLiveConnector, undefined, true)
+            } else {
+              walletLogin(showLogin, activate)
+            }
           }
         }}
       >

dapp-oeth/src/components/Nav.js

@@ -18,6 +18,7 @@ import { adjustLinkHref } from 'utils/utils'
 import { assetRootPath } from 'utils/image'
 import TransactionStore from 'stores/TransactionStore'
 import { usePrevious } from 'utils/hooks'
+import { ledgerLiveConnector } from 'utils/connectors'
 
 const environment = process.env.NODE_ENV
 
@@ -352,6 +353,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
   const { pathname } = useRouter()
   const { active, account } = useWeb3React()
   const apy = useStoreState(ContractStore, (s) => s.apy.apy30 || 0)
+  const ledgerLive = ledgerLiveConnector?.isLedgerApp()
 
   const [{ elRef, isSticky }] = useSticky({
     defaultSticky: false,
@@ -390,7 +392,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
                 <TransactionActivityDropdown />
               </div>
             )}
-            {!active && (
+            {!active && !ledgerLive (
               <div className="d-flex d-lg-none">
                 <GetOUSD
                   navMarble

dapp-oeth/src/components/_AccountStatusContent.js

@@ -10,7 +10,7 @@ import { isCorrectNetwork, truncateAddress, networkIdToName } from 'utils/web3'
 import { useOverrideAccount } from 'utils/hooks'
 import { currencies } from 'constants/Contract'
 import { formatCurrency } from 'utils/math'
-import { getConnectorIcon } from 'utils/connectors'
+import { getConnectorIcon, ledgerLiveConnector } from 'utils/connectors'
 import { assetRootPath } from 'utils/image'
 
 const AccountStatusContent = ({ className, onOpen }) => {
@@ -24,6 +24,8 @@ const AccountStatusContent = ({ className, onOpen }) => {
   const { overrideAccount } = useOverrideAccount()
   const router = useRouter()
 
+  const ledgerLive = ledgerLiveConnector?.isLedgerApp()
+
   return (
     <>
       <div
@@ -44,7 +46,7 @@ const AccountStatusContent = ({ className, onOpen }) => {
             {active && correctNetwork && (
               <div className="d-flex justify-content-between align-items-center account-contain">
                 <p>Account</p>
-                {!overrideAccount && (
+                {!overrideAccount && !ledgerLive && (
                   <div className="disconnect-box d-flex">
                     <a
                       className=""

dapp-oeth/src/utils/connectors.js

@@ -5,6 +5,7 @@ import { MewConnectConnector } from '@myetherwallet/mewconnect-connector'
 import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react'
 import { LedgerConnector } from 'utils/LedgerConnector'
 import { DeFiWeb3Connector } from 'deficonnect'
+import { LedgerHQFrameConnector } from 'web3-ledgerhq-frame-connector'
 import { get } from 'lodash'
 import { isProduction } from 'constants/env'
 
@@ -69,6 +70,11 @@ export const defiWalletConnector = process.browser
     })
   : {}
 
+export const ledgerLiveConnector = new LedgerHQFrameConnector({
+  targetOrigin: "https://dapp-browser.apps.ledger.com",
+  timeoutMilliseconds: 10000,
+})
+
 export const connectorNameIconMap = {
   MetaMask: 'metamask-icon.svg',
   Ledger: 'ledger-icon.svg',

dapp-oeth/src/utils/hooks.js

@@ -8,6 +8,7 @@ import {
   injectedConnector,
   gnosisConnector,
   ledgerConnector,
+  ledgerLiveConnector,
 } from './connectors'
 import AccountStore from 'stores/AccountStore'
 import analytics from 'utils/analytics'
@@ -20,6 +21,7 @@ export function useEagerConnect() {
   const [triedEager, setTriedEager] = useState(false)
   const [triedSafeMultisig, setTriedSafeMultisig] = useState(false)
   const [isSafeMultisig, setIsSafeMultisig] = useState(false)
+  const [triedLedgerLive, setTriedLedgerLive] = useState(false)
 
   // Attempt to use Gnosis Safe Multisig if available
   useEffect(() => {
@@ -50,12 +52,34 @@ export function useEagerConnect() {
     attemptSafeConnection()
   }, [process.browser]) // Try this when Safe multisig connector is started
 
+  useEffect(() => {
+    async function attemptLedgerLiveConnection() {
+      try {
+        if (ledgerLiveConnector?.isLedgerApp()) {
+          await activate(ledgerLiveConnector, undefined, true)
+        }
+      } catch (error) {
+        console.debug(error)
+        setTriedLedgerLive(true)
+        return
+      }
+
+      AccountStore.update((s) => {
+        s.connectorName = 'Ledger'
+      })
+
+      setTriedLedgerLive(true)
+    }
+
+    attemptLedgerLiveConnection()
+  }, [process.browser, triedSafeMultisig])
+
   // Attempt to use injectedConnector connector
   useEffect(() => {
     async function attemptEagerConnection() {
       // Must try Safe multisig before injectedConnector connector, don't do anything
       // further if using Safe multisig
-      if (!triedSafeMultisig || isSafeMultisig) return
+      if (!triedSafeMultisig || isSafeMultisig || !triedLedgerLive) return
 
       const eagerConnect = localStorage.getItem('eagerConnect', false)
       // Local storage request we don't try eager connect

dapp-oeth/src/utils/web3.js

@@ -9,7 +9,7 @@ export function isCorrectNetwork(chainId) {
   } else {
     return (
       chainId ===
-      (parseInt(process.env.NEXT_PUBLIC_ETHEREUM_RPC_CHAIN_ID) || 1337)
+      (parseInt(process.env.NEXT_PUBLIC_ETHEREUM_RPC_CHAIN_ID)) || 1337
     )
   }
 }

dapp-oeth/yarn.lock

@@ -2269,6 +2269,13 @@
     "@ledgerhq/errors" "^6.10.0"
     events "^3.3.0"
 
+"@ledgerhq/iframe-provider@0":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/iframe-provider/-/iframe-provider-0.4.3.tgz#62f680a935b753487df7d8bf48a13952f5456e4e"
+  integrity sha512-T7rSxDMjOnV25QWo3aoWWLytB+VvFcQH5xVkYt7hAhc8qCaK9fnJD5VcmrqwPnyjzXslu7Vz8wUwj9w0CIgp6A==
+  dependencies:
+    eventemitter3 "^4.0.0"
+
 "@ledgerhq/logs@^4.72.0":
   version "4.72.0"
   resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-4.72.0.tgz#43df23af013ad1135407e5cf33ca6e4c4c7708d5"
@@ -3063,7 +3070,7 @@
     typedarray-to-buffer "^3.1.5"
     yaeti "^0.0.6"
 
-"@web3-react/[email protected]", "@web3-react/abstract-connector@^6.0.7":
+"@web3-react/abstract-connector@6", "@web3-react/abstract-connector@6.0.7", "@web3-react/abstract-connector@^6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@web3-react/abstract-connector/-/abstract-connector-6.0.7.tgz#401b3c045f1e0fab04256311be49d5144e9badc6"
   integrity sha512-RhQasA4Ox8CxUC0OENc1AJJm8UTybu/oOCM61Zjg6y0iF7Z0sqv1Ai1VdhC33hrQpA8qSBgoXN9PaP8jKmtdqg==
@@ -3099,7 +3106,7 @@
     "@web3-react/abstract-connector" "^6.0.7"
     "@web3-react/types" "^6.0.7"
 
-"@web3-react/types@^6.0.7":
+"@web3-react/types@6", "@web3-react/types@^6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-6.0.7.tgz#34a6204224467eedc6123abaf55fbb6baeb2809f"
   integrity sha512-ofGmfDhxmNT1/P/MgVa8IKSkCStFiyvXe+U5tyZurKdrtTDFU+wJ/LxClPDtFerWpczNFPUSrKcuhfPX1sI6+A==
@@ -7361,7 +7368,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
   integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
 
-[email protected]:
+[email protected], eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -14460,6 +14467,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
+  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+
 tiny-invariant@^1.0.2, tiny-invariant@^1.0.6, tiny-invariant@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
@@ -15535,6 +15547,16 @@ [email protected]:
     web3-net "1.2.4"
     web3-utils "1.2.4"
 
+web3-ledgerhq-frame-connector@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/web3-ledgerhq-frame-connector/-/web3-ledgerhq-frame-connector-1.0.1.tgz#7554fb5e9d1da19e1ab24e434dbc4d0c012c0527"
+  integrity sha512-AnSISDK0csoi2V/dMAjcomK8ZbFAYk22KArSoG/chDKlvLgxBgXafWheQPgV7540Efd/wMbtcjo4NotY2M3nDA==
+  dependencies:
+    "@ledgerhq/iframe-provider" "0"
+    "@web3-react/abstract-connector" "6"
+    "@web3-react/types" "6"
+    tiny-invariant "1"
+
 [email protected]:
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/web3-net/-/web3-net-1.2.11.tgz#eda68ef25e5cdb64c96c39085cdb74669aabbe1b"