npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wiicamp/decentraland-connect

v0.0.1-development

Published

<img src="https://ui.decentraland.org/decentraland_256x256.png" height="128" width="128" />

Downloads

2

Readme

Decentraland Connect

Connect to the Ethereum network with ease

Table of contents

API

The API surface is fairly small, you'll mainly be using the exported connection object, which is an instance of the also exported ConnectionManager using the default LocalStorage.

ConnectionManager

Handles the connection to the Ethereum network. It takes a Storage as the only argument, which will be used to store the last used connection.

.connect()

Connects to the supplied provider type and chain. It'll default to mainnet if no chain is supplied. After a successfull call the params will be stored using the supplied Storage, which will allow you to call tryPreviousConnection().

Definition

async connect(
  providerType: ProviderType,
  chainId: ChainId = ChainId.ETHEREUM_MAINNET
): Promise<ConnectionResponse>

Usage

const connection = new ConnectionManager(new Storage())
await connection.connect(ProviderType.INJECTED, ChainId.ETHEREUM_ROPSTEN)

.tryPreviousConnection()

Will try to connect to the provider and chain stored from the last successfull .connect(). It'll throw otherwise.

Definition

async tryPreviousConnection(): Promise<ConnectionResponse>

Usage

// Calls connect first
const connection = new ConnectionManager(new Storage())
await connection.connect(ProviderType.INJECTED, ChainId.ETHEREUM_ROPSTEN)

await connection.tryPreviousConnection() // Connects with ProviderType.INJECTED ChainId.ETHEREUM.ROPSTEN

.disconnect()

Disconnects the previous connection and clears the storage. It'll do nothing if no connection is found.

Definition

async disconnect()

Usage

const connection = new ConnectionManager(new Storage())
connection.connect(ProviderType.INJECTED, ChainId.ETHEREUM_ROPSTEN)

// (...)

connection.disconnect()

.getConnectionData()

Returns the data used for the last successfull .connect() call. It's used by .tryPreviousConnection to determine which connection to use. Check ConnectionData for more info on the returned type

Definition

getConnectionData(): ConnectionData | undefined

Usage

const connection = new ConnectionManager(new Storage())
connection.connect(ProviderType.INJECTED, ChainId.ETHEREUM_ROPSTEN)

// (...)

const connectionData = connection.getConnectionData() // => connectionData is ConnectionData

.getAvialableProviders()

Returns the providers available for connection. If for example no window object is found, ProviderType.INJECTED will not be returned on the list

Definition

getAvailableProviders(): ProviderType[]

Usage

connection.getAvailableProviders()

.getProvider()

Get's the currently connected provider. It'll throw if no connection was made, similar to calling .connect() without params the first time

Definition

async getProvider(): Promise<Provider>

Usage

const provider = await connection.getProvider()

.createProvider()

It creates a new provider using the supplied arguments. Similar to calling .connect() but without actually connecting.

Definition

async createProvider(
  providerType: ProviderType,
  chainId: ChainId = ChainId.ETHEREUM_MAINNET
): Promise<Provider> {

Usage

const provider = await connection.createProvider(
  Provider.FORTMATIC,
  ChainId.ETHEREUM_ROPSTEN
)

connection

Instance of ConnectionManager, using LocalStorage as it's internal storage engine, which translates to:

export const connection = new ConnectionMager(new LocalStorage())

Storage

Abstract class that defines the methods needed to create a new Storage engine. It only defines two methods:

abstract get(key: string): any | undefined
abstract set(key: string, value: any): void
abstract clear(): void

LocalStorage

An implementation of the Storage engine which uses window.localStorage to store data

Types

ProviderType

Represents the different types of connectors to the Ethereum Network

enum ProviderType {
  INJECTED = 'injected',
  FORTMATIC = 'formatic',
  NETWORK = 'network'
  WALLET_CONNECT = 'wallet_connect'
}

ChainId

Different Ethereum chains

enum ChainId {
  ETHEREUM_MAINNET = 1,
  ETHEREUM_ROPSTEN = 3,
  ETHEREUM_RINKEBY = 4,
  ETHEREUM_GOERLI = 5,
  ETHEREUM_KOVAN = 42,
  MATIC_MUMBAI = 13881,
  MATIC_MAINNET = 89
}

ConnectionResponse

type ConnectionResponse = {
  provider: Provider
  chainId: ChainId
  account: null | string
}

ConnectionData

type ConnectionData = {
  providerType: ProviderType
  chainId: ChainId
}

Example

import {
  connection,
  ConnectionResponse,
  ProviderType,
  ChainId
} from 'decentraland-connect'

async function connect() {
  let result: ConnectionResponse
  try {
    result = await connection.connect() // this will throw if no successful connect was called before
  } catch (error) {
    result = await connection.connect(ProviderType.FORTMATIC, ChainId.MAINNET)
  }
  return result
}

// If you're using something like React, you could do something like this (after trying a `.connect()`)
function showAvailableProviders() {
  const handleConect = useCallback((provider: ProviderType) =>
    connection.connect(provider, ChainId.MAINNET)
  )
  return connection
    .getAvailableProviders()
    .map(provider => (
      <div onClick={() => handleConnect(provider)}>{provider}</div>
    ))
}

Development

To run the project you simply need to

npm i
npm run test
npm run build

you can also check the test report using

npm run test:report

Copyright

This repository is protected with a standard Apache 2 license. See the terms and conditions in the LICENSE file.