How to migrate custom wallet to rainbowkit v2 beta? (new wallet not showing)

[thatguyintech]

Currently going through rainbowkit v2 beta upgrade: https://beta.rainbowkit.com/guides/rainbowkit-wagmi-v2

My main hangup is that right now we built a custom Tokenproof wallet integration (they're not actually meant to be a wallet but we wanted to include tokenproof as a rainbowkit-native UX pattern), and I haven't been able to get the Tokenproof option to show up in the wallet display.

This is the rough structure of our custom setup: https://gist.github.com/thatguyintech/834a150fdb28b1522161fd275307433d

This is what it looks like with our rainbowkit v1 implementation:

With rainbowkit v2 the option is not showing up:

Any ideas on what I might be doing wrong? Could be a wagmi/viem issue too that I'm not catching?

[thatguyintech]

ok ended up figuring this out by copying one of the reference wallet implementations (i.e. coinbaseWallet), and then re-porting over the custom connector logic and properties

it turns out, my main issue was that I wasn't adhering to the eip6963 spec for the icon image uri:

// uri-encoded svg image of tokenproof logo
// follows eip-6963: https://eips.ethereum.org/EIPS/eip-6963#imagesicons
const tokenproofIconUri = `data:image/svg+xml,%0A%3Csvg%20width%3D%22126%22%20height%3D%22126%22%20viewBox%3D%220%200%20126%20126%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Crect%20width%3D%22125.882%22%20height%3D%22125.882%22%20rx%3D%2226.0444%22%20fill%3D%22%232665FF%22/%3E%0A%3Cpath%20d%3D%22M72.3529%20103.832L66.8214%20103.585C67.57%2087.8538%2072.0409%2077.0232%2080.3589%2071.3815C83.4866%2069.3718%2087.0121%2068.0473%2090.6989%2067.4969C94.3858%2066.9465%2098.1489%2067.1828%20101.736%2068.19L100.01%2073.4405C97.2148%2072.6853%2094.2911%2072.5168%2091.4263%2072.9459C88.5614%2073.3749%2085.8188%2074.392%2083.3741%2075.932C76.699%2080.5648%2072.9767%2089.954%2072.3321%20103.852%22%20fill%3D%22white%22/%3E%0A%3Cpath%20d%3D%22M31.7233%2059.5686C29.3247%2059.5873%2026.9361%2059.2334%2024.6318%2058.5179L26.2299%2053.1357C28.9151%2053.9221%2031.7237%2054.0976%2034.4757%2053.6508C37.2277%2053.204%2039.8624%2052.1448%2042.2107%2050.5411C48.6031%2045.6735%2052.1588%2035.9812%2052.798%2021.3999L58.0917%2021.6787C57.3925%2038.1255%2053.0377%2049.3188%2045.1672%2055.28C41.2011%2058.1544%2036.5081%2059.6515%2031.7233%2059.5686%22%20fill%3D%22white%22/%3E%0A%3Cpath%20d%3D%22M94.3234%2059.5695C89.3573%2059.6419%2084.489%2058.1452%2080.3742%2055.2808C72.0463%2049.3195%2067.5701%2038.126%2066.8206%2021.6788L72.3586%2021.4C73.004%2035.8744%2076.7307%2045.6741%2083.4139%2050.4989C85.8614%2052.1026%2088.6073%2053.1618%2091.4756%2053.6087C94.3438%2054.0555%2097.2711%2053.88%20100.07%2053.0935L101.735%2058.5187C99.3264%2059.234%2096.8302%2059.5878%2094.3234%2059.5695Z%22%20fill%3D%22white%22/%3E%0A%3Cpath%20d%3D%22M52.798%20103.852C52.1587%2089.9252%2048.603%2080.5513%2042.1707%2075.9159C39.826%2074.3843%2037.1975%2073.3734%2034.4528%2072.9478C31.7082%2072.5221%2028.9077%2072.691%2026.2299%2073.4437L24.6318%2068.1902C28.0776%2067.1824%2031.6926%2066.946%2035.2343%2067.4967C38.776%2068.0474%2042.1626%2069.3726%2045.1671%2071.3835C53.0377%2077.0284%2057.3925%2087.865%2058.0916%20103.605L52.798%20103.852Z%22%20fill%3D%22white%22/%3E%0A%3C/svg%3E%0A`;

...

    createConnector: (_: WalletDetailsParams) => {
      return createConnector((config) => ({
        icon: appIcon || tokenproofIconUri,
        id: "tokenproof",
        name: appName || "Tokenproof",
        type: "tokenproof" as const, // todo: not sure what this type is for

Adding that data:image/svg+xml, and properly encoding my svg asset fixed the issue!

TLDR; if your custom wallet implementation isn't showing up, make sure to start backwards from an already-working implementation and then modify to support your custom wallet logic.

[magiziz]

Hey @thatguyintech. I tried debugging your connector and it seemed like you just needed one line of code at the end of your connector:

export const tokenproofConnector = (
  _: TokenproofParameters
): CreateConnectorFn => {
  return createConnector((config) => ({
    ...allYourConnectorLogic,
    ..._, // this line
  }));
};

Just had a look at it rn and it seems like even if you specify the wrong icon it should work regardless so wondering how you fixed that 😅 ?

The reason we need the spread operator when you're making a connector is because we append that data during the time when your app mounts. Remember we ourselves append that data into the connectors via connectorsForWallets function so it'll be easy to manage during the wallet connection process.

[thatguyintech]

Hey @kosmoskey thanks for the response!!

I tried adding the..._, spread operator both before and after ..allMyConnectorLogic and it seemed to cause some issues with icon loading and unexpected behavior when switching accounts via browser extension wallet

[magiziz]

Mhmm that's seems weird. Is the switching account this the issue you're talked about ? #1752

Also regarding issues with icons what are you currently seeing ? If it's a https url then it might take some time, but should be fine with svg.

You can also look at our example wallet here (bitski wallet).

I also tried copying your exact code i just edited the ..._ line and added svg icon and worked on my end.

[gaboesquivel]

Amazing thanks for working on this