From 0d26512d2ebdf586f343f1a0f3097510df4a2486 Mon Sep 17 00:00:00 2001
From: Daniel McCartney <dmccartney@gmail.com>
Date: Mon, 21 Oct 2024 03:30:00 -0700
Subject: [PATCH] feat: show NS RPL deposits and detail limiting factors

---
 web/src/contracts.js                         |   15 +
 web/src/generated/contracts/RPL.json         |  515 ++++++++
 web/src/generated/contracts/RPLVault.json    | 1145 ++++++++++++++++++
 web/src/generated/contracts/RocketVault.json |  359 ++++++
 web/src/pages/NodeSetPage.js                 |  833 +++++++++++--
 5 files changed, 2745 insertions(+), 122 deletions(-)
 create mode 100644 web/src/generated/contracts/RPL.json
 create mode 100644 web/src/generated/contracts/RPLVault.json
 create mode 100644 web/src/generated/contracts/RocketVault.json

diff --git a/web/src/contracts.js b/web/src/contracts.js
index 7905844..0b7727c 100644
--- a/web/src/contracts.js
+++ b/web/src/contracts.js
@@ -8,6 +8,9 @@ import RocketNodeDistributorInterface from "./generated/contracts/RocketNodeDist
 import RocketNodeManager from "./generated/contracts/RocketNodeManager.json";
 import RocketRewardsPool from "./generated/contracts/RocketRewardsPool.json";
 import RocketStorageK from "./generated/contracts/RocketStorage.json";
+import RocketVault from "./generated/contracts/RocketVault.json";
+import RPL from "./generated/contracts/RPL.json";
+import RPLVault from "./generated/contracts/RPLVault.json";
 import SuperNodeAccount from "./generated/contracts/SuperNodeAccount.json";
 import WETH from "./generated/contracts/WETH.json";
 import WETHVault from "./generated/contracts/WETHVault.json";
@@ -72,6 +75,18 @@ const contracts = {
     address: "0x1d8f8f00cfa6758d7bE78336684788Fb0ee0Fa46",
     abi: RocketStorageK.abi,
   },
