javiersuweijie / shuttle

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

Shuttle

Shuttle is 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

Setup

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

const providers = [
  // ...
];

const mobileProviders = [
  // ...
];

function App() {
  return (
    <ShuttleProvider
      providers={providers}
      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 } from "@delphi-labs/shuttle";

import { isAndroid, isIOS, isMobile } from "./utils/device";

const currentNetworkId = "mars-1";

function Header() {
  const { providers, connect, mobileProviders, mobileConnect } = useShuttle();
  const [walletconnectUrl, setWalletconnectUrl] = 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: () => {
                  setWalletconnectUrl("");
                },
              });

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

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

How to develop

Install

npm install

Test

npm run test

Prettier

npm run prettier

Lint

npm run lint

Build

npm run build

Publish

npm publish