LumeraProtocol · ngvtuan · Oct 14, 2025 · Sep 17, 2025 · Oct 8, 2025 · Oct 13, 2025
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -9,20 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@interchain-kit/core": "^0.3.43",
-    "@interchain-kit/cosmostation-extension": "^0.3.43",
-    "@interchain-kit/keplr-extension": "^0.3.44",
-    "@interchain-kit/leap-extension": "^0.3.44",
-    "@interchain-kit/react": "^0.3.43",
-    "@interchain-ui/react": "^1.26.3",
+    "@cosmjs/proto-signing": "^0.36.1",
+    "@cosmjs/stargate": "^0.36.1",
     "@lumera-hub/ui": "workspace:^",
     "@react-jvectormap/core": "^1.0.4",
+    "@reduxjs/toolkit": "^2.9.0",
     "@tamagui/config": "^1.132.16",
     "@tamagui/core": "^1.132.16",
     "@tamagui/dialog": "^1.132.20",
     "@tamagui/lucide-icons": "^1.132.20",
     "axios": "^1.12.0",
     "chain-registry": "^2.0.42",
+    "cosmjs-types": "^0.10.1",
     "dayjs": "^1.11.18",
     "next": "15.4.6",
     "react": "19.1.0",
@@ -31,6 +29,9 @@
     "react-native": "0.79.5",
     "react-native-svg": "^15.12.1",
     "react-native-web": "^0.21.0",
