[bug] Custom wallet qr code steps are being translated unsuccessfuly

[midas-myth]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.0.1

wagmi Version

2.5.7

Current Behavior

When creating custom wallet (binance for example) using the following logic

export default function binanceWallet(): Wallet {
  return {
    id: "binance",
    name: "Binance Web3 Wallet",
    iconUrl: async () => (await import("./binanceWallet.svg")).default,
    iconAccent: "#1E1E1E",
    iconBackground: "#1E1E1E",
    qrCode: {
      getUri: (arg) => arg,
      instructions: {
        learnMoreUrl: "http://example.com",
        steps: [
          {
            // Highlight on here
            description: "My custom step description",
            step: "install",
            title: "My custom step title",
          },
        ],
      },
    },
    createConnector: () => injected({}),
  };
}

In the UI I get

[missing: "en-US.My custom step title" translation]
[missing: "en-US.My custom step description" translation]

Expected Behavior

This is only my opinion but I think there are multiple solutions:

1. Do not translate custom wallet steps. (Not sure if its technically posible).
2. Expose i18n interface from rainbowkit so one could: a) patch it b) provide fallback c) provide a custom t function

Steps To Reproduce

function binanceWallet() {
  return {
    id: "binance",
    name: "Binance Web3 Wallet", 
    iconAccent: "#1E1E1E",
    iconBackground: "#1E1E1E",
    qrCode: {
      getUri: (arg) => arg,
      instructions: {
        learnMoreUrl: "http://example.com",
        steps: [
          {
            description: "My custom step description",
            step: "install",
            title: "My custom step title",
          },
        ],
      },
    },
    createConnector: getWalletConnectConnector({
      projectId: "...",
    }),
  };
}

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

https://codesandbox.io/p/sandbox/rainbowkit-forked-pz4x97?file=%2Fsrc%2FApp.js%3A30%2C43

Anything else?

[magiziz]

@midas-myth Thanks for raising this issue. Yeah this is a common problem, since we need to include the translations in the RainbowKit repo for all languages. Do you mind raising a PR to the main branch and we can add the translations on our end + add binanceWallet ?

[midas-myth]

Binance seems to have a rainbowkit connector, but its not compatible with v 2.x i guess.
https://www.npmjs.com/package/@binance/w3w-rainbow-connector
I could not find the source code, but in npm sources i noticed they used deprecated features
https://www.npmjs.com/package/@binance/w3w-rainbow-connector?activeTab=code -> src -> index.ts

Do we want to add a new binance wallet?
It seems like this would not solve the custom translations issue

[magiziz]

@midas-myth Got it. Yeah you're right this won't solve the translation issue. For now if you want to add a wallet to RainbowKit with steps you'd have to raise a PR to our main branch so you wouldn't get any bugs. In the meantime we will look at how we can make this more user friendly so you wouldn't need to raise a PR in the future.