feat: add rootstock staking

Author: ahsan-javaiid

src/assets/pic/rootstock.png

@@ -1,13 +1,13 @@
 <template>
   <div class="account-select" v-if="account">
     <a ref="toggle" class="account-select__block" @click="toggleAction" href="javascript:void(0)">
-      <img :src="wallet.wallet.value?.adapter.icon" />
+      <img :src="walletIcon" />
       <span>{{ $filters.replaceWithEllipsis(account.address, 4, 4) }}</span>
       <arrow-down />
     </a>
     <div v-show="isOpen" ref="dropdown" class="account-select__dropdown">
       <div class="account-select__info">
-        <img :src="wallet.wallet.value?.adapter.icon" />
+        <img :src="walletIcon" />
         <span>{{ $filters.replaceWithEllipsis(account.address, 4, 4) }}</span>
         <a class="account-select__info-action" @click="onCopyClicked" href="javascript:void(0)">
           <copy-icon />
@@ -17,7 +17,7 @@
         </a>
       </div>
       <div class="account-select__amount">
-        {{ $filters.cryptoCurrencyFormat(walletBalance) }} <span>sol</span>
+        {{ $filters.cryptoCurrencyFormat(walletBalance) }} <span>{{ balanceSymbol }}</span>
       </div>
       <a @click="disconnectAction" class="account-select__disconnect" href="javascript:void(0)">
         <logout-icon />
@@ -37,25 +37,33 @@ import CopyIcon from "@/icons/common/copy-icon.vue";
 import LinkIcon from "@/icons/common/link-icon.vue";
 import LogoutIcon from "@/icons/common/logout-icon.vue";
 import { SharedTypes } from "@/store/shared/consts";
-import { copyToClipboard, openSolscanExplorerAddress } from "@/utils/browser";
+import { copyToClipboard, openExplorerAddress } from "@/utils/browser";
 import { useWallet } from "solana-wallets-vue";
+import { Chains } from "@/core/interfaces";
+import { BASE_TOKENS } from "@/core/constants/index";
 
 const wallet = useWallet();
 const isOpen = ref<boolean>(false);
 const dropdown = ref(null);
 const toggle = ref(null);
 const store = useStore();
 
-const walletBalance = computed(() => store.getters[SharedTypes.WALLET_BALANCE_GETTER]);
-const network = computed(() => store.getters[SharedTypes.NETWORK_GETTER]);
-
 const props = defineProps({
   account: {
     type: Object as PropType<Account>,
     default: null,
   },
 });
 
