The implementation is based on this repository which is great: https://github.com/tschubotz/safe-connect/blob/main/src/App.tsx

I am able to handle swap transactions, but i cant seem to find a way to make an approve for the transaction, in essence if i want to swap CAKE for BNB, Pancake will say that CAKE must be enabled first. So how do i handle this enable with this implementation and how my approve function should be structured, do i need the ABI from the PancakeSwap Contract, i just cant seem to find any resource for this. Any help is appreciated!

1 Answer 1


This is an example that I found in the docs of: https://github.com/safe-global/safe-apps-sdk/tree/master/packages/safe-apps-sdk

I combined it with the send transactions example here: https://www.npmjs.com/package/@rmeissner/safe-apps-react-sdk

you should know that this package is deprecated and should be updated to this package: https://www.npmjs.com/package/@gnosis.pm/safe-apps-react-sdk

hope it helps!

// import the useSafe hook
import { useSafe } from "@rmeissner/safe-apps-react-sdk";

// Declare the useSafe function in your component
const safe = useSafe();

// You need to create a web3 instance if you don't already have one
const web3 = new Web3("https://rinkeby.infura.io/v3/token");
// get the contract ABI and address from the Etherscan page and create a contract instance
// you can create multiple contract instances if you want to interact with multiple contracts
const pancakeContract = new web3.eth.Contract(
const uniswapContract = new web3.eth.Contract(

// if you are only using one method from a contract and it's a standard method like approve you can declare the abi like this
const approveAbi = [
    inputs: [
      { internalType: "address", name: "spender", type: "address" },
      { internalType: "uint256", name: "amount", type: "uint256" },
    name: "approve",
    outputs: [{ internalType: "bool", name: "", type: "bool" }],
    stateMutability: "nonpayable",
    type: "function",

const txs = [
    to: pancakeContractAddress, // string
    // the value refers to the amount of BNB not the amount of pancake tokens
    value: "0",
    // find the method you want to call in this case, approve
    data: pancakeContract.methods.approve(spenderAddress, amount),
    to: uniswapContractAddress, // string,
    // the value refers to the amount of BNB not the amount of pancake tokens
    value: "0",
    // find the method you want to call in this case, approve
    data: uniswapContract.methods.approve(spenderAddress, amount),

try {
  const safeTxHashPC: string  = await safe.sendTransactions(txs[0]);
  const safeTxHashUni: string = await safe.sendTransactions(txs[1]);
} catch (err) {
  • okay this is a start thank you, i have some questions: first, the abi that i need to pass does it need to be dynamic for example i want to approve swap on Pancake which ABI do i need ERC20 or the one from the Pancake contract, and in the future if i add UniSwap will i need to retrieve the Uni ABI, second question i see that the value is 0, why is it 0 thank you
    – ezIlj
    Commented Dec 9, 2022 at 12:20
  • I have edited my answer to show you how you can use multiple contract instances, how to write an abi if you're only using one method, and how to use multiple transactions with this safeSDK. And as commented in the answer, the value of a transaction refers to the amount of the chain's native currency (BNB) you want to send. Not an ERC-20 token (like cake). The Amount of cake or uni you want to send will be passed to the approve method, not in the value. Commented Dec 9, 2022 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.