diff --git a/templates/chain-template/.gitignore b/templates/chain-template/.gitignore index c87c9b39..a972d9b1 100644 --- a/templates/chain-template/.gitignore +++ b/templates/chain-template/.gitignore @@ -34,3 +34,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# codegen +/components/codegen diff --git a/templates/chain-template/components/balance-test-standalone.tsx b/templates/chain-template/components/balance-test-standalone.tsx new file mode 100644 index 00000000..3f479564 --- /dev/null +++ b/templates/chain-template/components/balance-test-standalone.tsx @@ -0,0 +1,156 @@ +import React from 'react'; +import { Box, Text, Button } from '@interchain-ui/react'; +import { useGetBalance } from './codegen/cosmos/bank/v1beta1/query.rpc.react'; + +export const BalanceTestStandalone: React.FC = () => { + // Hardcoded test wallet address + const testAddress = 'osmo1hcp508gngdnpls4z76nlx78zuadqpyypq8t6as'; + const [selectedDenom, setSelectedDenom] = React.useState('uosmo'); + + // Use the codegen hook to get balance + const { + data: balanceData, + isLoading, + error, + refetch, + isRefetching + } = useGetBalance({ + request: { + address: testAddress, + denom: selectedDenom, + }, + options: { + enabled: true, + refetchInterval: 30000, // Refetch every 30 seconds + }, + }); + + const denomOptions = ['uosmo', 'uion', 'uusdc', 'uatom']; + + return ( + + + Standalone Balance Test (No Wallet Connection) + + + + + Test Address (Osmosis Testnet): + + + {testAddress} + + + + + + Select Denomination: + + + {denomOptions.map((denom) => ( + + ))} + + + + + + Query Status: + + + {isLoading && ( + + 🔄 Loading balance for {selectedDenom}... + + )} + + {isRefetching && !isLoading && ( + + 🔄 Refreshing... + + )} + + {error && ( + + + ❌ Error: {error.message || 'Failed to fetch balance'} + + + )} + + {balanceData && !isLoading && ( + + + ✅ Balance Query Successful + + + + Denom: {balanceData.balance?.denom || selectedDenom} + + + Amount: {balanceData.balance?.amount || '0'} + + {balanceData.balance?.amount && balanceData.balance.amount !== '0' && ( + + = {(parseInt(balanceData.balance.amount) / 1_000_000).toFixed(6)} {selectedDenom.replace('u', '').toUpperCase()} + + )} + + + )} + + {balanceData && !error && !balanceData.balance && ( + + + No balance found for {selectedDenom} + + + )} + + + + + + + + + Test Details: + + + • Using codegen hook: useGetBalance + + + • No wallet connection required + + + • Direct RPC query to Osmosis testnet + + + • Auto-refresh every 30 seconds + + + + ); +}; \ No newline at end of file diff --git a/templates/chain-template/next.config.js b/templates/chain-template/next.config.js index 17f0ed6f..d8ea5d36 100644 --- a/templates/chain-template/next.config.js +++ b/templates/chain-template/next.config.js @@ -21,4 +21,16 @@ module.exports = { }, ], }, + async headers() { + return [ + { + source: '/api/:path*', + headers: [ + { key: 'Access-Control-Allow-Origin', value: '*' }, + { key: 'Access-Control-Allow-Methods', value: 'GET, POST, PUT, DELETE, OPTIONS' }, + { key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' }, + ], + }, + ]; + }, }; diff --git a/templates/chain-template/package.json b/templates/chain-template/package.json index 3866444a..d39876d0 100644 --- a/templates/chain-template/package.json +++ b/templates/chain-template/package.json @@ -29,8 +29,8 @@ "@interchain-kit/react": "0.3.41", "@interchain-ui/react": "1.23.31", "@interchain-ui/react-no-ssr": "0.1.2", - "@interchainjs/cosmos": "1.11.2", - "@interchainjs/react": "1.11.2", + "@interchainjs/cosmos": "1.13.0", + "@interchainjs/react": "1.13.0", "@keplr-wallet/cosmos": "^0.12.44", "@tanstack/react-query": "4.32.0", "ace-builds": "1.35.0", diff --git a/templates/chain-template/pages/index.tsx b/templates/chain-template/pages/index.tsx index 744a8365..cca9a1a8 100644 --- a/templates/chain-template/pages/index.tsx +++ b/templates/chain-template/pages/index.tsx @@ -5,6 +5,7 @@ import { useChain } from '@interchain-kit/react'; import { Button } from '@/components'; import { useChainStore } from '@/contexts'; import { useDetectBreakpoints } from '@/hooks'; +import { BalanceTestStandalone } from '@/components/balance-test-standalone'; export default function Home() { const { isMobile } = useDetectBreakpoints(); @@ -34,6 +35,9 @@ export default function Home() { Next.js + {/* Standalone Balance Test Component */} + +