Skip to content

Instantly share code, notes, and snippets.

@yyyyaaa

yyyyaaa/getting-started.md

Created November 28, 2023 08:43
Show Gist options
  • Save yyyyaaa/65cca11e3fd5d971b77fc8f3b06de727 to your computer and use it in GitHub Desktop.
Save yyyyaaa/65cca11e3fd5d971b77fc8f3b06de727 to your computer and use it in GitHub Desktop.
Download ZIP
Getting started with @interchain-ui/react
Raw
getting-started.md
  1. In your React project, install dependency:

If you're using yarn: yarn add @interchain-ui/react

If you're using npm: npm i @interchain-ui/react

  1. Setting up your root layout/ route:
  • import the css stylesheet into your root layout:
// This is a global CSS reset, optional
import '@interchain-ui/react/globalStyles';
// This is all components styles
import '@interchain-ui/react/styles';
  • wrap the root layout with our ThemeProvider and attach the theming class to a container:
import { ThemeProvider, useTheme } from '@interchain-ui/react';

const MyRootLayout = (props) => {
    const { theme, themeClass, setTheme } = useTheme();
    return (
        <ThemeProvider>
            <main className={themeClass}>
                {props.children}
            </main>
        </ThemeProvider>
    );
};

We will frequently update this page and a nicer components explorer is on the way! Any questions let me know.

@daniel-farina
Copy link

ok answering my own question and documenting my process to eventually contribute with the docs and record the jourcey for developers trying to integrate.

wallets are available from:

import { wallets } from "cosmos-kit";

Once wallets are imported I got an error about missing cosmwasm-stargate

yarn add @cosmjs/cosmwasm-stargate

I installed that, then I got error:

/node_modules/@cosmos-kit/core/esm/utils/endpoint.js:1:0
Module not found: Can't resolve 'axios'

https://nextjs.org/docs/messages/module-not-found

I installed Axios, then i got:

./node_modules/@cosmjs/cosmwasm-stargate/node_modules/@cosmjs/amino/build/index.js
Error: Failed to read source code from /Users/web/xxx/reserve/website/node_modules/@cosmjs/cosmwasm-stargate/node_modules/@cosmjs/amino/build/index.js

Caused by:
    No such file or directory (os error 2)

I then installed

@cosmjs/cosmwasm-stargate

I got another error:

./node_modules/@cosmjs/cosmwasm-stargate/node_modules/@cosmjs/amino/build/index.js
Error: Failed to read source code from

ok so at this point it seems I'm missing a package or something is wrong with my setup, any advice would be apreciated

@daniel-farina
Copy link

Quick update:
This would be the right format to get it to work on 13.5.6 I'm trying 13.5.6 with the app directory first before jumping to 14.

'use client';
import { Inter } from 'next/font/google'
import './globals.css'
// This is a global CSS reset, optional
import '@interchain-ui/react/globalStyles';
// This is all components styles
import '@interchain-ui/react/styles';
import { ThemeProvider, useTheme } from '@interchain-ui/react';


const inter = Inter({ subsets: ['latin'] })


const RootLayout = ({
  children,
}: {
  children: React.ReactNode
}) => {
  const { theme, themeClass, setTheme } = useTheme();
  return (
      <html>
       <body>
       <ThemeProvider>
          <main className={themeClass}>
              {children}
          </main>
      </ThemeProvider>
       </body>
      </html>
  );
};

export default RootLayout;

@daniel-farina
Copy link

I started a project here for nextjs integration:
https://github.com/daniel-farina/interchain-ui-nextjs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment