Can not pass data from snap to dapp with await

[pranavcpawar]

I'm working on a project where I'm creating a snap that generates a QR code string and then passes it to a dApp. To achieve this, I made a separate file called sdk.ts and imported it into index.tsx. However, I encountered the below error.

export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {
  switch (request.method) {
    case 'pairing': {
      await snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Text>Happy to have you on board! 🚀</Text>
            </Box>
          ),
        },
      });
      const qr = await sdk.initPairing();

      return { qrCode: qr };
    }
    default:
      throw new Error('Method not found.');
  }
};

Additionally, when I use this statement const qr = "hello world!" instead of this const qr = await sdk.initPairing() it's working fine.

[ziad-saab]

@pranavcpawar can you provide more details on what sdk.initPairing() does? ideally can you share a link to a code repository that we can review?

[pranavcpawar]

hey @ziad-saab sir any updates?

[Mrtenz]

Hi @pranavcpawar, it seems like something in your initPairing function gets stuck or throws an error. Could you send a minimal reproduction so I can debug further?

[ziad-saab]

Hey @pranavcpawar,

To use the createECDH function in your code, or anything else from the crypto module, you have to have polyfills enabled in your Snap configuration.

If that fails or is already done, can you please provide a link to your complete source code so I can review further?

[pranavcpawar]

Hi @pranavcpawar, it seems like something in your initPairing function gets stuck or throws an error. Could you send a minimal reproduction so I can debug further?

GM, @Mrtenz yeah sure
https://github.com/pranavcpawar/qr-snap

[pranavcpawar]

Hey @pranavcpawar,

To use the createECDH function in your code, or anything else from the crypto module, you have to have polyfills enabled in your Snap configuration.

If that fails or is already done, can you please provide a link to your complete source code so I can review further?

GM @ziad-saab sir, I'm using libsodium-wrappers
here's the codebase https://github.com/pranavcpawar/qr-snap

[ziad-saab]

Hey @pranavcpawar ,

I tried removing your import _sodium from 'libsodium-wrappers'; and replacing it with a dynamic const _sodium = (await import("libsodium-wrappers")).default (in the functions), and I got it to work.

I don't know why it works this way and not with a regular import. I will get back to you on that, but meanwhile I hope this can unblock you.

[FrederikBolding]

Since libsodium-wrappers uses WebAssembly under the hood, you will need to request the endowment:webassembly permission as part of your snap.manifest.json: https://docs.metamask.io/snaps/reference/permissions/#endowmentwebassembly

After making that change, I was able to run a Snap with libsodium-wrappers imported.