Confirm a multisg transaction via the safe-apps-react-sdk

Question

I am building a Safe App (Apps in the lateral navbar --> My custom app) which is a basic React app.

My custom Safe app allows a UserA to send a transaction and UserB to sign/confirm it. Basically a 2 out of 2 multi-sig where a party sends a transaction, and the other party signs it.

The UserA can send the transaction via React using the safe-apps-react-sdk (https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-react-sdk) Example:

const { safe } = useSafeAppsSDK();

const txs = [
        {
          to: address,
          value: 10,
          data: "0x", 
        },
      ];

const txResponse = await sdk.txs.send({ txs });

I am struggling to understand how UserB (the confirmation party) can confirm the transaction via the safe-apps-react-sdk. UserA and UserB are using two different machines with different Browsers. Example: UserA (in the USA) uses a Mac with Chrome and UserB (in Germany) uses a Windows on Chrome.

I understand this is possible using the safe-apps-sdk, but this is for the backend, requiring NodeJs. I need to use safe-apps-react-sdk because I want to do everything via the frontend.

Answer 1

I think this is not the right way but you can do the following

Or you can just ditch the idea of using safe-react-sdk and manually send the transaction and signature. For that, you need to create a safe instance on your own and hit the execTransaction function which has around 6-7 parameters, including signature.

Whenever user A signs you just keep the signature in the redux or any storage and when user B signs, concatenate the signature and hit the execTransaction function.

If safe-react-sdk provides you the functionality to send a signature along with the transaction then you can store the signature, concatenate it, and pass it with your transaction