React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.

Overview

MIT License


Logo

Ergo dApp Connector React Package

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Contributing
  5. License
  6. Contact

If you want to go directly to the installation and usage click here

About The Project

Many Open-Source dApps on top of Ergo have already developed their dApp connector. Every dApp has done it similarly but with some minor differences. New developers coming into Ergo will be able to avoid spending days developing and testing something that has already been done, giving them more time to focus on their specific project. This component contains the Ergo dApp Connector and can help new developers by adding the dApp Connector in a few clicks.

No dApp has implemented clearing wallet functionality to this date(30/05/2022), we believe this is a huge step in the Ergo ecosystem that improves user experience.

This idea came from an Ergo Community member suggesting creating more documentation regarding Ergo dApp Connection. He was having trouble with the dApp connector, and looking at the open-Source code was not enough. His suggestion made the Night Owl team believe that creating an Ergo dApp Connector during the ErgoHack would potentially be the most helpful tool for future developers coming to build on Ergo. We're hoping our open-source code helps other projects too!

Open-source is the way!

1. What is this package/library?

Ergo dApp Connector library for React came out of the necessity of various users while developing websites for their dApps. The package contains a component that is an Ergo dApp Connector, which means that by downloading it and calling it in your code, you will have handled the whole dApp Connection! Examples of how to do this will be demonstrated.

2. Who does it benefit?

It benefits new developers coming to build on Ergo who want to avoid dealing with the dApp Connection. Even if the developer didn’t want to use the package itself, he could access this package's public and open-source repository, understand how it is done line by line, and learn the process.

Built With

As mentioned it is a React Package, therefore React will be the JS library used for this package. Created using React version ^18.1.0.

(Back to top)

Getting Started

Here we will explain how to properly use the package.

Prerequisites

Although these are very obvious requisites, and surely installed by any web developer, they are:

  • Node.js
    https://nodejs.org/
  • npm (Although this is likely installed by installing Node)
    npm install [email protected] -g
  • Nautilus^0.4.0
    https://chrome.google.com/webstore/detail/nautilus-wallet/gjlmehlldlphhljhpnlddaodbjjcchai
  • SAFEW^0.6.3 (Still in development check safewImplementation branch.)
    https://chrome.google.com/webstore/detail/simple-and-fast-ergo-wall/fmpbldieijjehhalgjblbpgjmijencll/

Installation

How to install, import and use the Ergo dApp Connector in your code!

  • Install the package.
    npm install ergo-dapp-connector

(Back to top)

Usage

Quick video doing this steps

  • Import the dApp Connector in the .js file where you will be using it
    import {ErgoDappConnector} from "ergo-dapp-connector";
  • Call the component ErgoDappConnector that you just imported anywhere in your code where you want to display it.
    ">
    <ErgoDappConnector color="orange"/>

With the attribute "color" you can specify the color you want your "Connect Wallet" button to be! The current supported colors are:

orange
white
black
green
purple
blue
red
yellow
brown
pink
teal
cyan
coral
emerald
inkwell
darkred
darkgreen
darkblue
darkpurple
darkorange

Usage example

              

Visual example

(Back to top)

Extra

No project has ever implemented SAFEW as a wallet choice to connect to their dApp, we believe SAFEW deserve more love from the community, and since it has some fan base we decided to take the package a bit further than what our main goal was and implement Nautilus AND Safew compatibility, it will be a very nice addition to the Ergo dApp Connector and to the whole Ergo ecosystem, we are working alongside with Hailey(Safew creator) at the moment to make this happen, but we want to show a quick sneak peak of how testing is going here

The more wallets to choose, the better.

PS: However, as we stated before in the readme, the package is already working and can be used by everyone with Nautilus, the goal for ErgoHack was a success, this is just some extra implementation we wanted to mention for the ErgoHack submission.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue!

  1. Fork the Project
  2. Commit your Changes (git commit -m 'Add some Amazing Feature')
  3. Push to the Branch (git push origin feature/AmazingFeature)
  4. Open a Pull Request

