@delphi-labs/shuttle-react

Shuttle (React)

Shuttle is an open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos dApps.

Docs

You can check out the documentation for more information.

How to get started

Install

npm install @delphi-labs/shuttle-react

Setup

import { ShuttleProvider } from "@delphi-labs/shuttle-react";

const WC_PROJECT_ID = "...";

const extensionProviders = [
  // ...
];

const mobileProviders = [
  // ...
];

function App() {
  return (
    <ShuttleProvider
      walletConnectProjectId={WC_PROJECT_ID}
      extensionProviders={extensionProviders}
      mobileProviders={mobileProviders}
      // Add the following prop if you want wallet connections
      // to be persisted to local storage.
      persistent
    >
      <Component {...pageProps} />
    </ShuttleProvider>
  );
}

Use

import { useState } from "react";
import QRCode from "react-qr-code";
import { useShuttle, isAndroid, isIOS, isMobile } from "@delphi-labs/shuttle-react";

const currentNetworkId = "mars-1";

function Header() {
  const { providers, connect, mobileProviders, mobileConnect, getWallets } = useShuttle();
  const [qrCodeUrl, setQrCodeUrl] = useState("");
  const wallet = getWallets({ chainId: currentNetworkId })[0];

  return (
    <>
      {wallet && (
        <>
          <p>Address: {wallet.account.address}</p>
        </>
      )}

      {!wallet && (
        <>
          {providers.map((provider) => {
            return (
              <button
                key={provider.id}
                onClick={() =>
                  connect({
                    providerId: provider.id,
                    chainId: currentNetworkId,
                  })
                }
                disabled={!provider.initialized}
              >
                {provider.name}
              </button>
            );
          })}

          {mobileProviders.map((mobileProvider) => {
            return (
              <button
                key={mobileProvider.id}
                onClick={async () => {
                  const urls = await mobileConnect({
                    mobileProviderId: mobileProvider.id,
                    chainId: currentNetworkId,
                    callback: () => {
                      setQrCodeUrl("");
                    },
                  });

                  if (isMobile()) {
                    if (isAndroid()) {
                      window.location.href = urls.androidUrl;
                    } else if (isIOS()) {
                      window.location.href = urls.iosUrl;
                    } else {
                      window.location.href = urls.androidUrl;
                    }
                  } else {
                    setQrCodeUrl(urls.qrCodeUrl);
                  }
                }}
                disabled={!mobileProvider.initialized}
              >
                {mobileProvider.name}
              </button>
            );
          })}

          {qrCodeUrl && (
            <>
              <QRCode value={qrCodeUrl} />
            </>
          )}
        </>
      )}
    </>
  );
}

How to develop

Install

pnpm install

Test

pnpm run test

Prettier

pnpm run prettier

Lint

pnpm run lint

Build

pnpm run build

Publish

pnpm publish