@dojo-trading/shuttle-react
v3.26.0
Published
Shuttle is open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos Dapps.
Downloads
15
Maintainers
Readme
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 "@dojo-trading/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 "@dojo-trading/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