+    "react-redux": "^9.2.0",
+    "redux": "^5.0.1",
+    "redux-persist": "^6.0.0",
     "tamagui": "^1.132.16"
   },
   "devDependencies": {

diff --git a/apps/web/public/keplr.svg b/apps/web/public/keplr.svg
diff --git a/apps/web/public/leap.svg b/apps/web/public/leap.svg
diff --git a/apps/web/src/app/governance/page.tsx b/apps/web/src/app/governance/page.tsx
@@ -3,15 +3,64 @@
 import { Helmet } from "react-helmet-async";
 
 import { GovernanceScreen } from '@lumera-hub/ui/src/screens/GovernanceScreen'
+import useGovernances from '@/hooks/useGovernances';
+import useProposals from '@/hooks/useProposals';
+import useWalletConnect from '@/hooks/useWalletConnect';
+import useDeposit from '@/hooks/useDeposit';
 
 export default function Page() {
+  const {
+    isLoading,
+    governances,
+    msg,
+    sumary,
+    currentTab,
+    handleTabChange,
+    fetchGovernances,
+  } = useGovernances();
+  const proposals = useProposals();
+  const { address } = useWalletConnect();
+  const deposit = useDeposit({ callback: fetchGovernances });
+
   return (
     <>
       <Helmet>
         <title>Governance</title>
       </Helmet>
       <div className="governance-content">
-        <GovernanceScreen />
+        <GovernanceScreen 
+          address={address} 
+          isLoading={isLoading}
+          governances={governances}
+          msg={msg}
+          sumary={sumary}
+          currentTab={currentTab}
+          onTabChange={handleTabChange}
+          onOptionChange={proposals.handleOptionChange}
+          onVoteClick={proposals.handleVote}
+          isVoteLoading={proposals.isVoteLoading}
+          error={proposals.errorVote}
+          voteAdvanced={proposals.voteAdvanced}
+          handleVoteAdvancedChange={proposals.handleVoteAdvancedChange}
+          handleResetError={proposals.handleResetError}
+          isVoteOpen={proposals.isVoteOpen}
+          setVoteOpen={proposals.setVoteOpen}
+          deposit={{
+            isOpen: deposit.isModalOpen, 
+            sernder: address, 
+            isVoteLoading: deposit.isLoading, 
+            error: deposit.error,
+            voteAdvanced: deposit.depositAdvanced,
+            showAdvanced: deposit.showAdvanced,
+            availableAmount: deposit.availableAmount,
+            setProposalId: deposit.setProposalId, 
+            setOpen: deposit.setModalOpen, 
+            onVoteClick: deposit.handleSendClick, 
+            setModalOpen: deposit.setModalOpen, 
+            handleVoteAdvancedChange: deposit.handleDepositChange, 
+            handleAdvancedCheckedChange: deposit.handleShowAdvancedChange,
+          }}
+        />
       </div>
     </>
   )

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,17 +1,16 @@
 // apps/web/src/app/page.tsx
 'use client'
-import { useChain } from '@interchain-kit/react'
 import { Helmet } from "react-helmet-async";
 
-import { CHAIN_NAME } from '@/contants/network';
 import useAccountInfo from '@/hooks/useAccountInfo';
 import useProposals from '@/hooks/useProposals';
 import useRecentActivity from '@/hooks/useRecentActivity';
 import { HomeScreen } from '@lumera-hub/ui/src/screens/HomeScreen'
+import useWalletConnect from '@/hooks/useWalletConnect';
 
 export default function Page() {
-  const { address, connect } = useChain(CHAIN_NAME);
-  const { accountInfo, loading } = useAccountInfo();
+  const { address } = useWalletConnect();
+  const { accountInfo, loading, handleClaimButtonClick, isClaimLoading, claimInfo, errorClaim, handleClaimChange, handleToggleClaimModal, isClaimModalOpen } = useAccountInfo();
   const proposals = useProposals();
   const recentActivityData = useRecentActivity();
 
@@ -23,7 +22,6 @@ export default function Page() {
       <div className="home-content">
         <HomeScreen 
           address={address} 
-          connect={connect} 
           loading={loading}
           accountInfo={accountInfo}
           proposals={proposals.proposalsInfo}
@@ -36,6 +34,14 @@ export default function Page() {
           error={proposals.errorVote}
           voteAdvanced={proposals.voteAdvanced}
           handleVoteAdvancedChange={proposals.handleVoteAdvancedChange}
+          onClaimButtonClick={handleClaimButtonClick}
+          handleResetError={proposals.handleResetError}
+          isClaimLoading={isClaimLoading}
+          claimInfo={claimInfo}
+          errorClaim={errorClaim}
+          handleClaimChange={handleClaimChange}
+          handleToggleClaimModal={handleToggleClaimModal}
+          isClaimModalOpen={isClaimModalOpen}
         />
       </div>
     </>

diff --git a/apps/web/src/app/providers/wallet-provider.tsx b/apps/web/src/app/providers/wallet-provider.tsx
@@ -1,63 +1,20 @@
 'use client'
 
 import React from 'react'
-import { ChainProvider } from '@interchain-kit/react'
-import { BaseWallet, WCWallet } from '@interchain-kit/core'
-import { keplrWallet } from '@interchain-kit/keplr-extension'
-import { leapWallet } from '@interchain-kit/leap-extension'
-import { cosmostationWallet } from '@interchain-kit/cosmostation-extension'
-import { ThemeProvider, OverlaysManager } from '@interchain-ui/react'
 import { HelmetProvider } from 'react-helmet-async';
-import '@interchain-ui/react/styles'
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
 
-import { CHAIN_NAME } from '@/contants/network';
-
-// import { assetLists, chains } from 'chain-registry/mainnet'
-import { assetLists, chains } from 'chain-registry/testnet'
+import store, { persistor } from '@/store';
 
 export function WebWalletProviders({ children }: { children: React.ReactNode }) {
-  const lumeraChain = chains.find(({chainName}) =>chainName===CHAIN_NAME)
-  const lumeraAssets = assetLists.find(({chainName})=>chainName===CHAIN_NAME);
-
-  if (!lumeraChain || !lumeraAssets) {
-    throw new Error(`Chain or assets not found for ${CHAIN_NAME}`)
-  }
-
-  // Setup WalletConnect with custom metadata
-  const walletConnect = new WCWallet(undefined, {
-    projectId: 'fd049c1154d0886fda615b1c2e08ee28',
-    relayUrl: 'wss://relay.walletconnect.org',
-    metadata: {
-      name: 'Lumera Hub (testnet)',
-      description: 'Lumera Hub (testnet)',
-      // url: 'https://hub.testnet.lumera.io',
-      url:"http://localhost:3000",
-      icons: ['https://portal.testnet.lumera.io/assets/logo-5cb73fc7.png'],
-    },
-  })
-
-  // All wallets will be automatically available based on browser detection
-  const wallets = [
-    keplrWallet as BaseWallet,
-    leapWallet as BaseWallet,
-    cosmostationWallet as BaseWallet,
-    walletConnect as BaseWallet,
-  ]
-
   return (
-    <HelmetProvider>
-      <ThemeProvider>
-        <ChainProvider
-          wallets={wallets}
-          chains={[lumeraChain]}
-          assetLists={[lumeraAssets]}
-          signerOptions={{}}
-          endpointOptions={{}}
-        >
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <HelmetProvider>
           {children}
-          <OverlaysManager />
-        </ChainProvider>
-      </ThemeProvider>
-    </HelmetProvider>
+        </HelmetProvider>
+      </PersistGate>
+    </Provider>
   )
 }
diff --git a/apps/web/src/app/staking/page.tsx b/apps/web/src/app/staking/page.tsx
@@ -1,14 +1,13 @@
 // apps/web/src/app/staking/page.tsx
 'use client'
 
-import { useChain } from '@interchain-kit/react'
 import { Helmet } from "react-helmet-async";
 
-import { CHAIN_NAME } from '@/contants/network';
 import { StakingScreen } from '@lumera-hub/ui/src/screens/StakingScreen'
+import useWalletConnect from '@/hooks/useWalletConnect';
 
 export default function Page() {
-  const { address } = useChain(CHAIN_NAME)
+ const { address } = useWalletConnect();
 
   return (
     <>

diff --git a/apps/web/src/app/styles.css b/apps/web/src/app/styles.css
@@ -139,6 +139,10 @@
 .btn-primary .is_Button:hover .is_Button {
   background-color: #47C78A !important;
 }
+.btn-primary .is_Button:disabled,
+.btn-secondary .is_Button:disabled {
+  opacity: 0.8;
+}
 .sub-card {
   background-color: #151c29;
 }
@@ -373,13 +377,23 @@
 .mt-2 {
   margin-top: 8px;
 }
-.status-bar-left {
-  background-color: #55b5a6;
+.status-bar-yes,
+.status-bar-no,
+.status-bar-abstain,
+.status-bar-no-with-veto {
   height: 8px;
 }
-.status-bar-center {
+.status-bar-yes {
+  background-color: #55b5a6;
+}
+.status-bar-no {
   background-color: #dd524c;
-  height: 8px;
+}
+.status-bar-abstain {
+  background-color: #39694a;
+}
+.status-bar-no-with-veto {
+  background-color: #ecbc4a;
 }
 .btn-purple .is_Button {
   color: #d2b6f9;
@@ -441,6 +455,18 @@
 .btn-blue .is_Button:hover .is_Button {
   background-color: #001432 !important;
 }
+.btn-red .is_Button {
+  color: #fff;
+  background-color: #ef4444 !important;
+  border: 1px solid #fe6a6a;
+}
+.btn-red .is_Button path,
+.btn-red .is_Button circle {
+  stroke: #fff;
+}
+.btn-red .is_Button:hover {
+  background-color: #fe6a6a !important;
+}
 .w-2\/3 {
   width: 66.6667%;
 }
@@ -485,6 +511,7 @@
 }
 .tabs-secondary .tab-item.active .tab-button,
 .tabs-secondary .tab-item .tab-button:hover {
+  color: #fff;
   background-color: #4d4adc;
 }
 .cascade-top-left {
@@ -549,30 +576,55 @@
 .h-\[84vh\] {
   height: 84vh;
 }
-.vote-main-content {
+.vote-main-content,
+.withdraw-main-content {
   max-height: 92vh;
   overflow-y: auto;
   padding: 0 5px;
 }
-.vote-main-content::-webkit-scrollbar {
+.withdraw-main-content {
+  min-width: 90vw;
+}
+.vote-main-content::-webkit-scrollbar,
+.withdraw-main-content::-webkit-scrollbar {
   width: 12px;
 }
-.vote-main-content::-webkit-scrollbar-track {
+.vote-main-content::-webkit-scrollbar-track,
+.withdraw-main-content::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
 }
-.vote-main-content::-webkit-scrollbar-thumb {
+.vote-main-content::-webkit-scrollbar-thumb,
+.withdraw-main-content::-webkit-scrollbar-thumb {
   background-color: #888;
   border-radius: 10px;
   border: 3px solid #f1f1f1;
 }
-.vote-main-content::-webkit-scrollbar-thumb:hover {
+.vote-main-content::-webkit-scrollbar-thumb:hover,
+.withdraw-main-content::-webkit-scrollbar-thumb:hover {
   background-color: #555;
 }
+.btn-wallet-close {
+  position: absolute;
+  top: -12px;
+  right: -24px;
+}
+.min-h-12 {
+  min-height: 48px;
+}
+.loading-wrapper {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
+}
 @media screen and (min-width: 768px) {
   .md\:flex-row {
     flex-direction: row;
   }
+  .withdraw-main-content {
+    min-width: 450px;
+  }
 }
 @media screen and (max-width: 1300px) {
   .home-content .balance-rewards-overview {