+const walletBalance = computed(() => store.getters[SharedTypes.WALLET_BALANCE_GETTER]);
+const network = computed(() => store.getters[SharedTypes.NETWORK_GETTER]);
+const activeChain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const walletIcon = computed(() => props.account?.image ?? wallet.wallet.value?.adapter.icon ?? "");
+const balanceSymbol = computed(() => {
+  const chain = activeChain.value as Chains;
+  return BASE_TOKENS[chain]?.symbol?.toUpperCase?.() ?? "";
+});
+
 const emit = defineEmits(["disconnect"]);
 
 const toggleAction = () => {
@@ -73,7 +81,7 @@ const onCopyClicked = () => {
 }
 
 const onLinkClicked = () => {
-  openSolscanExplorerAddress(props.account.address, network.value);
+  openExplorerAddress(props.account.address, activeChain.value as Chains, network.value);
 }
 
 onClickOutside(

src/components/account-select/index.vue

@@ -17,23 +17,21 @@
             <span>Get Enkrypt</span>
           </a>
 
-          <!--
           <select-list
             v-if="!isToggleMenu"
-            :select="network"
-            :items="[chainsData[Chains.SOLANA]]"
+            :select="currentChainOption"
+            :items="chainOptions"
             :is-minify="true"
             :is-list-image="true"
             @update:select="selectNetworkAction"
           />
-          -->
 
           <account-select
-            v-if="wallet.connected.value && !isToggleMenu"
+            v-if="isWalletConnected && !isToggleMenu"
             :account="walletAccount"
             @disconnect="disconnectWallet"
           ></account-select>
-          <a v-else-if="!isToggleMenu && !wallet.connected.value" class="header__connect" @click="openWalletModal" href="javascript:void(0)">
+          <a v-else-if="!isToggleMenu" class="header__connect" @click="connectWallet" href="javascript:void(0)">
             Connect
           </a>
         </div>
@@ -70,13 +68,22 @@ const store = useStore();
 const router = useRouter();
 const isScroll = ref<boolean>(false);
 const wallet = useWallet();
-const network = ref<ChainDataItem>(chainsData[Chains.SOLANA]);
 const walletAccount = computed(() => store.getters[SharedTypes.WALLET_ACCOUNT_GETTER]);
 const isWalletModalOpen = computed(() => store.getters[SharedTypes.IS_CONNECT_MODAL_VISIBLE_GETTER]);
+const activeChain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const isWalletConnected = computed(() => store.getters[SharedTypes.IS_WALLET_CONNECTED_GETTER]);
+const chainOptions = computed<ChainDataItem[]>(() => [
+  chainsData[Chains.SOLANA],
+  chainsData[Chains.ROOTSTOCK],
+]);
+const currentChainOption = computed<ChainDataItem>(() => chainsData[activeChain.value]);
 
 watch(
   () => wallet.publicKey?.value,
   (newVal, oldVal) => {
+    if (activeChain.value !== Chains.SOLANA) {
+      return;
+    }
     if (newVal) {
       if (oldVal && newVal.toString() !== oldVal.toString()) {
         store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
@@ -89,9 +96,13 @@ watch(
   { immediate: true }
 );
 
-const openWalletModal = () => {
+const connectWallet = async () => {
   trackButtonsEvents(ButtonsActionEventType.MainScreenConnectButtonClicked);
-  store.dispatch(SharedTypes.CONNECT_MODAL_ACTION, true);
+  if (activeChain.value === Chains.SOLANA) {
+    store.dispatch(SharedTypes.CONNECT_MODAL_ACTION, true);
+  } else {
+    await store.dispatch(SharedTypes.CONNECT_EVM_WALLET_ACTION);
+  }
 };
 
 const updateWalletModalVisibility = (visible: boolean) => {
@@ -101,10 +112,13 @@ const updateWalletModalVisibility = (visible: boolean) => {
 const disconnectWallet = async () => {
   trackButtonsEvents(ButtonsActionEventType.MainScreenDisconnectButtonClicked);
   try {
-    if (wallet.connected.value) {
+    if (activeChain.value === Chains.SOLANA && wallet.connected.value) {
       await store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
       await wallet.disconnect();
       router.push('/');
+    } else if (activeChain.value === Chains.ROOTSTOCK) {
+      await store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
+      router.push('/');
     }
   } catch (err) {
     console.error('Failed to disconnect:', err);
@@ -140,8 +154,17 @@ const onScroll = () => {
   }
 };
 
-const selectNetworkAction = (item: ChainDataItem) => {
-  network.value = item;
+const selectNetworkAction = async (item: ChainDataItem) => {
+  if (item.id === activeChain.value) {
+    return;
+  }
+
+  if (activeChain.value === Chains.SOLANA && wallet.connected.value) {
+    await store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
+    await wallet.disconnect();
+  }
+
+  await store.dispatch(SharedTypes.SWITCH_CHAIN_ACTION, item.id as Chains);
 };
 
 const toggleMenu = () => {

src/components/app-header/index.vue

@@ -18,11 +18,19 @@
         >
           <span>Stake Solana</span>
         </router-link>
+        <router-link 
+          :to="{ name: 'stake' }" 
+          class="stake"
+          :class="{ disabled: !isStakeRootstockEnabled }"
+          :disabled="!isStakeRootstockEnabled"
+        >
+          <span>Stake Rootstock</span>
+        </router-link>
         <router-link 
           :to="{ name: 'portfolio' }" 
           class="portfolio"
-          :class="{ disabled: !wallet.connected.value }"
-          :disabled="!wallet.connected.value"
+          :class="{ disabled: !isPortfolioEnabled }"
+          :disabled="!isPortfolioEnabled"
         >
           <portfolio-icon />
           <span>My staking portfolio</span>
@@ -61,10 +69,53 @@
 import HomeIcon from "@/icons/menu/home-icon.vue";
 import PortfolioIcon from "@/icons/menu/portfolio-icon.vue";
 import BuyIcon from "@/icons/menu/buy-icon.vue";
+import { computed, ref, watch } from "vue";
+import { useStore } from "vuex";
 import { useWallet } from "solana-wallets-vue";
 import { openContactSupport } from "@/utils/browser";
+import { SharedTypes } from "@/store/shared/consts";
+import { Chains } from "@/core/interfaces";
+import { ROOTSTOCK_STRIF_TOKEN_ADDRESS, STRIF_TOKEN_ABI } from "@/core/constants";
+import EvmWalletService from "@/core/services/evmWalletService";
+import { ethers } from "ethers";
 
 const wallet = useWallet();
+const store = useStore();
+const evmWalletService = EvmWalletService.getInstance();
+const rootstockStakedBalance = ref(0);
+const chain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const account = computed(() => store.getters[SharedTypes.WALLET_ACCOUNT_GETTER]);
+const rootstockBalance = computed(() => store.getters[SharedTypes.WALLET_BALANCE_GETTER]);
+const isPortfolioEnabled = computed(() => {
+  if (chain.value === Chains.ROOTSTOCK) {
+    return rootstockStakedBalance.value > 0;
+  }
+  return wallet.connected.value;
+});
+const isStakeRootstockEnabled = computed(() => {
+  return chain.value === Chains.ROOTSTOCK && !!account.value?.address && rootstockBalance.value > 0;
+});
+
+watch([chain, account], async () => {
+  if (chain.value !== Chains.ROOTSTOCK || !account.value?.address) {
+    rootstockStakedBalance.value = 0;
+    return;
+  }
+
+  try {
+    const provider = evmWalletService.getRpcProvider();
+    if (!provider) {
+      rootstockStakedBalance.value = 0;
+      return;
+    }
+
+    const stRifContract = new ethers.Contract(ROOTSTOCK_STRIF_TOKEN_ADDRESS, STRIF_TOKEN_ABI, provider);
+    const balance = await stRifContract.balanceOf(account.value.address);
+    rootstockStakedBalance.value = Number(ethers.utils.formatEther(balance));
+  } catch {
+    rootstockStakedBalance.value = 0;
+  }
+}, { immediate: true });
 
 defineProps({
   isToggleMenu: {

src/components/app-menu/index.vue

@@ -1,16 +1,16 @@
 import { makeRequest } from "@/utils/request";
-import { SolanaPriceResponse, SolanaPriceRequest } from "../interfaces/price";
+import { TokenMarketDataResponse, TokenMarketDataRequest } from "../interfaces/price";
 
-export async function getSolanaPrice(): Promise<SolanaPriceResponse> {
-  return makeRequest<SolanaPriceRequest, SolanaPriceResponse>({
+export async function getTokenMarketData(tokenId: string): Promise<TokenMarketDataResponse> {
+  return makeRequest<TokenMarketDataRequest, TokenMarketDataResponse>({
     route: "",
     externalLink: `https://api-v3.ethvm.dev/`,
     method: "POST",
     body: {
       operationName: null,
       variables: {},
       query:
-        '{\n  getCoinGeckoTokenMarketDataByIds(coinGeckoTokenIds: ["solana"]) {\n    id\n    symbol\n    name\n    image\n    market_cap\n    market_cap_rank\n    high_24h\n    low_24h\n    price_change_24h\n    price_change_percentage_24h\n    sparkline_in_24h {\n      price\n    }\n    price_change_percentage_24h_in_currency\n    current_price\n  }\n}\n',
+        `{\n  getCoinGeckoTokenMarketDataByIds(coinGeckoTokenIds: ["${tokenId}"]) {\n    id\n    symbol\n    name\n    image\n    market_cap\n    market_cap_rank\n    high_24h\n    low_24h\n    price_change_24h\n    price_change_percentage_24h\n    sparkline_in_24h {\n      price\n    }\n    price_change_percentage_24h_in_currency\n    current_price\n  }\n}\n`,
     },
   });
 }

src/core/api/price.ts

@@ -15,6 +15,7 @@ import {
   GetValidatorSummaryResponse,
   GetDelegatorApyResponse,
   getDelegatorRewardsResponse,
+  RootstockAbiResponse,
 } from "@/core/interfaces";
 import { makeRequest } from "@/utils/request";
 import { P2P_VALIDATOR } from "@/core/constants"
@@ -142,3 +143,11 @@ export async function getDelegatorApy(
     method: "GET",
   });
 };
+
+export async function getRootstockAbi(): Promise<RootstockAbiResponse> {
+  return makeRequest<void, RootstockAbiResponse>({
+    route: ``,
+    externalLink: "https://metrics-api.rootstockcollective.xyz/api/rc-abi",
+    method: "GET",
+  });
+};

src/core/api/staking.ts

@@ -17,12 +17,21 @@ export const BASE_TOKENS: BaseTokens = {
     name: "Solana",
     image: require("@/assets/pic/solana.token.svg"),
     symbol: "sol",
+    coinGeckoId: "solana",
   },
   [Chains.ETHEREUM]: {
     id: 2,
     name: "Ethereum",
     image: require("@/assets/pic/ethereum.network.png"),
     symbol: "eth",
+    coinGeckoId: "ethereum",
+  },
+  [Chains.ROOTSTOCK]: {
+    id: 3,
+    name: "Rootstock",
+    image: require("@/assets/pic/rootstock.png"),
+    symbol: "rif",
+    coinGeckoId: "rif-token",
   }
 };
 
@@ -31,6 +40,11 @@ export const chainsData: ChainData = {
     id: "solana",
     name: "Solana",
     image: require("@/assets/pic/solana.network.png"),
+  },
+  [Chains.ROOTSTOCK]: {
+    id: "rootstock",
+    name: "Rootstock",
+    image: require("@/assets/pic/rootstock.png"),
   }
 }
 
@@ -49,6 +63,61 @@ export const validators: {
         image: require("@/assets/pic/p2p.validator.svg"),
         address: "FKsC411dik9ktS6xPADxs4Fk2SCENvAiuccQHLAPndvk",
       }
+    },
+    [Chains.ROOTSTOCK]: {
+      apy: "",
+      fee: "",
+      validatorData: {
+        id: "p2p",
+        name: "P2P.org",
+        image: require("@/assets/pic/p2p.validator.svg"),
+        address: "0x0000000000000000000000000000000000000000",
+      }
     }
   }
 }
+
+export const ROOTSTOCK_RIF_TOKEN_ADDRESS = "0x2acc95758f8b5f583470ba265eb685a8f45fc9d5";
+export const ROOTSTOCK_STRIF_TOKEN_ADDRESS = "0x5db91e24bd32059584bbdb831a901f1199f3d459";
+export const ROOTSTOCK_RBTC_TOKEN_ADDRESS = "0xf7ab6cfaebbadfe8b5494022c4c6db776bd63b6b";
+export const ROOTSTOCK_BUILDER_REGISTRY_ADDRESS = "0x8cb62c58AC3D1253c6467537FDDc563857eD76cb";
+export const ROOTSTOCK_REWARD_DISTRIBUTOR_ADDRESS = "0x5603Ba40257e317e45BA13C3732819Af5E81a9A1";
+export const ROOTSTOCK_BACKER_MANAGER_ADDRESS = "0x7995C48D987941291d8008695A4133E557a11530";
+
+export const RIF_TOKEN_ABI = [
+  "function balanceOf(address owner) view returns (uint256)",
+  "function approve(address spender, uint256 amount) returns (bool)",
+];
+
+export const STRIF_TOKEN_ABI = [
+  "function balanceOf(address owner) view returns (uint256)",
+  "function depositAndDelegate(address to, uint256 value)",
+  "function withdrawTo(address account, uint256 value) returns (bool)",
+];
+
+export const ROOTSTOCK_BUILDER_REGISTRY_ABI = [
+  "function getGaugesLength() view returns (uint256)",
+  "function getHaltedGaugesLength() view returns (uint256)",
+  "function getGaugeAt(uint256 index_) view returns (address)",
+  "function getHaltedGaugeAt(uint256 index_) view returns (address)",
+  "function gaugeToBuilder(address gauge) view returns (address builder)",
+  "function backerRewardPercentage(address builder) view returns (uint64 previous, uint64 next, uint128 cooldownEndTime)",
+];
+
+export const ROOTSTOCK_GAUGE_ABI = [
+  "function rewardShares() view returns (uint256)",
+  "function earned(address rewardToken_, address backer_) external view returns (uint256)",
+  "function allocationOf(address backer) external view returns (uint256 allocation)",
+];
+
+export const ROOTSTOCK_REWARD_DISTRIBUTOR_ABI = [
+  "function defaultRifAmount() view returns (uint256)",
+  "function defaultNativeAmount() view returns (uint256)",
+];
+
+export const ROOTSTOCK_BACKER_MANAGER_ABI = [
+  "function totalPotentialReward() view returns (uint256)",
+  "function backerTotalAllocation(address backer) view returns (uint256 allocation)",
+  "function allocateBatch(address[] gauges_, uint256[] allocations_) external",
+  "function claimBackerRewards(address[] gauges_) external",
+];

src/core/constants/index.ts

@@ -7,6 +7,7 @@ export enum Providers {
 export enum Chains {
   ETHEREUM = "ethereum",
   SOLANA = "solana",
+  ROOTSTOCK = "rootstock",
 };
 
 export enum Networks {