3.22.0 • Published 1 month ago
@delphi-labs/shuttle-react v3.22.0
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
3.22.0
1 month ago
3.21.0
1 month ago
3.20.0
2 months ago
3.19.0
4 months ago
3.19.1
4 months ago
3.18.0
4 months ago
3.17.3
4 months ago
3.17.1
4 months ago
3.17.0
4 months ago
3.16.0
5 months ago
3.13.0
5 months ago
3.12.1
5 months ago
3.12.0
5 months ago
3.15.0
5 months ago
3.12.3
5 months ago
3.14.0
5 months ago
3.12.2
5 months ago
3.11.0
6 months ago
3.10.0
7 months ago
3.9.1
7 months ago
3.9.0
8 months ago
3.8.0
9 months ago
3.7.0
9 months ago
3.6.0
10 months ago
3.5.0
10 months ago
3.4.0
10 months ago
3.3.0
10 months ago
3.0.1-beta
10 months ago
3.0.0-beta
10 months ago
3.1.0
11 months ago
3.0.0
11 months ago