-
Notifications
You must be signed in to change notification settings - Fork 4
feat!: remove cosmos-kit from react-components #132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,39 @@ | ||
| # React + TypeScript + Vite | ||
| This is an Interchain App project bootstrapped with [`create-interchain-app`](https://github.com/hyperweb-io/create-interchain-app). | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
| ## Getting Started | ||
|
|
||
| Currently, two official plugins are available: | ||
| First, install the packages and run the development server: | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
| ```bash | ||
| yarn install && yarn dev | ||
| ``` | ||
|
|
||
| ## Expanding the ESLint configuration | ||
| Open [http://localhost:5173](http://localhost:5173) with your browser to see the result. | ||
|
|
||
| If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
| You can start editing the page by modifying `src/App.tsx`. The page auto-updates as you edit the file. | ||
|
|
||
| - Configure the top-level `parserOptions` property like this: | ||
| ## Interchain JavaScript Stack | ||
|
|
||
| ```js | ||
| export default { | ||
| // other rules... | ||
| parserOptions: { | ||
| ecmaVersion: 'latest', | ||
| sourceType: 'module', | ||
| project: ['./tsconfig.json', './tsconfig.node.json'], | ||
| tsconfigRootDir: __dirname, | ||
| }, | ||
| }; | ||
| ``` | ||
| 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. | ||
|
|
||
| - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` | ||
| - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` | ||
| - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list | ||
| 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. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }, | ||
| ], | ||
| }, | ||
| }, | ||
| ) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,36 @@ | ||
| { | ||
| "name": "example", | ||
| "name": "@agoric/ui-kit-example", | ||
|
||
| "private": true, | ||
| "version": "0.0.0", | ||
| "version": "0.0.1", | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "tsc && vite build", | ||
| "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", | ||
| "postinstall": "patch-package", | ||
| "build": "tsc -b && vite build", | ||
| "lint": "eslint .", | ||
| "preview": "vite preview" | ||
| }, | ||
| "dependencies": { | ||
| "@agoric/react-components": "0.4.0", | ||
| "patch-package": "^7.0.0", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "ses": "1.3.0" | ||
| "@agoric/react-components": "^0.5.0", | ||
| "@agoric/rpc": "^0.10.0", | ||
| "@agoric/web-components": "^0.17.0", | ||
| "buffer": "^6.0.3", | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^18.2.66", | ||
| "@types/react-dom": "^18.2.22", | ||
| "@typescript-eslint/eslint-plugin": "^7.2.0", | ||
| "@typescript-eslint/parser": "^7.2.0", | ||
| "@vitejs/plugin-react": "^4.2.1", | ||
| "eslint": "^8.57.0", | ||
| "eslint-plugin-react-hooks": "^4.6.0", | ||
| "eslint-plugin-react-refresh": "^0.4.6", | ||
| "typescript": "^5.2.2", | ||
| "vite": "^5.2.0" | ||
| "@esbuild-plugins/node-globals-polyfill": "^0.2.3", | ||
| "@eslint/js": "^9.9.1", | ||
| "@keplr-wallet/types": "^0.12.271", | ||
| "@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", | ||
| "vite-plugin-node-polyfills": "^0.24.0" | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,36 @@ | ||
| import { AgoricProvider, ConnectWalletButton } from '@agoric/react-components'; | ||
| import { wallets } from 'cosmos-kit'; | ||
| import { ThemeProvider, useTheme } from '@interchain-ui/react'; | ||
| import '@agoric/react-components/dist/style.css'; | ||
| import { useEffect } from 'react'; | ||
| import WalletDetails from './components/WalletDetails'; | ||
| import { useWalletManager } from './hooks/useWalletManager'; | ||
| import { AgoricProvider } from '@agoric/react-components'; | ||
| import { CHAIN_ID, REST_ENDPOINT, RPC_ENDPOINT } from './utils/constants'; | ||
|
|
||
| const localnet = { | ||
| testChain: { | ||
| chainId: 'agoriclocal', | ||
| chainName: 'agoric-local', | ||
| }, | ||
| apis: { | ||
| rest: ['http://localhost:1317'], | ||
| rpc: ['http://localhost:26657'], | ||
| iconUrl: '/agoriclocal.svg', // Optional icon for Network Dropdown component | ||
| }, | ||
| }; | ||
| function App() { | ||
| const { address, connectWallet, offlineSigner } = useWalletManager(); | ||
|
|
||
| // Omit "testChain" to specify the apis for Agoric Mainnet. | ||
| const mainnet = { | ||
| apis: { | ||
| rest: ['https://main.api.agoric.net'], | ||
| rpc: ['https://main.rpc.agoric.net'], | ||
| }, | ||
| }; | ||
| useEffect(() => { | ||
| connectWallet(); | ||
| }, [connectWallet]); | ||
|
|
||
| const App = () => { | ||
| const { themeClass } = useTheme(); | ||
| return ( | ||
| <ThemeProvider> | ||
| <div className={themeClass}> | ||
| <AgoricProvider | ||
| wallets={wallets.extension} | ||
| agoricNetworkConfigs={[localnet, mainnet]} | ||
| /** | ||
| * If unspecified, connects to Agoric Mainnet by default. | ||
| * See "Network Dropdown" below to see how to switch between Agoric testnets. | ||
| */ | ||
| defaultChainName="agoric-local" | ||
| > | ||
| <ConnectWalletButton /> | ||
| </AgoricProvider> | ||
| <AgoricProvider | ||
| restEndpoint={REST_ENDPOINT} | ||
| rpcEndpoint={RPC_ENDPOINT} | ||
| offlineSigner={offlineSigner} | ||
| address={address} | ||
| chainName={CHAIN_ID} | ||
| > | ||
| <div> | ||
| <div> | ||
| <h1> Agoric Wallet</h1> | ||
| {!address ? ( | ||
| <button onClick={connectWallet}>Connect Keplr</button> | ||
| ) : ( | ||
| <WalletDetails /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </ThemeProvider> | ||
| </AgoricProvider> | ||
| ); | ||
| }; | ||
| } | ||
|
|
||
| export default App; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we still need to patch?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just tried removing it and got:
Maybe another tech debt task to remove xsnap as a dependency here. I think it has to do with @agoric/web-components depending on ertp or notifier or something like that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this shouldn't need xsnap. Let's punt on solving this deps problem.