[General] Wallet integration with Rainbow or WalletConnect SDK for zksynic plugin doesn't work properly

[metehancaliskan]

Environment

Testnet

Provide a brief description of the functionality you're trying to implement.

I'm trying to implement wallet connection for Zksync Remix Plugin.

What is the specific issue or error you're encountering?

I faced with 3 issues.
First one: When I connect the wallet to website (remix plugin), Metamask said "no accounts connected" but the hook const {isConnected} = useAccount() returns "true".
Second one: When I try to copy account address, I face with error "DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document."
Last one: When I change so called connected account with unconnected account, Metamask doen't ask any connection question and I have to connect it manually.
To clarify issues I will drop the loom link: https://www.loom.com/share/c9359762ae75417495f0ad48899ec490?sid=60c276c8-c44f-47c1-ba16-0f79bde64feb

Can you share the error messages or logs you're receiving, if any?

NA

Have you made any recent changes to the contract before encountering this issue?

NA

Are there any external libraries or contracts that your contract interacts with?

I believe RemixClient Component breaks something inside the RainbowKit but I'm not sure about that. This is my first observation.

Can you provide the relevant portions of your contract code where the issue is occurring?

NA

Have you tried to isolate the problem, and if so, what were the results?

NA

What steps have you already taken to try to resolve the issue?

I tried to implement WalletConnect SDK instead of RainbowKit. Again, I faced with same error. Also, I thought it can be version control issue so I change the version but nothing changed. In my previous projects, I used RainbowKit so I have experiences with RainbowKit but this is my first time I face with a problem like that.

Repo Link (Optional)

No response

Additional Details

No response

[metehancaliskan]

If anybody wants to try to solve issue, they can use Nethermind Starknet-Plugin repo to test.
Link: https://github.com/NethermindEth/starknet-remix-plugin
In this repo, ArgentX and Braavos are used without any problem. Hence, If anybody can integrate metamask in this repo, it should work for Zksync plugin too

[dutterbutter]

@metehancaliskan just checking if this is still an issue / blocker?

[metehancaliskan]

No, we figured it out. I will documentize the solution in this form. Thank you for asking :)

[metehancaliskan]

Bug Documentation: XSS Issue with DApp in an Iframe

Overview:

This documentation addresses a Cross-Site Scripting (XSS) issue encountered when a decentralized application (DApp) is embedded within an Iframe. This issue is likely to arise in similar setups, and the following solutions have been identified and tested.

Reference:

For detailed background on the Iframe issue, please refer to this GitHub issue thread: MetaMask Extension Issue #9186

Solutions:

1. Ledger's Solution

Description: A solution developed by Ledger.
Details: The README provided with this solution is comprehensive and self-explanatory.
Limitation: Supports only Ledger Live Wallet.
Resource Link: Ledger Iframe Provider

2. Wagmi Configuration Solution

Description: An alternative solution involves modifying the wagmiConfig creation process.
Implementation:

const projectId = 'YOUR_PROJECT_ID';
const { chains, publicClient } = configureChains(
  [Testnet, Mainnet], // Replace with your working chains
  [walletConnectProvider({ projectId }), publicProvider()]
);
const metadata = {
  name: "YourAppName",
  description: "YourAppDescription",
  url: "YourAppURL",
  icons: ["YourAppIconURL"],
};
const wagmiConfig = createConfig({
  autoConnect: false,
  connectors: [
    new WalletConnectConnector({ chains, options: { projectId, metadata } }),
    new EIP6963Connector({ chains }),
    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
    new CoinbaseWalletConnector({ chains, options: { appName: metadata.name } }),
  ],
  publicClient,
});

• Usage: After configuring wagmiConfig, define the wallet object using import { useWalletClient } from 'wagmi'. This is the recommended method, but alternative connection methods can also be used.

Additional Notes

• It is important to test these solutions in your specific environment as configurations and requirements may vary.

• Community input and further suggestions for tackling this issue are welcome.

• Versions of dependencies: "@wagmi/core": "^1.4.6", "@web3modal/wagmi": "^3.2.1", "wagmi": "^1.4.6",