+  RocketVault: {
+    address: "0x3bdc69c4e5e13e52a65f5583c23efb9636b469d6",
+    abi: RocketVault.abi,
+  },
+  RPL: {
+    address: "0xD33526068D116cE69F19A9ee46F0bd304F21A51f",
+    abi: RPL.abi,
+  },
+  RPLVault: {
+    address: "0x1DB1Afd9552eeB28e2e36597082440598B7F1320",
+    abi: RPLVault.abi,
+  },
   SuperNodeAccount: {
     address: "0x2A906f92B0378Bb19a3619E2751b1e0b8cab6B29",
     abi: SuperNodeAccount.abi,
diff --git a/web/src/generated/contracts/RPL.json b/web/src/generated/contracts/RPL.json
new file mode 100644
index 0000000..7109b82
--- /dev/null
+++ b/web/src/generated/contracts/RPL.json
@@ -0,0 +1,515 @@
+{
+  "contractName": "RPL",
+  "abi": [
+    {
+      "inputs": [
+        {
+          "internalType": "contract RocketStorageInterface",
+          "name": "_rocketStorageAddress",
+          "type": "address"
+        },
+        {
+          "internalType": "contract IERC20",
+          "name": "_rocketTokenRPLFixedSupplyAddress",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "value",
+          "type": "uint256"
+        }
+      ],
+      "name": "Approval",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "from",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "RPLFixedSupplyBurn",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "address",
+          "name": "sender",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "value",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "inflationCalcTime",
+          "type": "uint256"
+        }
+      ],
+      "name": "RPLInflationLog",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "from",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "to",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "value",
+          "type": "uint256"
+        }
+      ],
+      "name": "Transfer",
+      "type": "event"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        }
+      ],
+      "name": "allowance",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "approve",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "account",
+          "type": "address"
+        }
+      ],
+      "name": "balanceOf",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "burn",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "account",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "burnFrom",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "decimals",
+      "outputs": [
+        {
+          "internalType": "uint8",
+          "name": "",
+          "type": "uint8"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "subtractedValue",
+          "type": "uint256"
+        }
+      ],
+      "name": "decreaseAllowance",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getInflationCalcTime",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getInflationIntervalRate",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getInflationIntervalStartTime",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getInflationIntervalTime",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "pure",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getInflationIntervalsPassed",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getInflationRewardsContractAddress",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "addedValue",
+          "type": "uint256"
+        }
+      ],
+      "name": "increaseAllowance",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "inflationCalculate",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "inflationMintTokens",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "name",
+      "outputs": [
+        {
+          "internalType": "string",
+          "name": "",
+          "type": "string"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "swapTokens",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "symbol",
+      "outputs": [
+        {
+          "internalType": "string",
+          "name": "",
+          "type": "string"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "totalSupply",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "totalSwappedRPL",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "recipient",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "transfer",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "sender",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "recipient",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "transferFrom",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "version",
+      "outputs": [
+        {
+          "internalType": "uint8",
+          "name": "",
+          "type": "uint8"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ]
+}
diff --git a/web/src/generated/contracts/RPLVault.json b/web/src/generated/contracts/RPLVault.json
new file mode 100644
index 0000000..43f3742
--- /dev/null
+++ b/web/src/generated/contracts/RPLVault.json
@@ -0,0 +1,1145 @@
+{
+  "contractName": "RPLVault",
+  "abi": [
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "address",
+          "name": "previousAdmin",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "address",
+          "name": "newAdmin",
+          "type": "address"
+        }
+      ],
+      "name": "AdminChanged",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "value",
+          "type": "uint256"
+        }
+      ],
+      "name": "Approval",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "beacon",
+          "type": "address"
+        }
+      ],
+      "name": "BeaconUpgraded",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "sender",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        }
+      ],
+      "name": "Deposit",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "bool",
+          "name": "oldValue",
+          "type": "bool"
+        },
+        {
+          "indexed": true,
+          "internalType": "bool",
+          "name": "newValue",
+          "type": "bool"
+        }
+      ],
+      "name": "DifferingSenderRecipientEnabledChanged",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "uint8",
+          "name": "version",
+          "type": "uint8"
+        }
+      ],
+      "name": "Initialized",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "oldValue",
+          "type": "uint256"
+        },
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "newValue",
+          "type": "uint256"
+        }
+      ],
+      "name": "MinWethRplRatioChanged",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "oldValue",
+          "type": "uint256"
+        },
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "newValue",
+          "type": "uint256"
+        }
+      ],
+      "name": "RPLLiquidityReservePercentChanged",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "from",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "to",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "value",
+          "type": "uint256"
+        }
+      ],
+      "name": "Transfer",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "oldFee",
+          "type": "uint256"
+        },
+        {
+          "indexed": true,
+          "internalType": "uint256",
+          "name": "newFee",
+          "type": "uint256"
+        }
+      ],
+      "name": "TreasuryFeeChanged",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "implementation",
+          "type": "address"
+        }
+      ],
+      "name": "Upgraded",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "sender",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "receiver",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        }
+      ],
+      "name": "Withdraw",
+      "type": "event"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        }
+      ],
+      "name": "allowance",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "approve",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "asset",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "account",
+          "type": "address"
+        }
+      ],
+      "name": "balanceOf",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        }
+      ],
+      "name": "convertToAssets",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        }
+      ],
+      "name": "convertToShares",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "decimals",
+      "outputs": [
+        {
+          "internalType": "uint8",
+          "name": "",
+          "type": "uint8"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "subtractedValue",
+          "type": "uint256"
+        }
+      ],
+      "name": "decreaseAllowance",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        },
+        {
+          "internalType": "address",
+          "name": "receiver",
+          "type": "address"
+        }
+      ],
+      "name": "deposit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "depositsEnabled",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "differingSenderRecipientEnabled",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getDirectory",
+      "outputs": [
+        {
+          "internalType": "contract Directory",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getImplementation",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "getIsDepositAllowed",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "getIsWithdrawAllowed",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getMaximumDeposit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getMaximumWithdrawAmount",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getMissingLiquidity",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "deposit",
+          "type": "uint256"
+        }
+      ],
+      "name": "getMissingLiquidityAfterDeposit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "getTreasuryPortion",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "addedValue",
+          "type": "uint256"
+        }
+      ],
+      "name": "increaseAllowance",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "directoryAddress",
+          "type": "address"
+        }
+      ],
+      "name": "initialize",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "directoryAddress",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "rplToken",
+          "type": "address"
+        }
+      ],
+      "name": "initializeVault",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "liquidityReservePercent",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "name": "maxDeposit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "name": "maxMint",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        }
+      ],
+      "name": "maxRedeem",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        }
+      ],
+      "name": "maxWithdraw",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "minWethRplRatio",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        },
+        {
+          "internalType": "address",
+          "name": "receiver",
+          "type": "address"
+        }
+      ],
+      "name": "mint",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "name",
+      "outputs": [
+        {
+          "internalType": "string",
+          "name": "",
+          "type": "string"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        }
+      ],
+      "name": "previewDeposit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        }
+      ],
+      "name": "previewMint",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        }
+      ],
+      "name": "previewRedeem",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        }
+      ],
+      "name": "previewWithdraw",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "proxiableUUID",
+      "outputs": [
+        {
+          "internalType": "bytes32",
+          "name": "",
+          "type": "bytes32"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "shares",
+          "type": "uint256"
+        },
+        {
+          "internalType": "address",
+          "name": "receiver",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        }
+      ],
+      "name": "redeem",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "bool",
+          "name": "_newValue",
+          "type": "bool"
+        }
+      ],
+      "name": "setDepositsEnabled",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "bool",
+          "name": "_newValue",
+          "type": "bool"
+        }
+      ],
+      "name": "setDifferingSenderRecipientEnabled",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_liquidityReservePercent",
+          "type": "uint256"
+        }
+      ],
+      "name": "setLiquidityReservePercent",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_minWethRplRatio",
+          "type": "uint256"
+        }
+      ],
+      "name": "setMinWethRplRatio",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_treasuryFee",
+          "type": "uint256"
+        }
+      ],
+      "name": "setTreasuryFee",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "symbol",
+      "outputs": [
+        {
+          "internalType": "string",
+          "name": "",
+          "type": "string"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "totalAssets",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "totalSupply",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "to",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "transfer",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "from",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "to",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "transferFrom",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "treasuryFee",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "newImplementation",
+          "type": "address"
+        }
+      ],
+      "name": "upgradeTo",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "newImplementation",
+          "type": "address"
+        },
+        {
+          "internalType": "bytes",
+          "name": "data",
+          "type": "bytes"
+        }
+      ],
+      "name": "upgradeToAndCall",
+      "outputs": [],
+      "stateMutability": "payable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "assets",
+          "type": "uint256"
+        },
+        {
+          "internalType": "address",
+          "name": "receiver",
+          "type": "address"
+        },
+        {
+          "internalType": "address",
+          "name": "owner",
+          "type": "address"
+        }
+      ],
+      "name": "withdraw",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    }
+  ]
+}
diff --git a/web/src/generated/contracts/RocketVault.json b/web/src/generated/contracts/RocketVault.json
new file mode 100644
index 0000000..9a8128b
--- /dev/null
+++ b/web/src/generated/contracts/RocketVault.json
@@ -0,0 +1,359 @@
+{
+  "contractName": "RocketVault",
+  "abi": [
+    {
+      "inputs": [
+        {
+          "internalType": "contract RocketStorageInterface",
+          "name": "_rocketStorageAddress",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "string",
+          "name": "by",
+          "type": "string"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "EtherDeposited",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "string",
+          "name": "by",
+          "type": "string"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "EtherWithdrawn",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "bytes32",
+          "name": "by",
+          "type": "bytes32"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "tokenAddress",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "TokenBurned",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "bytes32",
+          "name": "by",
+          "type": "bytes32"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "tokenAddress",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "TokenDeposited",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "bytes32",
+          "name": "by",
+          "type": "bytes32"
+        },
+        {
+          "indexed": true,
+          "internalType": "bytes32",
+          "name": "to",
+          "type": "bytes32"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "tokenAddress",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "TokenTransfer",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "internalType": "bytes32",
+          "name": "by",
+          "type": "bytes32"
+        },
+        {
+          "indexed": true,
+          "internalType": "address",
+          "name": "tokenAddress",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "time",
+          "type": "uint256"
+        }
+      ],
+      "name": "TokenWithdrawn",
+      "type": "event"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "string",
+          "name": "_networkContractName",
+          "type": "string"
+        }
+      ],
+      "name": "balanceOf",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "string",
+          "name": "_networkContractName",
+          "type": "string"
+        },
+        {
+          "internalType": "contract IERC20",
+          "name": "_tokenAddress",
+          "type": "address"
+        }
+      ],
+      "name": "balanceOfToken",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "contract ERC20Burnable",
+          "name": "_tokenAddress",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "burnToken",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "depositEther",
+      "outputs": [],
+      "stateMutability": "payable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "string",
+          "name": "_networkContractName",
+          "type": "string"
+        },
+        {
+          "internalType": "contract IERC20",
+          "name": "_tokenContract",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "depositToken",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "string",
+          "name": "_networkContractName",
+          "type": "string"
+        },
+        {
+          "internalType": "contract IERC20",
+          "name": "_tokenAddress",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "transferToken",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "version",
+      "outputs": [
+        {
+          "internalType": "uint8",
+          "name": "",
+          "type": "uint8"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "withdrawEther",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "_withdrawalAddress",
+          "type": "address"
+        },
+        {
+          "internalType": "contract IERC20",
+          "name": "_tokenAddress",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "_amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "withdrawToken",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    }
+  ]
+}
diff --git a/web/src/pages/NodeSetPage.js b/web/src/pages/NodeSetPage.js
index 599cb59..3ee9a0d 100644
--- a/web/src/pages/NodeSetPage.js
+++ b/web/src/pages/NodeSetPage.js
@@ -8,7 +8,7 @@ import {
   CardContent,
   CardHeader,
   Chip,
-  FormHelperText,
+  Divider,
   Grid,
   Stack,
   Typography,
@@ -27,6 +27,8 @@ import { useState } from "react";
 import contracts from "../contracts";
 import useBlock from "../hooks/useBlock";
 import { Link } from "react-router-dom";
+import useRplEthPrice from "../hooks/useRplEthPrice";
+import useNodeDetails from "../hooks/useNodeDetails";
 
 export default function NodeSetPage() {
   return (
@@ -37,17 +39,192 @@ export default function NodeSetPage() {
         {/*  <RocketDepositCard/>*/}
         {/*</Grid>*/}
         <Grid key={"minipools"} item xs={12} lg={4}>
-          <NodeSetMiniPoolsCard />
+          <NodeSetMiniPoolsColumn />
         </Grid>
-        <Grid key={"nodeset-deposit-pool"} item xs={12} lg={4}>
-          <NodeDepositCard />
+        <Grid key={"nodeset-eth-deposit-pool"} item xs={12} lg={4}>
+          <NodeEthDepositColumn />
+        </Grid>
+        <Grid key={"nodeset-rpl-deposit-pool"} item xs={12} lg={4}>
+          <NodeRplDepositColumn />
         </Grid>
       </Grid>
     </Layout>
   );
 }
 
-function NodeDepositCard() {
+function NodeRplDepositColumn() {
+  let [isShowingAll, setShowingAll] = useState(false);
+  let { data: depositsInOrder } = useK.RPLVault.Find.Deposit({
+    args: [null, null],
+    from: 0,
+    to: "latest",
+  });
+  let { data: withdrawalsInOrder } = useK.RPLVault.Find.Withdraw({
+    args: [null, null],
+    from: 0,
+    to: "latest",
+  });
+  let { data: withdrawableRPL } = useK.RPL.Read.balanceOf({
+    args: [contracts.RPLVault.address],
+  });
+  let { data: stakableRPL } = useK.RPL.Read.balanceOf({
+    args: [contracts.OperatorDistributor.address],
+  });
+  let deposits = _.reverse(_.clone(depositsInOrder || []));
+  let withdrawals = _.reverse(_.clone(withdrawalsInOrder || []));
+  let totalDepositedRpl = deposits.reduce(
+    (sum, { args: [, , assets] }) => sum.add(assets),
+    ethers.BigNumber.from(0)
+  );
+  let totalWithdrawnRpl = withdrawals.reduce(
+    (sum, { args: [, , , assets] }) => sum.add(assets),
+    ethers.BigNumber.from(0)
+  );
+  return (
+    <Stack spacing={1}>
+      <Card key={"summary"}>
+        <CardActionArea
+          href={`https://app.gravitaprotocol.com/constellation/xreth`}
+          target="_blank"
+        >
+          <CardHeader
+            avatar={<NodeSetIcon fontSize="medium" color="disabled" />}
+            subheader="NodeSet xRPL Deposits"
+          />
+          <CardContent>
+            <Stack spacing={2}>
+              <Stack direction={"row"} alignItems={"baseline"} spacing={1}>
+                <Chip component="span" size="small" label={deposits.length} />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  deposits from
+                </Typography>
+                <Chip
+                  component="span"
+                  size="small"
+                  label={
+                    _.uniq(
+                      deposits.map(({ args: [senderAddress] }) => senderAddress)
+                    ).length
+                  }
+                />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  depositors.
+                </Typography>
+              </Stack>
+              <Grid container>
+                <Grid item xs={6}>
+                  <Stack spacing={1}>
+                    <Typography variant={"overline"} color={"text.secondary"}>
+                      Deposits
+                    </Typography>
+                    <Stack
+                      direction={"row"}
+                      spacing={1}
+                      alignItems={"baseline"}
+                    >
+                      <CurrencyValue
+                        value={totalDepositedRpl}
+                        placeholder="0"
+                        size="small"
+                        currency="rpl"
+                        maxDecimals={0}
+                      />
+                    </Stack>
+                    <Stack
+                      direction={"row"}
+                      spacing={1}
+                      alignItems={"baseline"}
+                    >
+                      <CurrencyValue
+                        value={totalWithdrawnRpl?.mul(-1)}
+                        placeholder="0"
+                        size="xsmall"
+                        currency="rpl"
+                        maxDecimals={1}
+                      />
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        withdrawn
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid item xs={6}>
+                  <Stack spacing={1}>
+                    <Typography variant={"overline"} color={"text.secondary"}>
+                      Available
+                    </Typography>
+                    <Stack
+                      direction={"row"}
+                      spacing={1}
+                      alignItems={"baseline"}
+                    >
+                      <CurrencyValue
+                        value={stakableRPL}
+                        placeholder="0"
+                        size="small"
+                        currency="rpl"
+                        maxDecimals={1}
+                      />
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        for staking
+                      </Typography>
+                    </Stack>
+                    <Stack
+                      direction={"row"}
+                      spacing={1}
+                      alignItems={"baseline"}
+                    >
+                      <CurrencyValue
+                        value={withdrawableRPL}
+                        placeholder="0"
+                        size="xsmall"
+                        currency="rpl"
+                        maxDecimals={1}
+                      />
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        for withdraw
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </Stack>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+      <Stack spacing={1}>
+        {deposits
+          .slice(0, isShowingAll ? deposits.length : 3)
+          .map(({ transactionHash, args: [senderAddress, , amountRpl] }) => (
+            <RplDepositCard
+              key={transactionHash}
+              {...{ transactionHash, senderAddress, amountRpl }}
+            />
+          ))}
+        {deposits.length > 0 && (
+          <Button
+            sx={{ mt: 1 }}
+            fullWidth
+            color={"inherit"}
+            onClick={() => setShowingAll(!isShowingAll)}
+            endIcon={isShowingAll ? <ExpandLess /> : <ExpandMore />}
+          >
+            See All
+            <Chip
+              sx={{ ml: 1, mr: 1 }}
+              component="span"
+              size="small"
+              label={deposits.length}
+            />
+            deposits
+          </Button>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
+
+function NodeEthDepositColumn() {
   let [isShowingAll, setShowingAll] = useState(false);
   let { data: depositsInOrder } = useK.WETHVault.Find.Deposit({
     args: [null, null],
@@ -65,6 +242,7 @@ function NodeDepositCard() {
   let { data: opBalance } = useBalance({
     address: contracts.OperatorDistributor.address,
   });
+  let minipoolCreatableEth = opBalance?.value;
   let deposits = _.reverse(_.clone(depositsInOrder || []));
   let withdrawals = _.reverse(_.clone(withdrawalsInOrder || []));
   let totalDepositedEth = deposits.reduce(
@@ -75,7 +253,6 @@ function NodeDepositCard() {
     (sum, { args: [, , , assets] }) => sum.add(assets),
     ethers.BigNumber.from(0)
   );
-  let minipoolCreatableEth = opBalance?.value;
   return (
     <Stack spacing={1}>
       <Card key={"summary"}>
@@ -89,9 +266,11 @@ function NodeDepositCard() {
           />
           <CardContent>
             <Stack spacing={2}>
-              <FormHelperText>
-                <Chip component="span" size="small" label={deposits.length} />{" "}
-                deposits from{" "}
+              <Stack direction={"row"} alignItems={"baseline"} spacing={1}>
+                <Chip component="span" size="small" label={deposits.length} />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  deposits from
+                </Typography>
                 <Chip
                   component="span"
                   size="small"
@@ -100,9 +279,11 @@ function NodeDepositCard() {
                       deposits.map(({ args: [senderAddress] }) => senderAddress)
                     ).length
                   }
-                />{" "}
-                depositors.
-              </FormHelperText>
+                />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  depositors.
+                </Typography>
+              </Stack>
               <Grid container>
                 <Grid item xs={6}>
                   <Stack spacing={1}>
@@ -117,7 +298,7 @@ function NodeDepositCard() {
                       <CurrencyValue
                         value={totalDepositedEth}
                         placeholder="0"
-                        size="large"
+                        size="small"
                         currency="eth"
                         maxDecimals={0}
                       />
@@ -128,7 +309,7 @@ function NodeDepositCard() {
                       alignItems={"baseline"}
                     >
                       <CurrencyValue
-                        value={totalWithdrawnEth.mul(-1)}
+                        value={totalWithdrawnEth?.mul(-1)}
                         placeholder="0"
                         size="xsmall"
                         currency="eth"
@@ -153,7 +334,7 @@ function NodeDepositCard() {
                       <CurrencyValue
                         value={minipoolCreatableEth}
                         placeholder="0"
-                        size="medium"
+                        size="small"
                         currency="eth"
                         maxDecimals={1}
                       />
@@ -169,7 +350,7 @@ function NodeDepositCard() {
                       <CurrencyValue
                         value={withdrawableETH}
                         placeholder="0"
-                        size="medium"
+                        size="xsmall"
                         currency="eth"
                         maxDecimals={1}
                       />
@@ -186,45 +367,14 @@ function NodeDepositCard() {
       </Card>
       <Stack spacing={1}>
         {deposits
-          .slice(0, isShowingAll ? deposits.length : 5)
+          .slice(0, isShowingAll ? deposits.length : 3)
           .map(({ transactionHash, args: [senderAddress, , amountEth] }) => (
-            <Card key={transactionHash}>
-              <CardActionArea
-                href={etherscanUrl({ tx: transactionHash })}
-                target="_blank"
-              >
-                <CardHeader
-                  sx={{ pt: 3 }}
-                  disableTypography
-                  title={<WalletChip walletAddress={senderAddress} />}
-                  subheader={
-                    <Typography
-                      component={"div"}
-                      sx={{ pt: 2, ml: 3 }}
-                      variant={"caption"}
-                      color={"text.secondary"}
-                    >
-                      deposited
-                    </Typography>
-                  }
-                  action={
-                    <Stack
-                      alignItems={"flex-end"}
-                      sx={{ mt: 1, mr: 1 }}
-                      spacing={1}
-                    >
-                      <CurrencyValue
-                        value={amountEth}
-                        maxDecimals={2}
-                        currency={"eth"}
-                        size={"medium"}
-                      />
-                      <TransactionTimeAgoCaption tx={transactionHash} />
-                    </Stack>
-                  }
-                />
-              </CardActionArea>
-            </Card>
+            <EthDepositCard
+              key={transactionHash}
+              transactionHash={transactionHash}
+              senderAddress={senderAddress}
+              amountEth={amountEth}
+            />
           ))}
         {deposits.length > 0 && (
           <Button
@@ -249,6 +399,82 @@ function NodeDepositCard() {
   );
 }
 
+function RplDepositCard({ transactionHash, senderAddress, amountRpl }) {
+  return (
+    <Card>
+      <CardActionArea
+        href={etherscanUrl({ tx: transactionHash })}
+        target="_blank"
+      >
+        <CardHeader
+          sx={{ pt: 3 }}
+          disableTypography
+          title={<WalletChip walletAddress={senderAddress} />}
+          subheader={
+            <Typography
+              component={"div"}
+              sx={{ pt: 2, ml: 3 }}
+              variant={"caption"}
+              color={"text.secondary"}
+            >
+              deposited
+            </Typography>
+          }
+          action={
+            <Stack alignItems={"flex-end"} sx={{ mt: 1, mr: 1 }} spacing={1}>
+              <CurrencyValue
+                value={amountRpl}
+                maxDecimals={2}
+                currency={"rpl"}
+                size={"medium"}
+              />
+              <TransactionTimeAgoCaption tx={transactionHash} />
+            </Stack>
+          }
+        />
+      </CardActionArea>
+    </Card>
+  );
+}
+
+function EthDepositCard({ transactionHash, senderAddress, amountEth }) {
+  return (
+    <Card>
+      <CardActionArea
+        href={etherscanUrl({ tx: transactionHash })}
+        target="_blank"
+      >
+        <CardHeader
+          sx={{ pt: 3 }}
+          disableTypography
+          title={<WalletChip walletAddress={senderAddress} />}
+          subheader={
+            <Typography
+              component={"div"}
+              sx={{ pt: 2, ml: 3 }}
+              variant={"caption"}
+              color={"text.secondary"}
+            >
+              deposited
+            </Typography>
+          }
+          action={
+            <Stack alignItems={"flex-end"} sx={{ mt: 1, mr: 1 }} spacing={1}>
+              <CurrencyValue
+                value={amountEth}
+                maxDecimals={2}
+                currency={"eth"}
+                size={"medium"}
+              />
+              <TransactionTimeAgoCaption tx={transactionHash} />
+            </Stack>
+          }
+        />
+      </CardActionArea>
+    </Card>
+  );
+}
+
 function NodeSetWalletChip({ walletAddress }) {
   return (
     <Box sx={{ position: "relative" }}>
@@ -262,6 +488,7 @@ function NodeSetWalletChip({ walletAddress }) {
           height: 20,
           bgcolor: "white",
           color: "black",
+          border: "1px solid rgba(0,0,0,0.1)",
         }}
       >
         <NodeSetIcon sx={{ width: 12, height: 12 }} />
@@ -270,8 +497,21 @@ function NodeSetWalletChip({ walletAddress }) {
   );
 }
 
-function NodeSetMiniPoolsCard() {
+function NodeSetMiniPoolsColumn() {
   let [isShowingAll, setShowingAll] = useState(false);
+  let rplEthPrice = useRplEthPrice();
+  const { data: superNodeDetails } = useNodeDetails({
+    nodeAddress: contracts.SuperNodeAccount.address,
+  });
+  let { data: minimumStakeRatio } =
+    useK.OperatorDistributor.Read.minimumStakeRatio();
+
+  let { rplStake } = superNodeDetails || {
+    rplStake: ethers.constants.Zero,
+  };
+  let rplStakedInEth = rplStake
+    ?.mul(rplEthPrice)
+    .div(ethers.utils.parseEther("1"));
   let { data: minipoolsInOrder } = useK.SuperNodeAccount.Find.MinipoolCreated({
     args: [null, null],
     from: 0,
@@ -279,6 +519,29 @@ function NodeSetMiniPoolsCard() {
   });
   let minipools = _.reverse(_.clone(minipoolsInOrder || []));
   let activeMinipools = minipools || [];
+  let maxMinipoolCountByRpl = rplStakedInEth
+    ?.mul(ethers.utils.parseEther("1"))
+    .div(minimumStakeRatio || ethers.utils.parseEther("1"))
+    .div(ethers.utils.parseEther("24"))
+    .toNumber();
+  let { data: xREthBalance } = useBalance({
+    address: contracts.OperatorDistributor.address,
+  });
+  let { data: rEthBalance } = useBalance({
+    address: contracts.RocketVault.address,
+  });
+  let moreMinipoolCountByXREth = xREthBalance?.value
+    .div(ethers.utils.parseEther("8"))
+    .toNumber();
+  let moreMinipoolCountByREth = rEthBalance?.value
+    .div(ethers.utils.parseEther("24"))
+    .toNumber();
+  let moreMinipoolCountByRpl = maxMinipoolCountByRpl - activeMinipools.length;
+  let moreMinipoolCount = Math.min(
+    moreMinipoolCountByXREth,
+    moreMinipoolCountByREth,
+    moreMinipoolCountByRpl
+  );
   return (
     <Stack spacing={1}>
       <Card key={"summary"}>
@@ -291,14 +554,16 @@ function NodeSetMiniPoolsCard() {
             subheader="NodeSet Minipools"
           />
           <CardContent>
-            <Stack spacing={2}>
-              <FormHelperText>
+            <Stack spacing={1}>
+              <Stack direction={"row"} alignItems={"baseline"} spacing={1}>
                 <Chip
                   component="span"
                   size="small"
                   label={activeMinipools.length}
-                />{" "}
-                minipools created across{" "}
+                />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  minipools created across
+                </Typography>
                 <Chip
                   component="span"
                   size="small"
@@ -309,77 +574,384 @@ function NodeSetMiniPoolsCard() {
                       )
                     ).length
                   }
-                />{" "}
-                operators.
-              </FormHelperText>
-              <Stack spacing={1}>
-                <CurrencyValue
-                  value={ethers.utils
-                    .parseEther("32")
-                    .mul(activeMinipools.length)}
-                  placeholder="0"
-                  size="large"
-                  currency="eth"
-                  maxDecimals={0}
                 />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  operators.
+                </Typography>
+              </Stack>
+              <Stack
+                sx={{
+                  mt: 0.5,
+                  borderRadius: "20px",
+                  ...(moreMinipoolCount < 1
+                    ? {}
+                    : {
+                        background: "rgba(128,255,128,0.1)",
+                      }),
+                }}
+                direction={"row"}
+                alignItems={"baseline"}
+                spacing={1}
+              >
+                <Chip component="span" size="small" label={moreMinipoolCount} />
+                <Typography variant={"caption"} color={"text.secondary"}>
+                  more can be created from available deposits.
+                </Typography>
+              </Stack>
+              <Grid container sx={{ pt: 1 }}>
+                <Grid item xs={6}>
+                  <Stack spacing={1}>
+                    <Stack
+                      direction="row"
+                      spacing={1}
+                      justifyContent="left"
+                      alignItems={"baseline"}
+                    >
+                      <CurrencyValue
+                        value={ethers.utils
+                          .parseEther("32")
+                          .mul(activeMinipools.length)}
+                        placeholder="0"
+                        size="small"
+                        currency="eth"
+                        maxDecimals={0}
+                      />
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        staked
+                      </Typography>
+                    </Stack>
+                    <Stack spacing={0} sx={{ pl: 2 }}>
+                      <Stack
+                        direction="row"
+                        spacing={1}
+                        justifyContent="left"
+                        alignItems={"baseline"}
+                      >
+                        <CurrencyValue
+                          value={ethers.utils
+                            .parseEther("8")
+                            .mul(activeMinipools.length)}
+                          placeholder="0"
+                          size="xsmall"
+                          currency="eth"
+                          maxDecimals={0}
+                        />
+                        <Typography
+                          variant={"caption"}
+                          color={"text.secondary"}
+                        >
+                          from
+                        </Typography>
+                        <NodeSetAvatar />
+                      </Stack>
+                      <Stack
+                        direction="row"
+                        spacing={1}
+                        justifyContent="left"
+                        alignItems={"baseline"}
+                      >
+                        <CurrencyValue
+                          value={ethers.utils
+                            .parseEther("24")
+                            .mul(activeMinipools.length)}
+                          placeholder="0"
+                          size="xsmall"
+                          currency="eth"
+                          maxDecimals={0}
+                        />
+                        <Typography
+                          variant={"caption"}
+                          color={"text.secondary"}
+                        >
+                          from
+                        </Typography>
+                        <Typography variant={"caption"} color={"rpl.dark"}>
+                          rETH
+                        </Typography>
+                      </Stack>
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid item xs={6}>
+                  <Stack spacing={1}>
+                    <Stack
+                      direction={"row"}
+                      spacing={1}
+                      alignItems={"baseline"}
+                    >
+                      <CurrencyValue
+                        value={rplStake}
+                        placeholder="0"
+                        size="small"
+                        currency="rpl"
+                        maxDecimals={0}
+                      />
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        staked
+                      </Typography>
+                    </Stack>
+                    <Stack spacing={0} sx={{ pl: 2 }}>
+                      <Stack
+                        direction="row"
+                        spacing={0.5}
+                        alignItems="baseline"
+                      >
+                        <Typography variant="caption" color="text.secondary">
+                          @
+                        </Typography>
+                        <CurrencyValue
+                          value={rplEthPrice}
+                          trimZeroWhole
+                          maxDecimals={4}
+                          currency={"eth"}
+                          perCurrency={"rpl"}
+                          size="xsmall"
+                        />
+                      </Stack>
+                      <Stack
+                        direction="row"
+                        spacing={0.5}
+                        alignItems="baseline"
+                      >
+                        <CurrencyValue
+                          prefix={"≈ "}
+                          value={rplStakedInEth}
+                          trimZeroWhole
+                          maxDecimals={0}
+                          currency={"eth"}
+                          size={"xsmall"}
+                        />
+                        <Typography
+                          variant={"caption"}
+                          color={"text.secondary"}
+                        >
+                          of
+                        </Typography>
+                        <Typography variant={"caption"} color={"rpl.main"}>
+                          RPL
+                        </Typography>
+                      </Stack>
+                    </Stack>
+                  </Stack>
+                </Grid>
+              </Grid>
+              <Stack sx={{ pt: 1 }} spacing={0}>
                 <Stack
                   direction="row"
+                  alignItems={"center"}
                   spacing={1}
-                  justifyContent="left"
-                  alignItems={"baseline"}
+                  sx={{ pb: 1 }}
                 >
-                  <CurrencyValue
-                    value={ethers.utils
-                      .parseEther("24")
-                      .mul(activeMinipools.length)}
-                    placeholder="0"
-                    size="small"
-                    currency="eth"
-                    maxDecimals={0}
-                  />
-                  <Typography variant={"caption"} color={"text.secondary"}>
-                    from
-                  </Typography>
-                  <Typography variant={"caption"} color={"rpl"}>
-                    rETH
-                  </Typography>
-                  <Typography variant={"caption"} color={"text.secondary"}>
-                    deposits
+                  <Typography variant="caption" color={"text.secondary"}>
+                    Limiting Factors
                   </Typography>
+                  <Box sx={{ flex: 1 }}>
+                    <Divider sx={{ m: 0, p: 0 }} flexItem />
+                  </Box>
                 </Stack>
-                <Stack
-                  direction="row"
-                  spacing={1}
-                  justifyContent="left"
+                <Grid
+                  container
+                  columnSpacing={1}
+                  sx={{
+                    mt: 0.5,
+                    borderRadius: "20px",
+                    ...(moreMinipoolCountByXREth > 0
+                      ? {}
+                      : {
+                          background: "rgba(128,128,128,0.1)",
+                        }),
+                  }}
                   alignItems={"baseline"}
                 >
-                  <CurrencyValue
-                    value={ethers.utils
-                      .parseEther("8")
-                      .mul(activeMinipools.length)}
-                    placeholder="0"
-                    size="small"
-                    currency="eth"
-                    maxDecimals={0}
-                  />
-                  <Typography variant={"caption"} color={"text.secondary"}>
-                    from
-                  </Typography>
-                  <Avatar
-                    sx={{
-                      width: 18,
-                      height: 18,
-                      fontSize: 12,
-                      bgcolor: "white",
-                      color: "black",
-                    }}
-                  >
-                    <NodeSetIcon fontSize={"inherit"} />
-                  </Avatar>
-                  <Typography variant={"caption"} color={"text.secondary"}>
-                    deposits
-                  </Typography>
-                </Stack>
+                  <Grid item xs={4}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-end"
+                    >
+                      <Typography variant="caption" color="eth.main">
+                        ETH
+                      </Typography>
+                      <Typography variant="caption" color="textSecondary">
+                        from
+                      </Typography>
+                      <NodeSetAvatar />
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={2}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-end"
+                    >
+                      <Chip
+                        sx={{ width: "100%" }}
+                        component="span"
+                        size="small"
+                        label={moreMinipoolCountByXREth}
+                      />
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-start"
+                    >
+                      <Typography variant="caption" color="textSecondary">
+                        more @
+                      </Typography>
+                      <CurrencyValue
+                        value={ethers.utils.parseEther("8")}
+                        trimZeroWhole
+                        maxDecimals={0}
+                        currency={"eth"}
+                        perCurrency={"minipool"}
+                        size="xsmall"
+                      />
+                    </Stack>
+                  </Grid>
+                </Grid>
+                <Grid
+                  container
+                  columnSpacing={1}
+                  sx={{
+                    mt: 0.5,
+                    borderRadius: "20px",
+                    ...(moreMinipoolCountByREth > 0
+                      ? {}
+                      : {
+                          background: "rgba(128,128,128,0.1)",
+                        }),
+                  }}
+                  alignItems={"baseline"}
+                >
+                  <Grid item xs={4}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-end"
+                    >
+                      <Typography variant="caption" color="eth.main">
+                        ETH
+                      </Typography>
+                      <Typography variant="caption" color="textSecondary">
+                        from
+                      </Typography>
+                      <Typography variant={"caption"} color={"rpl.dark"}>
+                        rETH
+                      </Typography>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={2}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-end"
+                    >
+                      <Chip
+                        sx={{ width: "100%" }}
+                        component="span"
+                        size="small"
+                        label={moreMinipoolCountByREth}
+                      />
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-start"
+                    >
+                      <Typography variant="caption" color="textSecondary">
+                        more @
+                      </Typography>
+                      <CurrencyValue
+                        value={ethers.utils.parseEther("24")}
+                        trimZeroWhole
+                        maxDecimals={0}
+                        currency={"eth"}
+                        perCurrency={"minipool"}
+                        size="xsmall"
+                      />
+                    </Stack>
+                  </Grid>
+                </Grid>
+                <Grid
+                  container
+                  columnSpacing={1}
+                  sx={{
+                    mt: 0.5,
+                    borderRadius: "20px",
+                    ...(moreMinipoolCountByRpl > 0
+                      ? {}
+                      : {
+                          background: "rgba(128,128,128,0.1)",
+                        }),
+                  }}
+                  alignItems={"baseline"}
+                >
+                  <Grid item xs={4}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-end"
+                    >
+                      <Typography variant="caption" color="rpl.main">
+                        RPL
+                      </Typography>
+                      <Typography variant="caption" color="textSecondary">
+                        from
+                      </Typography>
+                      <NodeSetAvatar />
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={2}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-end"
+                    >
+                      <Chip
+                        sx={{ width: "100%" }}
+                        component="span"
+                        size="small"
+                        label={moreMinipoolCountByRpl}
+                      />
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      alignItems="baseline"
+                      justifyContent="flex-start"
+                    >
+                      <Typography variant="caption" color="textSecondary">
+                        more @
+                      </Typography>
+                      <CurrencyValue
+                        value={minimumStakeRatio?.mul(100)}
+                        trimZeroWhole
+                        maxDecimals={0}
+                        currency={"ratio"}
+                        hideCurrency
+                        size="xsmall"
+                      />
+                      <Typography variant={"caption"} color={"text.secondary"}>
+                        % borrow limit
+                      </Typography>
+                    </Stack>
+                  </Grid>
+                </Grid>
               </Stack>
             </Stack>
           </CardContent>
@@ -387,7 +959,7 @@ function NodeSetMiniPoolsCard() {
       </Card>
       <Stack spacing={1}>
         {(minipools || [])
-          .slice(0, isShowingAll ? (minipools || []).length : 5)
+          .slice(0, isShowingAll ? (minipools || []).length : 3)
           .map(
             ({ transactionHash, args: [minipoolAddress, operatorAddress] }) => (
               <Card key={minipoolAddress}>
@@ -460,6 +1032,23 @@ function NodeSetMiniPoolsCard() {
   );
 }
 
+function NodeSetAvatar() {
+  return (
+    <Avatar
+      sx={{
+        width: 13,
+        height: 13,
+        fontSize: 9,
+        bgcolor: "white",
+        color: "black",
+        border: "0.5px solid rgba(0,0,0,0.1)",
+      }}
+    >
+      <NodeSetIcon fontSize={"inherit"} />
+    </Avatar>
+  );
+}
+
 function TransactionTimeAgoCaption({ tx }) {
   let { data: txn } = useTransaction({ hash: tx });
   let { data: block } = useBlock({ blockNumber: txn?.blockNumber });