@thirdweb-dev/wallets
Version:
<p align="center"> <br /> <a href="https://thirdweb.com"><img src="https://github.com/thirdweb-dev/js/blob/main/legacy_packages/sdk/logo.svg?raw=true" width="200" alt=""/></a> <br /> </p> <h1 align="center">thirdweb Wallet SDK</h1> <p align="center"> <a h
235 lines (223 loc) • 8.24 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../../../../dist/defineProperty-b749763b.cjs.prod.js');
var connector = require('../../../../dist/connector-1b2fa06d.cjs.prod.js');
var evm_wallets_base_dist_thirdwebDevWalletsEvmWalletsBase = require('../../../../dist/base-5085b4d0.cjs.prod.js');
var walletIds = require('../../../../dist/walletIds-6ed32bf4.cjs.prod.js');
var wc = require('../../../../dist/wc-cfed8885.cjs.prod.js');
var getInjectedMetamaskProvider = require('../../../../dist/getInjectedMetamaskProvider-23e5a63c.cjs.prod.js');
require('eventemitter3');
require('@thirdweb-dev/chains');
require('../../abstract/dist/thirdweb-dev-wallets-evm-wallets-abstract.cjs.prod.js');
require('ethers');
require('@thirdweb-dev/sdk');
require('../../../../dist/headers-140df57f.cjs.prod.js');
require('../../../../dist/assertWindowEthereum-941010de.cjs.prod.js');
/**
* Wallet interface for connecting to [MetaMask Wallet](https://metamask.io/) extension or mobile app.
*
* @example
* ```ts
* import { MetaMaskWallet } from "@thirdweb-dev/wallets";
*
* async function connectMetaMask() {
* const wallet = new MetaMaskWallet();
* await wallet.connect();
* }
* ```
*
* @wallet
*/
class MetaMaskWallet extends evm_wallets_base_dist_thirdwebDevWalletsEvmWalletsBase.AbstractClientWallet {
/**
* @internal
*/
get walletName() {
return "MetaMask";
}
/**
* @param options -
* The `options` object contains the following properties:
*
* ### clientId (recommended)
* Provide clientId to use the thirdweb RPCs for given chains
* You can create a client ID for your application from thirdweb dashboard.
*
* Provide `clientId` to use the thirdweb RPCs for given `chains`
*
* You can create a client ID for your application from [thirdweb dashboard](https://thirdweb.com/create-api-key).
*
* ### projectId (recommended)
* This is only relevant if you want to use [WalletConnect](https://walletconnect.com/) for connecting to MetaMask mobile app when MetaMask is not injected.
*
* This `projectId` can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com/). It is highly recommended to use your own project id and only use the default one for testing purposes.
*
* ### chains (optional)
* Provide an array of chains you want to support.
*
* Must be an array of `Chain` objects, from the [`@thirdweb-dev/chains`](https://www.npmjs.com/package/\@thirdweb-dev/chains) package.
*
* Defaults to `defaultChains` ( `import { defaultChains } from "@thirdweb-dev/chains"` )
*
*
* ### dappMetadata (optional)
* Information about your app that the wallet will display when your app tries to connect to it.
*
* Must be an object containing `name`, `url`, and optionally `description` and `logoUrl` properties.
*
* ```javascript
* import { MetaMaskWallet } from "@thirdweb-dev/wallets";
*
* const walletWithOptions = new MetaMaskWallet({
* dappMetadata: {
* name: "thirdweb powered dApp",
* url: "https://thirdweb.com",
* description: "thirdweb powered dApp",
* logoUrl: "https://thirdweb.com/favicon.ico",
* },
* });
* ```
*
* ### qrcode (optional)
* Whether to display the Wallet Connect QR code Modal for connecting to MetaMask on mobile if MetaMask is not injected.
*
* Must be a `boolean`. Defaults to `true`.
*
* ### qrModalOptions
* options to customize the Wallet Connect QR Code Modal ( only relevant when qrcode is true )
*/
constructor(options) {
super(MetaMaskWallet.id, options);
this.isInjected = !!getInjectedMetamaskProvider.getInjectedMetamaskProvider();
}
async getConnector() {
if (!this.connector) {
// if metamask is injected, use the injected connector
// otherwise, use the wallet connect connector for using the metamask app on mobile via QR code scan
if (this.isInjected) {
// import the connector dynamically
const {
MetaMaskConnector
} = await Promise.resolve().then(function () { return require('../../../connectors/metamask/dist/thirdweb-dev-wallets-evm-connectors-metamask.cjs.prod.js'); });
const metamaskConnector = new MetaMaskConnector({
chains: this.chains,
connectorStorage: this.walletStorage,
options: {
shimDisconnect: true
}
});
this.metamaskConnector = metamaskConnector;
this.connector = new connector.WagmiAdapter(metamaskConnector);
} else {
const {
WalletConnectConnector
} = await Promise.resolve().then(function () { return require('../../../connectors/wallet-connect/dist/thirdweb-dev-wallets-evm-connectors-wallet-connect.cjs.prod.js'); });
const walletConnectConnector = new WalletConnectConnector({
chains: this.chains,
options: {
projectId: this.options?.projectId || wc.TW_WC_PROJECT_ID,
// TODO,
storage: this.walletStorage,
qrcode: this.options?.qrcode,
dappMetadata: this.dappMetadata,
qrModalOptions: this.options?.qrModalOptions
}
});
walletConnectConnector.getProvider().then(provider => {
provider.signer.client.on("session_request_sent", () => {
this.emit("wc_session_request_sent");
});
});
// need to save this for getting the QR code URI
this.walletConnectConnector = walletConnectConnector;
this.connector = new connector.WagmiAdapter(walletConnectConnector);
}
}
return this.connector;
}
/**
* Connect to the MetaMask wallet using a QR code if the user does not have the Metamask extension installed.
*
* You can use this method to display a QR code. User can scan the QR code from the MetaMask mobile app to connect to your dapp.
*
* @example
* ```typescript
* metamask.connectWithQrCode({
* chainId: 1,
* onQrCodeUri(qrCodeUri) {
* // render the QR code with `qrCodeUri`
* },
* onConnected(accountAddress) {
* // update UI to show connected state
* },
* })
* ```
*
* @param options -
* The options object contains the following properties/method:
*
* ### chainId (optional)
* If provided, MetaMask will prompt the user to switch to the network with the given `chainId` after connecting.
*
* ### onQrCodeUri
* A callback to get the QR code URI to display to the user.
*
* ### onConnected
* A callback that is called when the user has connected their wallet using the QR code.
*/
async connectWithQrCode(options) {
await this.getConnector();
const wcConnector = this.walletConnectConnector;
if (!wcConnector) {
throw new Error("WalletConnect connector not found");
}
const wcProvider = await wcConnector.getProvider();
// set a listener for display_uri event
wcProvider.on("display_uri", uri => {
options.onQrCodeUri(uri);
});
// trigger connect flow
this.connect({
chainId: options.chainId
}).then(options.onConnected);
}
/**
* MetaMask extension on desktop supports switching accounts.
* This method will trigger the MetaMask extension to show the account switcher Modal
*/
async switchAccount() {
if (!this.metamaskConnector) {
throw new Error("Can not switch Account");
}
await this.metamaskConnector.switchAccount();
}
}
/**
* @internal
*/
/**
* @internal
*/
/**
* @internal
*/
/**
* @internal
*/
/**
* @internal
*/
defineProperty._defineProperty(MetaMaskWallet, "meta", {
name: "MetaMask",
iconURL: "ipfs://QmZZHcw7zcXursywnLDAyY6Hfxzqop5GKgwoq8NB9jjrkN/metamask.svg",
urls: {
chrome: "https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn",
android: "https://play.google.com/store/apps/details?id=io.metamask",
ios: "https://apps.apple.com/us/app/metamask-blockchain-wallet/id1438144202"
}
});
/**
* @internal
*/
defineProperty._defineProperty(MetaMaskWallet, "id", walletIds.walletIds.metamask);
exports.MetaMaskWallet = MetaMaskWallet;