Can I open QR code in Mobile with WalletConnect SDK?

Coinbase Wallet
1

Hello experts,

I want to show the QR code on the iPad. My plan is for people to scan my QR code with their Coinbase Mobile App and connect. Will do some background process then will disconnect from there wallet.
After that, a new QR code will be generated. A new QR can be generated because reloadOnDisconnect is true by default. It’s like a walk-in event registration process. Is it possible to do this without using any Third Party Library (like: wagmi, web3modal etct.)?

I only wanted to use Coinbase Wallet SDK (CWS). Please let me know if it is possible. if it’s not possible with the CWS, then how can I achieve that?

Using
“next”: “14.0.1”,
“react”: “^18”,
“react-dom”: “^18”,
“@coinbase/wallet-sdk”: “^3.7.2”,

Here is the small code I have done so far.

const APP_NAME = "Coinbase Project";
const APP_LOGO_URL = "";
const INFURA_ID = process.env.INFURA_ID;
const INFURA_RPC_URL = `https://mainnet.infura.io/v3/${INFURA_ID}`;
const DEFAULT_CHAIN_ID = 1;

// Coinbase Wallet Provider
export const getCoinbaseWalletProvider = () => {
  const coinbaseWallet = new CoinbaseWalletSDK({
    appName: APP_NAME,
    appLogoUrl: APP_LOGO_URL,
  });
  return coinbaseWallet.makeWeb3Provider(INFURA_RPC_URL, DEFAULT_CHAIN_ID);
};

export const getQrURL = () => {
  const coinbaseWallet = new CoinbaseWalletSDK({
    appName: APP_NAME,
    appLogoUrl: APP_LOGO_URL,
  });
  return coinbaseWallet.getQrUrl();
};
export const coinbaseLogo = () => {
  const coinbaseWallet = new CoinbaseWalletSDK({
    appName: APP_NAME,
    appLogoUrl: APP_LOGO_URL,
  });
  return coinbaseWallet.getCoinbaseWalletLogo("circle", 50);
};

Thanks.

2

Hello @arafhossain! Thank you for being part of this forum community and apologies for the delay.
Please be informed that yes, it is possible to achieve your use case without using third-party libraries. You can use the Coinbase Wallet SDK (CWS) to create a QR code that users can scan with their Coinbase Mobile App to connect to your wallet. However, you will need to handle the background process of disconnecting from the wallet and generating a new QR code after the initial connection.Here’s a high-level overview of how you can implement this:

  1. Generate a QR code using the getQrUrl function from the Coinbase Wallet SDK:
const qrCodeUrl = getQrUrl();
  1. Display the QR code on your iPad and instruct users to scan it with their Coinbase Mobile App.
  2. When a user scans the QR code and connects to your wallet, you will need to handle the background process of disconnecting from the wallet and generating a new QR code using the reloadOnDisconnect option:
const newQrCodeUrl = getQrUrl({ reloadOnDisconnect: true });
  1. After the initial connection, you can display the new QR code and instruct users to scan it with their Coinbase Mobile App to reconnect to your wallet.

Please note that the provided code snippet is just a starting point, and you may need to handle error cases, user authentication, and other edge cases to ensure a smooth user experience.

We hope this helps. Have a good one!