(Back to top)

License

Distributed under the MIT License. See LICENSE file for more information.

(Back to top)

Contact

Night Owl - @NightOwlCasino

Night Owl Links - Linktr

Author Project Link: Night Owl Casino Github

(Back to top)

You might also like...
Buildspace-epic-nfts-ui - Project that will allow you to connect your wallet and mint an NFT, you will be able to resell the NFT on OpenSea
The Next-Gen Crypto Wallet

🅒🅖🅦 Coingrig Mobile Wallet Next-Gen Crypto Wallet. A powerful crypto wallet for everyone, unique features and open source Building Locally The code

In this tutorial, you'll learn to develop a wallet for the Solana protocol.
In this tutorial, you'll learn to develop a wallet for the Solana protocol.

Wallet Tutorial In this tutorial, you'll learn to develop a wallet for the Solana protocol. We will provide a simple Next.js application that you will

An NFT Marketplace React dApp demo on the Polygon blockchain with basic functionalities such as acquire and mint NFTs using ERC721 Smart Contract and Interplanetary File System IPFS.
An NFT Marketplace React dApp demo on the Polygon blockchain with basic functionalities such as acquire and mint NFTs using ERC721 Smart Contract and Interplanetary File System IPFS.

Polygon-NFT-marketplace generated from jellydn/dapp-starter Opinionated Dapp Starter Template Homepage - Marketplace NFT Minting Features The React Fr

A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains

Bounties 🌟 Please notice: If you have your own custom project and you want to r

The Elrond dApp Template, built using React.js and Typescript

@elrondnetwork/dapp-template The Elrond dApp Template, built using React.js and Typescript. It's a basic implementation of @elrondnetwork/dapp, provid

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js, React, Material Design and Typescript

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3-react (beta).

Deploy a dApp with RainbowKit, Ankr, React, and Chakra-UI
Deploy a dApp with RainbowKit, Ankr, React, and Chakra-UI

🧱 Prerequisites ☊ Node.js 🧵 Yarn 🖥 VS Code Set up our React App Run the following command in your terminal to install the blank project, change to

A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC

IoTeX dApp Sample V2 This is a boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains (request here) Techn

Owner
null
Ambire Wallet: A full featured non-custodial DeFi wallet that combines power, security and ease of use

localtunnel localtunnel exposes your localhost to the world for easy testing and

null 14.8k Sep 22, 2022
A highly scalable boilerplate with pre added web3 and different wallets

NFT-Dapp-Boilerplate Start your next dapp / defi project in seconds A highly scalable boilerplate with pre added web3 and different wallets with a foc

Green Lettel 6 May 21, 2022
Simple Ether Wallet DApp with React, Typescript, useDApp, Chakra UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Moinul Moin 3 Feb 9, 2022
Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Welcome to HashLips ?? All the code in these repos was created and explained by

EtherCluster 1 Jan 6, 2022
Create-dapp-solana-nextjs - Scaffolding for a Solana dapp using TS, Next.JS, Tailwinds CSS, and Daisy UI

Create Solana Dapp with Next.JS Want to start develop with Solana fetching NFTs

Thug DAO 285 Sep 26, 2022
This is a template for a Typescript-powered, redux-equipped, React application template supported by Eslint and other basic rules.

Getting Started with React-TS-Redux-App This project was bootstrapped with Create React App. What is it This is a template for Typescript powered, red

Sachintha 2 Oct 25, 2021
Dapp-core-components - A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

Elrond Network 4 Feb 6, 2022
ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

Reservoir Protocol 24 Sep 21, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Yoki 23 Aug 18, 2022
This is a web app that displays current stats of your favorite Premier League team.

Premstats This is a web app that displays current stats of your favorite Premier League team. Built With ReactJS Technologies used Redux React Router

Anuar Shaidenov 9 Jun 12, 2022