Web Components

Information about the upcoming Web Components auxiliary module for Dapp development.

Previously, I had intended to develop integrations for the various frontend frameworks. However, I have now settled for universal web components with framework-specific integrations instead. These are currently published under @kiruse/cosmos-components and in active development.

As web components, these can be directly imported into an HTML website (once officially published to NPM):

<!DOCTYPE html>
<html>
  <head>
    <title>My shiny new Dapp</title>
    <script type="importmap">
      {
        "imports": {
          "@kiruse/cosmos-components": "https://esm.sh/@kiruse/cosmos-components@latest"
        }
      }
    </script>
    <script type="module" src="@kiruse/cosmos-components"></script>
  </head>
  <body>
    <button id="connect-wallet">Connect Wallet</button>
    <p>Your address is: <cosmos-user-address /></p>
    <script type="module">
      import { modals } from '@kiruse/cosmos-components';
      document.getElementById('connect-wallet').addEventListener('click', () => {
        modals.showWalletModal('MY_WALLET_CONNECT_PROJECT_ID');
      });
    </script>
  </body>
</html>

Note that this component library is currently in active development, not yet released to NPM, and some components like the <cosmos-user-address> custom element don't exist yet. These components will be documented with Storybook on their own domain.

Previous@apophis-sdk/cosmwasmNextMessages

Last updated