search

rainbow-me / rainbowkit

The best way to connect a wallet 🌈 🧰
https://rainbowkit.com
MIT License
2.45k stars 667 forks source link

[bug] SVG encoding in wallet connector icons is incorrect in distributed package #2237

Open CruzMolina opened 3 weeks ago

CruzMolina commented 3 weeks ago

Is there an existing issue for this?

RainbowKit Version

2.1.7

wagmi Version

2.12.17

Current Behavior

Description

The SVG data URLs in the distributed wallet connector icons are not properly URL-encoded, causing issues with coolMode.

Current Behavior

In the distributed package (straight from npm), SVG data URLs are not encoded:

// note <g clip-path="url(%23a)"> & <g filter="url(%23b)">
var krakenWallet_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><g clip-path="url(%23a)"><rect width="512" height="512" fill="%237132F5" rx="114.5"/><g filter="url(%23b)">...';

Expected Behavior

Expected Behavior

The SVGs should either be URL-encoded:

// note <g clip-path="url(#a)"> & <g filter="url(#b)">
var krakenWallet_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><g clip-path="url(#a)"><rect width="512" height="512" fill="%237132F5" rx="114.5"/><g filter="url(#b)">...';

Or preferably base64 encoded:

var krakenWallet_default = 'data:image/svg+xml;base64,' + btoa(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><g clip-path="url(#a)"><rect width="512" height="512" fill="#7132F5" rx="114.5"/><g filter="url(#b)">...`)';

Steps To Reproduce

Reproduction

  1. Install @rainbow-me/rainbowkit.
  2. Examine node_modules/@rainbow-me/rainbowkit/dist/wallets/walletConnectors/krakenWallet-DAOXUKWO.js.
  3. Observe that SVG special characters are not encoded.

Environment

Let me know if you need any additional information or would like me to test potential solutions.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

It seems likely that esbuild's dataurl loader is converting the SVGs to data URLs but not properly handling the encoding. https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/build.js#L35

If that's the case, could be fixable using a custom esbuild loader for SVGs to properly handle the encoding, or possibly by modifying the dataurl loader config.

krakenWallet is not the only wallet connector affected, walletConnectWallet is as well and possibly others.