feat: add WalletConnect integration for Ledger devices

frontend/package.json

@@ -39,6 +39,11 @@
     "@ledgerhq/hw-transport-webhid": "^5.7.0",
     "@ledgerhq/hw-transport-webusb": "4.74.1",
     "@metamask/detect-provider": "1.2.0",
+    "@wagmi/vue": "^0.1.9",
+    "@reown/appkit": "^1.6.6",
+    "@reown/appkit-adapter-wagmi": "^1.6.6",
+    "@tanstack/vue-query": "^4.36.1",
+    "viem": "^1.21.4",
     "@safe-global/safe-apps-provider": "^0.16.0",
     "@safe-global/safe-apps-react-sdk": "^4.6.4",
     "@safe-global/safe-apps-sdk": "^7.10.1",

frontend/src/ActionModal/components/ActionModal.vue

@@ -389,7 +389,8 @@ const SIGN_METHODS = {
   MATHWALLET: `mathwallet`,
   ONEWALLET: `onewallet`,
   METAMASK: `metamask`,
-  MULTISIG: 'multisig'
+  MULTISIG: 'multisig',
+  WALLETCONNECT: 'walletconnect'
 }
 
 const signMethodOptions = {
@@ -1302,4 +1303,4 @@ export default {
     top: 0;
   }
 } */
-</style>
+</style>

frontend/src/components/common/TmSessionExisting.vue

@@ -15,10 +15,10 @@
         />
         <LiSession
           v-if="!isMobileApp && !isIframe"
-          id="use-ledger-nano"
+          id="use-ledger-walletconnect"
           icon="vpn_key"
-          title="Use Ledger Nano (Pending Maintenance)"
-          route="ledger"
+          title="Use Ledger via WalletConnect"
+          route="walletconnect"
         />
 
         <LiSession

frontend/src/components/common/TmSessionWalletConnect.vue

@@ -0,0 +1,66 @@
+<template>
+  <SessionFrame>
+    <div class="session-container">
+      <h2 class="session-title">Use Ledger with WalletConnect</h2>
+      <div class="session-main">
+        <p>Connect your Ledger device through Ledger Live using WalletConnect</p>
+        <TmBtn value="Connect Wallet" @click.native="signIn()" />
+      </div>
+    </div>
+  </SessionFrame>
+</template>
+
+<script>
+import SessionFrame from "common/SessionFrame"
+import { sessionType } from "src/ActionModal/components/ActionModal"
+import { initWalletConnect } from "scripts/walletconnect-utils"
+import { toBech32 } from "@harmony-js/crypto"
+import TmBtn from "common/TmBtn"
+
+export default {
+  name: 'session-walletconnect',
+  components: {
+    SessionFrame,
+    TmBtn
+  },
+  data: () => ({
+    modal: null
+  }),
+  mounted() {
+    // TODO: Replace with actual project ID from cloud.reown.com
+    this.modal = initWalletConnect('harmony-staking-dashboard')
+  },
+  methods: {
+    async signIn() {
+      try {
+        const accounts = await this.modal.getAccounts()
+        if (accounts.length === 0) {
+          console.error("No accounts found")
+          return
+        }
+
+        this.$store.dispatch("signIn", {
+          sessionType: sessionType.WALLETCONNECT,
+          address: toBech32(accounts[0])
+        })
+
+        this.$router.push('/')
+      } catch (ex) {
+        console.error("WalletConnect error:", ex)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.session-title {
+  padding: 0 1rem;
+  margin: 0;
+}
+
+.session-main {
+  padding: 1rem;
+  text-align: center;
+}
+</style>

frontend/src/routes.js

@@ -192,6 +192,16 @@ export default [
       feature: "Session",
     },
   },
+  {
+    path: `/walletconnect`,
+    name: `walletconnect`,
+    components: {
+      session: require(`./components/common/TmSessionWalletConnect`).default,
+    },
+    meta: {
+      feature: "Session",
+    },
+  },
   {
     path: `/multisig`,
     name: `multisig`,

frontend/src/scripts/walletconnect-utils/index.js

@@ -0,0 +1,93 @@
+import { createAppKit } from '@reown/appkit/vue'
+import { mainnet } from '@reown/appkit/networks'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { toBech32 } from "@harmony-js/crypto"
+
+const HARMONY_MAINNET = {
+  id: 1666600000,
+  name: 'Harmony Mainnet',
+  network: 'harmony',
+  nativeCurrency: { name: 'ONE', symbol: 'ONE', decimals: 18 },
+  rpcUrls: {
+    default: { http: ['https://api.harmony.one'] },
+    public: { http: ['https://api.harmony.one'] },
+  },
+  blockExplorers: {
+    default: { name: 'Explorer', url: 'https://explorer.harmony.one/' },
+  },
+}
+
+export const initWalletConnect = (projectId) => {
+  const metadata = {
+    name: 'Harmony Staking',
+    description: 'Harmony Staking Dashboard',
+    url: window.location.origin,
+    icons: ['https://staking.harmony.one/icons/icon-512x512.png']
+  }
+
+  const wagmiAdapter = new WagmiAdapter({
+    networks: [HARMONY_MAINNET],
+    projectId
+  })
+
+  return createAppKit({
+    adapters: [wagmiAdapter],
+    networks: [HARMONY_MAINNET],
+    projectId,
+    metadata,
+    features: {
+      analytics: true
+    }
+  })
+}
+
+export const processWalletConnectMessage = async (transactionData, fee, networkConfig) => {
+  const { gasEstimate } = fee
+  const { chain_id, rpc_url } = networkConfig
+
+  const harmony = new Harmony(rpc_url, {
+    chainType: ChainType.Harmony,
+    chainId: chain_id
+  })
+
+  const txnParams = {
+    gasLimit: Unit.Wei(new BN(gasEstimate).add(new BN("20000"))).toHex(),
+    gasPrice: Unit.Wei(new BN(1000000000)).toHex(),
+    chainId: harmony.chainId
+  }
+
+  switch (transactionData.type) {
+    case "MsgSend":
+      return harmony.transactions.signTransaction({
+        ...txnParams,
+        to: transactionData.to,
+        value: Unit.Wei(transactionData.amount).toHex(),
+        data: "0x"
+      })
+
+    case "MsgDelegate":
+      return harmony.stakings.delegate({
+        ...txnParams,
+        delegatorAddress: transactionData.delegatorAddress,
+        validatorAddress: transactionData.validatorAddress,
+        amount: Unit.Wei(transactionData.amount).toHex()
+      })
+
+    case "MsgUndelegate":
+      return harmony.stakings.undelegate({
+        ...txnParams,
+        delegatorAddress: transactionData.delegatorAddress,
+        validatorAddress: transactionData.validatorAddress,
+        amount: Unit.Wei(transactionData.amount).toHex()
+      })
+
+    case "MsgWithdrawDelegationReward":
+      return harmony.stakings.collectRewards({
+        ...txnParams,
+        delegatorAddress: transactionData.delegatorAddress
+      })
+
+    default:
+      throw new Error(`Unknown transaction type: ${transactionData.type}`)
+  }
+}