Migration to V2

[dillu24]

Hi, we are currently trying to migrate our Cosmos kit from v1 to v2. So far what we did not manage to make work is the custom modals. In Cosmos Kit v1 we had a set of modals we were using in modalViews, but now it seems that they are not being triggered. For example, if I have the following modal, how should the chain provider look?:

import { WalletViewProps } from '@cosmos-kit/core';
import { EWalletViewsTitles } from 'lib/types';

import EPModalViewLayout from './EPModalViewLayout';

export default function EPConnectedView(props: WalletViewProps) {
  const { onClose, onReturn, wallet } = props;

  const {
    walletInfo: { prettyName },
    username,
  } = wallet;

  const header = (
    <h2 className="ep-wallet-modal__title ep-font-s-20 ep-font-w-600 m-0">
      {EWalletViewsTitles.connected}
    </h2>
  );
  const body = (
    <p className="ep-text-color-white m-0">
      {prettyName} <b>{username}</b> account is successfully connected
    </p>
  );

  return (
    <EPModalViewLayout
      header={header}
      body={body}
      onClose={onClose}
      onReturn={onReturn}
    />
  );
}

We've got the following ChainProvider, and we set the walletModal to undefined as documented. But it ain't working:

<ChainProvider
    chains={[
       ...chains,
       entrypointTestnet,
       cosmosTestnet,
       osmosisTestnet,
    ]}
    assetLists={[
      ...assets,
      localEntrypointAssets,
      localCosmosAssets,
      localOsmosisAssets,
    ]}
    wallets={[...keplrWallet]}
    sessionOptions={{
      duration: 86400000,
    }}
    walletConnectOptions={{
      // some stuff in here
    }}
    walletModal={undefined}
    modalViews={{
      Connected: EPConnectedView,
      WalletList: EPWalletListView,
      Connecting: EPConnectingView,
      NotExist: EPNotExistView,
      Rejected: EPRejectedView,
      Error: EPErrorView,
      // No used in this moment
      // QRCode: EPQrCodeView,
    }}
>
   <Routes />
</ChainProvider>

[yyyyaaa]

@liujun93 Thanks, I'm. checking this one out

[yyyyaaa]

@dillu24 hi, the docs should have been clearer, sorry for this. I'll amend the docs.

For better composition reason, the new code requires you implement a function that return an object of this shape (will export this type in the next fix)

export type ModalViewImpl = {
  head: React.ReactNode;
  content: React.ReactNode;
};

The head and content properties correspond to the modal's head and content.

Then in your custom view, for example, do this

import { WalletViewProps } from "@cosmos-kit/core";
import {
  Button,
  Stack,
  Text,
} from "@interchain-ui/react";

export type ModalViewImpl = {
  head: React.ReactNode;
  content: React.ReactNode;
};

export function ConnectedView({
  onClose,
  onReturn,
  wallet,
}: WalletViewProps): ModalViewImpl {
  const { walletInfo, username, address } = wallet;

  const onDisconnect = async () => {
    await wallet.disconnect(true);
  };

  const modalHead = (
    <Stack>
      <Text>Custom header</Text>
      <Button onClick={onReturn}>Back</Button>
      <Button onClick={onClose}>Close</Button>
    </Stack>
  );

  const modalContent = (
    <Stack>
      <Text>COnnected woohoo</Text>
      <Text>{username}</Text>
      <Text>{address}</Text>
      <Button onClick={onDisconnect}>Close</Button>
    </Stack>
  );

  return { head: modalHead, content: modalContent };
}

Then plug it in modalViews={{ Connected: ConnectedView }}

Hope this helps

[dillu24]

Seems clear now. Will try it out again in the coming days.

Which version of cosmos-kit should I be using to try this out?

[yyyyaaa]

@dillu24 Just use latest @cosmos-kit/react@2.9.1, those changes have been in since V2 :D

[dillu24]

Hey @yyyyaaa I am trying to do this migration again on latest Cosmos Kit. It seems that it requires the props to be of type WalletViewProps | WalletListViewProps,, but unfortunately this causes a typescript error on the wallet (Property 'wallet' does not exist on type 'WalletViewProps | WalletListViewProps')

I've got this code:

import { WalletListViewProps, WalletViewProps } from '@cosmos-kit/core';
import { EWalletViewsTitles } from 'lib/types';
import { ModalViewImpl } from '@cosmos-kit/react/cjs/modal/components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faXmark } from '@fortawesome/free-solid-svg-icons';

export default function EPConnectedView(
  props: WalletViewProps | WalletListViewProps,
): ModalViewImpl {
  const { onClose, wallet } = props;

  const {
    walletInfo: { prettyName },
    username,
  } = wallet;

  const header = (
    <div
      className="ep-wallet-modal__header w-100 d-flex align-items-center justify-content-between px-3 py-4"
      data-cy="ep-wallet-modal-header"
    >
      <h2 className="ep-wallet-modal__title ep-font-s-20 ep-font-w-600 m-0">
        {EWalletViewsTitles.connected}
      </h2>
      <FontAwesomeIcon
        icon={faXmark}
        onClick={onClose}
        className="ep-wallet-modal__close-icon ep-with-pointer ep-font-s-32 ep-text-color-white-dark"
        data-cy="ep-wallet-modal-close-icon"
      />
    </div>
  );
  const body = (
    <div
      className="ep-wallet-modal ep-br-16 d-flex flex-column"
      data-cy="ep-wallet-modal"
    >
      <div
        className="ep-wallet-modal__body w-100 ep-p-top-bottom-32 px-4"
        data-cy="ep-wallet-modal-body"
      >
        <p className="ep-text-color-white m-0">
          {prettyName} <b>{username}</b> account is successfully connected
        </p>
      </div>
    </div>
  );

  return {
    head: header,
    content: body,
  };
}

[yyyyaaa]

Hey! Sorry just saw. I will check it today

[dillu24]

Hey @yyyyaaa by any chance did you have a chance to look at this?

[yyyyaaa]

hey @dillu24 I have a PR opened already, let me ping my teammates to review and merge :D sorry for that

[yyyyaaa]

@dillu24 It's merged and published, please check example/_app.tsx to see the example custom components

[dillu24]

Hey @yyyyaaa by any chance with this new approach would I be able to still pass an entire view and override the default modals?

I modified the the code I shared above and managed to get it to compile by using your example, but, the modal styles where not overriden.

For more clarity, I've got this code now:

import { WalletViewProps } from '@cosmos-kit/core';
import { EWalletViewsTitles } from 'lib/types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faXmark } from '@fortawesome/free-solid-svg-icons';

export type TModalViewImpl = {
  head: React.ReactNode;
  content: React.ReactNode;
};

export default function EPConnectedView(
  props: WalletViewProps,
): TModalViewImpl {
  const { onClose } = props;

  // const {
  //   walletInfo: { prettyName },
  //   username,
  // } = wallet;

  const header = (
    <div
      className="ep-wallet-modal ep-br-16 d-flex flex-column"
      data-cy="ep-wallet-modal"
    >
      <div
        className="ep-wallet-modal__header w-100 d-flex align-items-center justify-content-between px-3 py-4"
        data-cy="ep-wallet-modal-header"
      >
        <h2 className="ep-wallet-modal__title ep-font-s-20 ep-font-w-600 m-0">
          {EWalletViewsTitles.connected}
        </h2>
        <FontAwesomeIcon
          icon={faXmark}
          onClick={onClose}
          className="ep-wallet-modal__close-icon ep-with-pointer ep-font-s-32 ep-text-color-white-dark"
          data-cy="ep-wallet-modal-close-icon"
        />
      </div>
    </div>
  );
  const body = (
    <div
      className="ep-wallet-modal ep-br-16 d-flex flex-column"
      data-cy="ep-wallet-modal"
    >
      <div
        className="ep-wallet-modal ep-br-16 d-flex flex-column"
        data-cy="ep-wallet-modal"
      >
        <div
          className="ep-wallet-modal__body w-100 ep-p-top-bottom-32 px-4"
          data-cy="ep-wallet-modal-body"
        >
          <p className="ep-text-color-white m-0">
            Test <b>test</b> account is successfully connected
          </p>
        </div>
      </div>
    </div>
  );

  return {
    head: header,
    content: body,
  };
}

<ChainProvider
    chains={[...chains, entrypointTestnet, cosmosTestnet]}
    assetLists={[...assets, localEntrypointAssets, localCosmosAssets]}
    wallets={[...keplrWallet]}
    sessionOptions={{
        duration: 86400000,
    }}
    walletConnectOptions={{
      signClient: {
        projectId: '<project-id>',
        relayUrl: 'wss://relay.walletconnect.org',
        metadata: {
          name: 'EntryPoint',
          description: 'EntryPoint dapp',
          url: 'https://docs.cosmoskit.com/',
          icons: [],
        },
      },
    }}
    walletModal={undefined}
    modalViews={{
      Connected: EPConnectedView,
      WalletList: EPConnectedView,
      Connecting: EPConnectedView,
      NotExist: EPConnectedView,
      Rejected: EPConnectedView,
      Error: EPConnectedView,
      QRCode: EPConnectedView,
    }}
  >
      <Routes />
</ChainProvider>

[yyyyaaa]

Sure let me check

[dillu24]

Sure let me check

Just for more context, in ep-modal css class I modify the background color, resize modal, set spacing etc.

[dillu24]

@yyyyaaa By any chance did you have a look?

[yyyyaaa]

@dillu24 sorry I forgot to reply! Yeah I will need to modify cosmos kit react a bit to allow you to pass the classNames of modal header and modal content. It's weekend tho so expect PRs to get merged on Monday!

[yyyyaaa]

Just to confirm, you want to override this DOM node's CSS right? The outer children that wraps your custom content

[dillu24]

@yyyyaaa Yeah I think so. At a high-level I need the ability to pass my own styling (backgrounds, borders, anything really) to all type of modals (connected, qr, error, rejected etc)

Are there any PRs that I can track?

[yyyyaaa]

not submitted yet but I'll ping you asap, there are 2 PRs actually, one in @interchain-ui/react and one in cosmos kit @dillu24

[yyyyaaa]

@dillu24 hi, PR here, will have teammates review and publish in a minute https://github.com/cosmology-tech/cosmos-kit/pull/362