Getting started with @interchain-ui/react

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

2. 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>
    );
};

• You can start to use our components at this point. All components are in: https://interchain-storybook-static.surge.sh/

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

Great! yeah I figured the use client part was needed.

Do you have docs on how to import the connect modal on a fresh nextjs 14 project? I tried everything but the docs seem a little outdated.

when importing

import { ThemeProvider, useTheme, ConnectModal } from '@interchain-ui/react';

This works on a nextjs 14 page:

'use client';
import Image from 'next/image'
// 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';

export default function Home() {
  const { theme, themeClass, setTheme } = useTheme();
  return (

<ThemeProvider>
            <main className={themeClass}>
               
            </main>
        </ThemeProvider>

    
  )
}

but the import is giving some type errors

Could not find a declaration file for module '@interchain-ui/react'. '/Users/web/xxx/reserve/website/node_modules/@interchain-ui/react/dist/interchain-ui-kit-react.esm.js' implicitly has an 'any' type.
  There are types at '/Users/web/xxx/reserve/website/node_modules/@interchain-ui/react/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@interchain-ui/react' library may need to update its package.json or typings.ts(7016)

package.json

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@cosmos-kit/core": "^2.7.10",
    "@interchain-ui/react": "^1.16.5",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

I got this semi working:

nextjs 14 app folder structure

page.tsx

'use client';
import Image from 'next/image';
import '@interchain-ui/react/globalStyles';
import '@interchain-ui/react/styles';
import { ThemeProvider, useTheme, ConnectModalStatus, ConnectModal, ConnectModalHead, ConnectModalQRCode, ConnectModalWalletList } from '@interchain-ui/react';
import { useState } from 'react';

export default function Home() {
  const { theme, themeClass, setTheme } = useTheme();

  // State for managing modal open/close
  const [isOpen, setIsOpen] = useState(false);
  const [hasBack, setHasBack] = useState(false);

  // Handlers
  const onClose = () => setIsOpen(false);
  const onBack = () => setHasBack(false);
  const onNext = () => setHasBack(true);

  // Define any other props for your ConnectModal components
  const qrCodeProps = {
    // ... your QR code props here
  };
  const wallets = [
    {
      id: 'kepler',
      name: 'Wallet One',
      logo: '/path/to/wallet1/logo.png', // URL or path to the wallet's logo image
      // any other relevant properties
    },
  ];

  return (
    <ThemeProvider>
      <main className={themeClass}>
        {/* Button to open modal */}
        <button onClick={() => setIsOpen(true)}>Open Modal</button>

        {/* ConnectModal integration */}
        <ConnectModal isOpen={isOpen} onClose={onClose} header={<ConnectModalHead title="Select your wallet" hasCloseButton hasBackButton={hasBack} onBack={onBack} onClose={onClose} />}>
          {hasBack ? <ConnectModalQRCode {...qrCodeProps} /> :
            <ConnectModalWalletList wallets={wallets} onWalletItemClick={onNext} />}
        </ConnectModal>
      </main>
    </ThemeProvider>
  );
}

what would be a good place to get the wallets object? Looking at the sotrybook, it's not clear where it's getting the list from.

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

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;

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