[FEATURE] <dev-connection> #126

Detailed description

Provide a wallet connection pool for other components (#119, #118, and others) by declaring the HTML as follows:

<dev-connection id="USER_DEFINED_ID"></dev-connection>

dev-connection element has the following type declaration:

import { ethers } from 'ethers'
import { BehaviorSubject } from 'rxjs'

class DevConnection extends HTMLElement {
    public signer: BehaviorSubject<typeof ethers.Signer | undefined>
    public provider: BehaviorSubject<typeof ethers.Provider | undefined>
    public accounts: BehaviorSubject<string[] | undefined>
    public chain: BehaviorSubject<number | undefined>
}

Therefore, the external component can utilize the wallet connection instance from JavaScript as follows:

const connection = document.getElementById("USER_DEFINED_ID");
connection.signer.subscribe(console.log); // Signer instance of Ethers.js
connection.provider.subscribe(console.log); // Provider instance of Ethers.js
connection.accounts.subscribe(console.log); // the connected accounts
connection.chain.subscribe(console.log); // the connected chain id

Context

This element is needed to keep a common wallet connection from multiple Web Components declared in HTML.

Possible implementation

No response

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct