Refactor Injective integration: Centralize constants and improve erro…

apps/web/package.json

@@ -22,6 +22,9 @@
     "@headlessui/react": "^1.7.16",
     "@heroicons/react": "v1",
     "@hookform/resolvers": "^3.1.1",
+    "@injective-labs/sdk-ts": "^1.10.45",
+    "@injective-labs/ts-types": "^1.10.45",
+    "@injective-labs/wallet-strategy": "^1.10.45",
     "@lens-protocol/sdk-gated": "^1.2.0",
     "@lenster/abis": "workspace:*",
     "@lenster/data": "workspace:*",

apps/web/src/components/Common/Providers/index.tsx

@@ -55,6 +55,8 @@ const queryClient = new QueryClient({
 });
 const apolloClient = webClient;
 
+import { InjectiveWalletProvider } from '@lib/InjectiveWalletProvider';
+
 const Providers = ({ children }: { children: ReactNode }) => {
   return (
     <LanguageProvider>
@@ -65,7 +67,9 @@ const Providers = ({ children }: { children: ReactNode }) => {
             <QueryClientProvider client={queryClient}>
               <LivepeerConfig client={livepeerClient} theme={getLivepeerTheme}>
                 <ThemeProvider defaultTheme="light" attribute="class">
-                  <Layout>{children}</Layout>
+                  <InjectiveWalletProvider>
+                    <Layout>{children}</Layout>
+                  </InjectiveWalletProvider>
                 </ThemeProvider>
               </LivepeerConfig>
             </QueryClientProvider>

apps/web/src/components/Profile/FeedType.tsx

@@ -80,6 +80,13 @@ const FeedType: FC<FeedTypeProps> = ({ setFeedType, feedType }) => {
             onClick={() => switchTab(ProfileFeedType.Stats)}
           />
         )}
+        <TabButton
+          name="Injective"
+          icon={<CollectionIcon className="h-4 w-4" />}
+          active={feedType === ProfileFeedType.Injective}
+          type={ProfileFeedType.Injective.toLowerCase()}
+          onClick={() => switchTab(ProfileFeedType.Injective)}
+        />
       </div>
       <div>{feedType === ProfileFeedType.Media && <MediaFilter />}</div>
     </div>

apps/web/src/components/Profile/InjectivePortfolio.tsx

@@ -0,0 +1,109 @@
+import { useInjectiveWallet } from '@lib/InjectiveWalletProvider';
+import { Card, EmptyState, Spinner, ErrorMessage } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import { useEffect, useState } from 'react';
+import { IndexerGrpcAccountApi } from '@injective-labs/sdk-ts';
+import { INJECTIVE_ENDPOINTS } from '@lenster/data/constants';
+
+// Helper to get bank balances
+const fetchBalances = async (address: string) => {
+  const indexerAccountApi = new IndexerGrpcAccountApi(INJECTIVE_ENDPOINTS.indexerApi);
+  const accountPortfolio = await indexerAccountApi.fetchAccountPortfolio(address);
+
+  return accountPortfolio;
+};
+
+interface Coin {
+  denom: string;
+  amount: string;
+}
+
+interface Portfolio {
+  bankBalancesList: Coin[];
+  subaccountsList: string[];
+}
+
+const InjectivePortfolio = () => {
+  const { address } = useInjectiveWallet();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [portfolio, setPortfolio] = useState<Portfolio | null>(null);
+
+  useEffect(() => {
+    if (!address) return;
+
+    const loadBalances = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await fetchBalances(address);
+        setPortfolio(data);
+      } catch (err: any) {
+        setError(new Error(err?.message || 'Failed to fetch balances'));
+        console.error('Failed to fetch Injective balances', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadBalances();
+  }, [address]);
+
+  if (!address) {
+    return (
+      <EmptyState
+        message={t`Connect Injective wallet to view assets`}
+        icon={<div className="text-xl">🏦</div>}
+        hideCard
+      />
+    );
+  }
+
+  if (loading) {
+    return (
+      <Card className="p-5">
+        <div className="flex justify-center">
+          <Spinner size="md" />
+        </div>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorMessage
+        title={t`Failed to load Injective portfolio`}
+        error={error}
+      />
+    );
+  }
+
+  const bankBalances = portfolio?.bankBalancesList || [];
+  const subaccountBalances = portfolio?.subaccountsList || [];
+
+  return (
+    <div className="space-y-5">
+      <Card className="p-5">
+        <div className="text-lg font-bold mb-4">
+          <Trans>Injective Assets</Trans>
+        </div>
+        {bankBalances.length === 0 && subaccountBalances.length === 0 ? (
+          <div className="text-gray-500">
+            <Trans>No assets found.</Trans>
+          </div>
+        ) : (
+          <div className="space-y-4">
+             {bankBalances.map((balance: Coin, i: number) => (
+               <div key={i} className="flex justify-between border-b pb-2 last:border-b-0">
+                 <span className="font-mono">{balance.denom}</span>
+                 <span className="font-semibold">{balance.amount}</span>
+               </div>
+             ))}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default InjectivePortfolio;

apps/web/src/components/Profile/index.tsx

@@ -30,6 +30,7 @@ import Feed from './Feed';
 import FeedType from './FeedType';
 import FollowDialog from './FollowDialog';
 import NftGallery from './NftGallery';
+import InjectivePortfolio from './InjectivePortfolio';
 import ProfilePageShimmer from './Shimmer';
 
 const ViewProfile: NextPage = () => {
@@ -157,6 +158,7 @@ const ViewProfile: NextPage = () => {
           {feedType === ProfileFeedType.Stats && IS_MAINNET ? (
             <Achievements profile={profile as Profile} />
           ) : null}
+          {feedType === ProfileFeedType.Injective ? <InjectivePortfolio /> : null}
         </GridItemEight>
       </GridLayout>
     </>

apps/web/src/components/Shared/Login/WalletSelector.tsx

@@ -30,6 +30,8 @@ import {
   useNetwork,
   useSignMessage
 } from 'wagmi';
+import { useInjectiveWallet } from '@lib/InjectiveWalletProvider';
+import { Wallet } from '@injective-labs/wallet-strategy';
 
 interface WalletSelectorProps {
   setHasConnected: Dispatch<boolean>;
@@ -46,6 +48,7 @@ const WalletSelector: FC<WalletSelectorProps> = ({
   const setShowAuthModal = useGlobalModalStateStore(
     (state) => state.setShowAuthModal
   );
+  const { connect: connectInjective } = useInjectiveWallet();
   const [isLoading, setIsLoading] = useState(false);
 
   const onError = (error: any) => {
@@ -225,6 +228,21 @@ const WalletSelector: FC<WalletSelectorProps> = ({
           </button>
         );
       })}
+      <button
+        type="button"
+        className="flex w-full items-center justify-between space-x-2.5 overflow-hidden rounded-xl border px-4 py-3 outline-none hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700"
+        onClick={() => connectInjective(Wallet.Keplr)}
+      >
+        <span>Keplr (Injective)</span>
+        <img
+          src="https://keplr.app/img/keplr.png"
+          draggable={false}
+          className="h-6 w-6"
+          height={24}
+          width={24}
+          alt="Keplr"
+        />
+      </button>
       {error?.message ? (
         <div className="flex items-center space-x-1 text-red-500">
           <XCircleIcon className="h-5 w-5" />

apps/web/src/enums.ts

@@ -17,7 +17,8 @@ export enum ProfileFeedType {
   Media = 'MEDIA',
   Collects = 'COLLECTS',
   Nft = 'NFT',
-  Stats = 'STATS'
+  Stats = 'STATS',
+  Injective = 'INJECTIVE'
 }
 
 export enum MessageTabs {

apps/web/src/lib/InjectiveWalletProvider.tsx

@@ -0,0 +1,71 @@
+import { ChainId } from '@injective-labs/ts-types';
+import { Wallet, WalletStrategy } from '@injective-labs/wallet-strategy';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+interface InjectiveWalletContextType {
+  walletStrategy: WalletStrategy;
+  address: string;
+  chainId: ChainId;
+  connect: (wallet: Wallet) => Promise<void>;
+  disconnect: () => void;
+  isLoading: boolean;
+}
+
+const InjectiveWalletContext = createContext<InjectiveWalletContextType | null>(null);
+
+export const useInjectiveWallet = () => {
+  const context = useContext(InjectiveWalletContext);
+  if (!context) {
+    throw new Error('useInjectiveWallet must be used within an InjectiveWalletProvider');
+  }
+  return context;
+};
+
+export const InjectiveWalletProvider = ({ children }: { children: React.ReactNode }) => {
+  const [address, setAddress] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Initialize Wallet Strategy
+  // TODO: Make chainId configurable via env
+  const chainId = (process.env.NEXT_PUBLIC_INJECTIVE_CHAIN_ID as unknown as ChainId) || ChainId.Mainnet;
+
+  const walletStrategy = useMemo(() => new WalletStrategy({
+    chainId,
+    // Add compatible wallets here
+    wallet: Wallet.Keplr 
+  }), [chainId]);
+
+  const connect = async (wallet: Wallet) => {
+    setIsLoading(true);
+    try {
+      walletStrategy.setWallet(wallet);
+      const addresses = await walletStrategy.getAddresses();
+      if (addresses.length > 0) {
+        setAddress(addresses[0]);
+      }
+    } catch (error) {
+      console.error('Failed to connect Injective wallet:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const disconnect = () => {
+    setAddress('');
+    // WalletStrategy doesn't strictly "disconnect" in the same way, 
+    // but we clear local state.
+  };
+
+  return (
+    <InjectiveWalletContext.Provider value={{
+      walletStrategy,
+      address,
+      chainId,
+      connect,
+      disconnect,
+      isLoading
+    }}>
+      {children}
+    </InjectiveWalletContext.Provider>
+  );
+};

packages/data/constants.ts

@@ -14,6 +14,12 @@ export const LENS_PERIPHERY = getEnvConfig().lensPeripheryAddress;
 export const DEFAULT_COLLECT_TOKEN = getEnvConfig().defaultCollectToken;
 export const LIT_PROTOCOL_ENVIRONMENT = getEnvConfig().litProtocolEnvironment;
 
+export const INJECTIVE_ENDPOINTS = {
+  indexerApi: 'https://sentry.exchange.grpc-web.injective.network',
+  grpc: 'https://sentry.chain.grpc-web.injective.network',
+  rest: 'https://sentry.lcd.injective.network'
+};
+
 export const IS_MAINNET = API_URL === LensEndpoint.Mainnet;
 
 // XMTP