Shuttle is open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos Dapps.
npm install @delphi-labs/shuttle-react[![NPM version][npm-image]][npm-url]
[![Build][github-build]][github-build-url]
![npm-typescript]
[![License][github-license]][github-license-url]
Shuttle is an open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos dApps.
You can check out the documentation for more information.
``bash`
npm install @delphi-labs/shuttle-react
`tsx
import { ShuttleProvider } from "@delphi-labs/shuttle-react";
const WC_PROJECT_ID = "...";
const extensionProviders = [
// ...
];
const mobileProviders = [
// ...
];
function App() {
return (
extensionProviders={extensionProviders}
mobileProviders={mobileProviders}
// Add the following prop if you want wallet connections
// to be persisted to local storage.
persistent
>
);
}
`
`tsx
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 && (
<>
Address: {wallet.account.address}
{!wallet && (
<>
{providers.map((provider) => {
return (
onClick={() =>
connect({
providerId: provider.id,
chainId: currentNetworkId,
})
}
disabled={!provider.initialized}
>
{provider.name}
);
})}
{mobileProviders.map((mobileProvider) => {
return (
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}
);
})}
{qrCodeUrl && (
<>
)}
)}
);
}
`
`bash`
pnpm install
`bash`
pnpm run test
`bash`
pnpm run prettier
`bash`
pnpm run lint
`bash`
pnpm run build
`bash``
pnpm publish
[npm-url]: https://www.npmjs.com/package/@delphi-labs/shuttle-react
[npm-image]: https://img.shields.io/npm/v/@delphi-labs/shuttle-react
[npm-typescript]: https://img.shields.io/npm/types/@delphi-labs/shuttle-react
[github-license]: https://img.shields.io/github/license/delphi-labs/shuttle
[github-license-url]: https://github.com/delphi-labs/shuttle/blob/main/LICENSE
[github-build]: https://github.com/delphi-labs/shuttle/actions/workflows/publish.yml/badge.svg
[github-build-url]: https://github.com/delphi-labs/shuttle/actions/workflows/publish.yml