Vite react

examples/injective-vue/package.json

@@ -31,4 +31,4 @@
     "vite": "^6.0.0",
     "vue-tsc": "^2.1.10"
   }
-}
+}

examples/stake-tokens/package.json

@@ -44,4 +44,4 @@
     "typescript": "^5.5.4"
   },
   "packageManager": "[email protected]"
-}
+}

examples/vite-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vite-react/README.md

@@ -0,0 +1,39 @@
+This is an Interchain App project bootstrapped with [`create-interchain-app`](https://github.com/hyperweb-io/create-interchain-app).
+
+## Getting Started
+
+First, install the packages and run the development server:
+
+```bash
+yarn && yarn dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+You can start editing the page by modifying `src/App.tsx`. The page auto-updates as you edit the file.
+
+## Interchain JavaScript Stack 
+
+A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️
+
+| Category              | Tools                                                                                                                  | Description                                                                                           |
+|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|
+| **Chain Information**   | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. |
+| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)<sup>beta</sup>, [**Cosmos Kit**](https://github.com/hyperweb.io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. |
+| **Signing Clients**          | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)<sup>beta</sup>, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network |
+| **SDK Clients**              | [**Telescope**](https://github.com/hyperweb.io/telescope)                                                          | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. |
+| **Starter Kits**     | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)<sup>beta</sup>, [**Create Cosmos App**](https://github.com/hyperweb.io/create-cosmos-app) | Set up a modern Interchain app by running one command. |
+| **UI Kits**          | [**Interchain UI**](https://github.com/hyperweb.io/interchain-ui)                                                   | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. |
+| **Testing Frameworks**          | [**Starship**](https://github.com/hyperweb.io/starship)                                                             | Unified Testing and Development for the Interchain. |
+| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app)                              | Build and deploy full-stack blockchain applications with TypeScript |
+| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen)                                                   | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. |
+
+## Credits
+
+🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
+
+## Disclaimer
+
+AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
+
+No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.

examples/vite-react/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

examples/vite-react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/vite-react/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@hyperweb/vite-react",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chain-registry/v2": "^1.71.71",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.4",
+    "@interchain-kit/core": "0.2.206",
+    "@interchain-kit/keplr-extension": "0.2.206",
+    "@tanstack/react-query": "5.68.0",
+    "buffer": "^6.0.3",
+    "framer-motion": "^11.0.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  },
+  "packageManager": "[email protected]"
+}

examples/vite-react/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

examples/vite-react/src/App.tsx

@@ -0,0 +1,88 @@
+import { useEffect } from 'react';
+import {
+  Box,
+  Button,
+  Container,
+  VStack,
+  useColorMode,
+  IconButton,
+  Heading,
+  Card,
+  CardBody,
+} from '@chakra-ui/react';
+import { SunIcon, MoonIcon } from '@chakra-ui/icons';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import WalletDetails from './components/WalletDetails';
+import TransferForm from './components/TransferForm';
+import { transferFormSchema, type TransferFormData } from './utils/validation';
+import { useWalletManager } from './hooks/useWalletManager';
+import { useBalance } from './hooks/useBalance';
+import { useTransfer } from './hooks/useTransfer';
+
+function App() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const { walletManager, address, connectWallet } = useWalletManager();
+  const { balance, refetchBalance } = useBalance(address, walletManager);
+  const transferMutation = useTransfer(address, walletManager, refetchBalance);
+
+  const { register, handleSubmit, formState: { errors }, reset } = useForm<TransferFormData>({
+    resolver: zodResolver(transferFormSchema),
+    defaultValues: { amount: '0.000001' },
+  });
+
+  const onSubmit = (data: TransferFormData) => {
+    if (!balance || Number(data.amount) > balance) {
+      return;
+    }
+    transferMutation.mutate(data);
+    reset();
+  };
+
+  useEffect(() => {
+    if (walletManager) {
+      connectWallet();
+    }
+  }, [walletManager, connectWallet]);
+
+  return (
+    <Container maxW="container.sm" py={8}>
+      <VStack spacing={6} align="stretch">
+        <Box display="flex" justifyContent="flex-end">
+          <IconButton
+            aria-label="Toggle color mode"
+            icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+            onClick={toggleColorMode}
+          />
+        </Box>
+        <Card>
+          <CardBody>
+            <VStack spacing={4} align="stretch">
+              <Heading size="md">Cosmos Wallet</Heading>
+              {!address ? (
+                <Button onClick={connectWallet}>Connect Keplr</Button>
+              ) : (
+                <>
+                  <WalletDetails
+                    address={address}
+                    balance={balance ?? '0'}
+                    onRefresh={refetchBalance}
+                  />
+                  <TransferForm
+                    register={register}
+                    errors={errors}
+                    handleSubmit={handleSubmit}
+                    onSubmit={onSubmit}
+                    isLoading={transferMutation.isMutating}
+                  />
+                </>
+              )}
+            </VStack>
+          </CardBody>
+        </Card>
+      </VStack>
+    </Container>
+  );
+}
+
+export default App;

examples/vite-react/src/components/TransferForm.tsx

@@ -0,0 +1,35 @@
+import { FormControl, FormLabel, Input, Text, VStack, Button } from '@chakra-ui/react';
+import { DENOM_DISPLAY } from '../utils/constants';
+import { TransferFormData } from '../utils/validation';
+
+interface TransferFormProps {
+  register: ReturnType<any>;
+  errors: any;
+  handleSubmit: (fn: (data: TransferFormData) => void) => (e?: React.BaseSyntheticEvent) => Promise<void>;
+  onSubmit: (data: TransferFormData) => void;
+  isLoading: boolean;
+}
+
+const TransferForm = ({ register, errors, handleSubmit, onSubmit, isLoading }: TransferFormProps) => {
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <VStack spacing={4}>
+        <FormControl isInvalid={!!errors.recipient}>
+          <FormLabel>Recipient Address</FormLabel>
+          <Input {...register('recipient')} />
+          {errors.recipient && <Text color="red.500">{errors.recipient.message}</Text>}
+        </FormControl>
+        <FormControl isInvalid={!!errors.amount}>
+          <FormLabel>Amount ({DENOM_DISPLAY})</FormLabel>
+          <Input {...register('amount')} type="number" step="0.000001" />
+          {errors.amount && <Text color="red.500">{errors.amount.message}</Text>}
+        </FormControl>
+        <Button type="submit" colorScheme="blue" isLoading={isLoading} width="100%">
+          Transfer
+        </Button>
+      </VStack>
+    </form>
+  );
+};
+
+export default TransferForm;

examples/vite-react/src/components/WalletDetails.tsx

@@ -0,0 +1,30 @@
+import { Box, Text, HStack, IconButton } from '@chakra-ui/react';
+import { RepeatIcon } from '@chakra-ui/icons';
+import { DENOM_DISPLAY } from '../utils/constants';
+
+interface WalletDetailsProps {
+  address: string;
+  balance: number | string;
+  onRefresh: () => void;
+}
+
+const WalletDetails = ({ address, balance, onRefresh }: WalletDetailsProps) => {
+  return (
+    <Box>
+      <Text>Address: {address}</Text>
+      <HStack>
+        <Text>
+          Balance: {balance ?? '0'} {DENOM_DISPLAY}
+        </Text>
+        <IconButton
+          aria-label="Refresh balance"
+          icon={<RepeatIcon />}
+          size="sm"
+          onClick={onRefresh}
+        />
+      </HStack>
+    </Box>
+  );
+};
+
+export default WalletDetails;