Uncaught (in promise) Error: Failed to decrypt

[onchainguy-btc]

We have issues with the migration on our rc site: https://rc-app.polychainmonsters.com

The modal properly opens but when scanning the QR code, the console will print the following error:

Uncaught (in promise) Error: Failed to decrypt
    at 2982.75fc87aedf28b3dc.js:20:26514
    at iP.decode (2982.75fc87aedf28b3dc.js:20:26557)
    at o.<anonymous> (2982.75fc87aedf28b3dc.js:20:92159)
    at o.emit (_app-c3785235a5093d37.js:248:192756)
    at iW.onMessageEvent (2982.75fc87aedf28b3dc.js:20:45933)
    at async iW.onProviderPayload (2982.75fc87aedf28b3dc.js:20:45780)

This can be reproduced using different wallets. This is how we integrate wallet connect:

import { Chain, configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, goerli, polygon, polygonMumbai, bscTestnet, bsc } from 'wagmi/chains';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { InjectedConnector } from 'wagmi/connectors/injected';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
import { JsonRpcProviderList, Web3ProviderTypes } from './web3-provider.types';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { SolanaWalletProvider } from './solana-wallet-connect';
import { generateJsonRpcProvider } from './utils';

const supportedChains = [mainnet, goerli, polygon, polygonMumbai, bsc, bscTestnet];

const ankrRpcProviderList: JsonRpcProviderList = [
  { id: mainnet.id, url: 'https://rpc.ankr.com/eth' },
  { id: goerli.id, url: 'https://rpc.ankr.com/eth_goerli' },
  { id: polygon.id, url: 'https://rpc.ankr.com/polygon' },
  { id: polygonMumbai.id, url: 'https://rpc.ankr.com/polygon_mumbai' },
  { id: bsc.id, url: 'https://rpc.ankr.com/bsc' },
  { id: bscTestnet.id, url: 'https://data-seed-prebsc-1-s1.binance.org:8545/' } // ankr unusable for bsc testnet
];

const chainlistProviderList: JsonRpcProviderList = [
  { id: mainnet.id, url: 'https://eth-rpc.gateway.pokt.network' },
  { id: goerli.id, url: 'https://eth-goerli.public.blastapi.io' },
  { id: polygon.id, url: 'https://polygon-bor.publicnode.com' },
  { id: polygonMumbai.id, url: 'https://polygon-testnet.public.blastapi.io' },
  { id: bsc.id, url: 'https://bsc-mainnet.public.blastapi.io' },
  { id: bscTestnet.id, url: 'https://data-seed-prebsc-1-s3.binance.org:8545/' }
];
const ankrProvider = generateJsonRpcProvider(ankrRpcProviderList);
const chainlistProvider = generateJsonRpcProvider(chainlistProviderList);

const apiKey = process.env.NEXT_PUBLIC_KEY_ALCHEMY as string;

const { chains, publicClient } = configureChains<Chain>(
  supportedChains,
  [...ankrProvider, ...chainlistProvider, publicProvider(), alchemyProvider({ apiKey })],
  {
    pollingInterval: 30_000,
    stallTimeout: 3000
  }
);

const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({
      chains
    }),
    new WalletConnectConnector({
      chains,
      options: {
        projectId: 'xxx',
        qrModalOptions: {
          //See https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/custom-wallets#custom-explorer-wallets - Metamask, Rainbow and TrustWallet
          explorerRecommendedWalletIds: [
            'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
            '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
            '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
          ],
          chainImages: null
        }
      }
    }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: 'xxx'
      }
    }),
    new InjectedConnector({
      chains,
      options: {
        name: 'Injected',
        shimDisconnect: true
      }
    })
  ],
  publicClient
});

export function Web3Provider({ children }: Web3ProviderTypes) {
  return (
    <WagmiConfig config={config}>
      <SolanaWalletProvider>{children}</SolanaWalletProvider>
    </WagmiConfig>
  );
}

[finessevanes]

@onchainguy-eth Hey could you include your package.json? Please make sure you're using the latest versions.

[glitch-txs]

Thanks @fnnhnsn your example works for me though, do you get the error on your side with this example?

Also, could you share your next.config.js file of your project?

[fnnhnsn]

@glitch-txs oh interesting, so you were able to connect a Trust Wallet via WalletConnect here? https://wallet-connect-example-cac87bee70d1.herokuapp.com/ I tried that with Trust Wallet on iOS, the latest version, and the confirmation within the wallet never popped up.
The example has no individual next.config, this is the one of our original project:

const withNx = require('@nrwl/next/plugins/with-nx');
const webpackConfig = require('./webpack.config');
const { i18n } = require('./next-i18next.config');
const date = new Date();
const packages = require('./package.json');
const path = require('path');

/** @type {import("next").NextConfig} */
const nextConfig = {
  output: 'standalone',
  experimental: {
    outputFileTracingRoot: path.join(__dirname, '../../')
  },
  i18n,
  reactStrictMode: true,
  swcMinify: true,
  poweredByHeader: false,
  optimizeFonts: false,
  devIndicators: {
    buildActivityPosition: 'bottom-left'
  },
  images: {
    domains: [process.env.IMAGE_DOMAINS]
  },
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development' ? { exclude: ['error'] } : false
  },
  env: {
    NEXT_PUBLIC_BUILD_TIME: date.toString(),
    NEXT_PUBLIC_BUILD_TIMESTAMP: +date,
    NEXT_PUBLIC_APP_NAME: packages.name,
    NEXT_PUBLIC_APP_VERSION: '2.0.0'
  },
  //Based on https://nextjs.org/docs/advanced-features/security-headers
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on'
          },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload'
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block'
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN'
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin'
          }
                 ]
      }
    ];
  },
  webpack: (config, options) => webpackConfig(config, options)
};

module.exports = withNx(nextConfig);

[glitch-txs]

Yes I was able to test with Trust Wallet and Rainbow, I was able to connect with both in Android.

Can you try removing swcMinify from next.config? Otherwise seems like what @nicolasbrugneaux shared could work as well, it's seems to be an issue with the bundler so far

[fnnhnsn]

Ah ok, that sounds like it might be an iOS issue. I'll try that today and will head back to you. Thanks a lot for your continuous support!

[fnnhnsn]

Turning off minification worked, thanks so much @glitch-txs @nicolasbrugneaux ! 🙏

[fnnhnsn]

@fnnhnsn I don't know your current build situation, and I don't know how important performance is to you, but weirdly enough, removing the minification part of our webpack build solved everything. There must be an issue there.

• Fix: stcelo v1 WC v2 fix attempts celo-org/staked-celo-web-app#140

Thanks a lot, that's a great tip! Will take a look at that one.

[nicolasbrugneaux]

Further findings:

Disabling swcMinify: false (so still minifies, but uses babel minifier) also solves the issue.

[nicolasbrugneaux]

cc @glitch-txs, I think you can mark it as answered, maybe it'll help more people. We could also keep this open until we figure out why swc provokes that error

[glitch-txs]

@nicolasbrugneaux thanks! I see you're using next v12 is that right? SWC seems to be set by default since v13, so maybe it could be related to an old issue that was fixed in the version update (just guessing).