React Native Solana Magic RPC Error: [-32603] Internal error: Expected Buffer

[bmeeder22]

✅ Prerequisites

• [x] Did you perform a cursory search of open issues? Is this bug already reported elsewhere? https://github.com/magiclabs/magic-js/issues/87
• [x] Are you running the latest SDK version?
• [x] Are you reporting to the correct repository (magic-sdk)?

🐛 Description

When Signing Solana Transactions in a React Native app the RPC request will fail with the error:

 LOG  {"feePayer":"3QbZSyrxLsh3Jcuo5Xr5opoCeV5NfruBy8SVGHFVxGy2","instructions":[{"keys":[{"pubkey":"3QbZSyrxLsh3Jcuo5Xr5opoCeV5NfruBy8SVGHFVxGy2","isSigner":true,"isWritable":false},{"pubkey":"QfX7iD47JbWHvZAo4ByFm6BVq7dePr16Z9bEfzTCska","isSigner":false,"isWritable":true}],"programId":"76vzBwHg7GYZc6uKyzKvQb9NoZeALMvBVGdS5VJrcLs7","data":{"type":"Buffer","data":[3,218,52,49,1,41,52,49,1,5,54,49,1,177,50,49,1,52,47,49,1,55,52,49,1,175,50,49,1,82,54,49,1,0,0,0,0,0,0]}}],"recentBlockhash":"2hUMXihEUHrUsJb81ogtDdtd1FGWTdW7vhijNh1nWF6g","serializeConfig":{"requireAllSignatures":false,"verifySignatures":true}}

ERROR  [Error: Magic RPC Error: [-32603] Internal error: Expected Buffer]

🧩 Steps to Reproduce

1. Create a React Native App
2. Attempt to sign any solana transaction (transfer from the docs works well): https://magic.link/docs/advanced/blockchains/solana#sign-transaction
3. Attempt to actually run that code and it will fail.

🤔 Expected behavior

The transaction should be signed successfully.

😮 Actual behavior

The transaction fails with the error ERROR [Error: Magic RPC Error: [-32603] Internal error: Expected Buffer]

💻 Code Sample

It is really good to note that this EXACT same code works in a web browser with no problems. So this is an issue that is specific to React Native. I know to get Buffer there needs to be a use of polyfills, so my guess is the polyfills do not line up even thought they both serialize to the same JSON string/structure. Would love to get a workaround for this issue ASAP.

signTransaction: async (transaction) => {
      const serializeConfig = {
        requireAllSignatures: false,
        verifySignatures: true,
      };

      return (
        await magic.solana.signTransaction(
          transaction,
          serializeConfig
        )
      ).rawTransaction;
    },
  };

🌎 Environment

Software	Version(s)
@magic-sdk/react-native	7.0.0
@magic-ext/solana	3.0.1
Browser	react native
yarn	1.22.17
Operating System	ios 15

[bmeeder22]

Created a example project to demo the issue: https://github.com/bmeeder22/solana_magic_demo

[Ethella]

Here's some conclusion for the Buffer expected issue.

The root cause for this is during the communication of RN to our relayer, the payload with buffer object is not properly serialized / de-serialized during the payload transaction. So in which case, you'll find it works in a browser but not on RN.

We'll have to spend some more time to figure out an optimal way to solve this problem once for all.

[bmeeder22]

@Ethella thanks for taking an initial look! We already have magic live on our site everything working well there. Right now we are trying to launch mobile as soon as possible. Any ideas on timelines that we can expect for when you will be free to take a deeper dive on this?

Since this is super high priority for us we are happy to assist in any way. Would also be happy to setup a private channel for us to collaborate on the issue.

[Ethella]

If it does not involve extra complexity, I think I can wrap it up this week.

[smithki]

:rocket: Issue was released in @magic-ext/react-native-oauth@2.1.0, @magic-sdk/react-native@8.1.0 :rocket:

[bmeeder22]

Hey @Ethella @smithki

I am testing this fix using the demo application that I created and shared in the ticket. Even after pulling in "@magic-sdk/react-native": "8.1.0" and "@magic-ext/solana": "4.0.1" I am still getting the exact name issue.