Skip to content

Getting Started

Get started with Razor Kit in just a few lines of code.

Razor wallet kit is a wallet aggregator for DApps to interact with all wallets on Movement easily. 🥳

Try out our kit and connect your dapp in just few seconds. 🪄

⭐️ Have fun with our Demo Playground

Examples

You can learn more about the rationale behind the project in the Why Razor Kit section.

🔨 Setup

First of all, let's install the npm package @razorlabs/razorkit to your project.

npm
npm i @razorlabs/razorkit

Then wrap your <App /> within one of our context provider, so that our hooks can work nicely inside your dapp.

Oh don't forget to import our css to enable default styles 🎨

import React from 'react';
import ReactDOM from 'react-dom/client';
import { WalletProvider } from '@razorlabs/razorkit';
import '@razorlabs/razorkit/style.css';
 
const App = () => {
  return (
    <div>
      Hello World
    </div>
  )
}
 
// take react project as an example
ReactDOM.createRoot(document.getElementById('root')!).render(
  <WalletProvider>
    <App />
  </WalletProvider>
);

By default, Razor Kit will load all the preset wallets to the list💡

🕹 Place ConnectButton

Just import our <ConnectButton /> and place it wherever you like, such as Navbar or Header sections.

import React from 'react';
import { ConnectButton } from '@razorlabs/razorkit';
 
const App = () => {
  return (
    <>
      <header>
        <ConnectButton/>
      </header>
    </>
  )
};

🪝 Use Wallet Hooks

After your dapp connects to a supported wallet, your dapp is already supercharged and able to call wallet capabilities.🎉

Please explore the docs for further usage information 💡

import React, { useEffect } from 'react';
import { useWallet } from '@razorlabs/razorkit';
 
const App = () => {
  const wallet = useWallet()
 
  useEffect(() => {
    if (!wallet.connected) return;
    console.log('connected wallet name: ', wallet.name)
    console.log('account address: ', wallet.account?.address)
    console.log('account publicKey: ', wallet.account?.publicKey)
  }, [wallet.connected])
 
  // launch a signMessage call for the connected account via wallet
  async function handleSignMessage() {
    await wallet.signMessage({
      message: "Hello World",
      nonce: '1',
    });
  }
 
  return (
    <div>
      <button onClick={handleSignMessage}>Sign Message</button>
    </div>
  )
};

Continue to BUIDL your amazing dapp and join the ongoing Movement!

Demo Playground

Feel free to play with our Demo Playground