Skip to content

Latest commit

 

History

History

safe-apps-react-sdk

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

Safe Apps React SDK

npm

This SDK should provide a simple way to write a React.js Safe app

How to use

  • Add npm package
yarn add @safe-global/safe-apps-react-sdk

npm i @safe-global/safe-apps-react-sdk
  • Add SafeProvider Safe provider accepts loader and options props
// ... other imports
import SafeProvider from '@safe-global/safe-apps-react-sdk';

ReactDOM.render(
  <React.StrictMode>
    <SafeProvider>
      <App /> // Your app
    </SafeProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
  • Use Safe Apps SDK Hook
// ... other imports
import { useSafeAppsSDK } from '@safe-global/safe-apps-react-sdk';

const App = () => {
  const { sdk, connected, safe } = useSafeAppsSDK();
  return <div>{safe.safeAddress}</div>;
};

Usages

Send transactions

import { BaseTransaction } from '@safe-global/safe-apps-sdk'

const txs: BaseTransaction[] = [
  {
    to: '0x31415629...',
    value: '0',
    data: '0xbaddad',
  },
  //...
];
// Returns a hash to identify the Safe transaction
const safeTxHash: string = await sdk.txs.send({ txs });

Load Safe transaction information

const safeTx: SafeTransaction = await sdk.txs.getBySafeTxHash(safeTxHash);

More scenarios

For all available sdk methods, please refer to the safe-apps-sdk documentation