Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@elrondnetwork/dapp
Advanced tools
The npm package of the Elrond Dapp core components, built using React.js and Typescript. This library will help you authenticate users and provide a straight foreward way to execute transactions on the Elrond blockchain.
See Dapp template for live demo or checkout usage in the Github repo
npm:
npm install @elrondnetwork/dapp
The main component that has to wrap your application is the Dapp.Context
. Use it like:
import * as Dapp from "@elrondnetwork/dapp";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<Router basename={process.env.PUBLIC_URL}>
<ContextProvider>
<Dapp.Context
config={{
network, // provide connection information
walletConnectBridge, // the server used to relay data between the Dapp and the Wallet
walletConnectDeepLink, // link used to open the Maiar app with the connection details
}}
>
<Layout /* optional custom app layout */>
<Switch>
<Route /* main unlock route */
path="/unlock" /* main unlock route */
component={() => (
<Dapp.Pages.Unlock
callbackRoute="/dashboard" /* route after successfull login */
title="App Title"
lead="Please select your login method:"
ledgerRoute="/ledger" /* route after choosing ledger login */
walletConnectRoute="/walletconnect" /* route after choosing Maiar login */
/>
)}
exact={true}
/>
<Route
path="/ledger" /* must correspond to ledgerRoute */
component={() => (
<Dapp.Pages.Ledger callbackRoute="/dashboard" />
)}
exact={true}
/>
<Route
path="/walletconnect" /* must correspond to walletConnectRoute */
component={() => (
<Dapp.Pages.WalletConnect
callbackRoute="/dashboard"
logoutRoute="/home" /* redirect after logout */
title="Maiar Login"
lead="Scan the QR code using Maiar"
/>
)}
exact={true}
/>
{routes.map((route, i /* rest of routes */) => (
<Route
path={route.path}
key={route.path + i}
component={route.component}
exact={true}
/>
))}
<Route component={PageNotFoud} />
</Switch>
</Layout>
</Dapp.Context>
</ContextProvider>
</Router>
);
}
import * as Dapp from "@elrondnetwork/dapp";
export const walletConnectBridge: string = "https://bridge.walletconnect.org";
export const walletConnectDeepLink: string =
"https://maiar.page.link/?apn=com.elrond.maiar.wallet&isi=1519405832&ibi=com.elrond.maiar.wallet&link=https://maiar.com/";
export const network: Dapp.NetworkType = {
id: "testnet",
name: "Testnet",
egldLabel: "xEGLD",
walletAddress: "https://testnet-wallet.elrond.com/dapp/init",
apiAddress: "https://testnet-api.elrond.com",
gatewayAddress: "https://testnet-gateway.elrond.com",
explorerAddress: "http://testnet-explorer.elrond.com/",
};
Wrap your routes inside Dapp.Authenticate
. Example usage inside Layout
:
<>
<Navbar />
<main>
<Dapp.Authenticate
routes={routes}
unlockRoute="/unlock" /* redirect here if user is not authenticated */
>
{children}
</Dapp.Authenticate>
</main>
<Footer />
</>
const { loggedIn, address } = Dapp.useContext();
const dappDispatch = Dapp.useDispatch();
const logOut = () => {
dappDispatch({ type: "logout" });
history.push("/home");
};
import {
Transaction,
GasLimit,
GasPrice,
Address,
TransactionPayload,
Balance,
ChainID,
TransactionVersion,
} from "@elrondnetwork/erdjs";
function createTransactionFromRaw(rawTransaction: {
value: string,
receiver: string,
gasPrice: number,
gasLimit: number,
data: string,
chainID: string,
version: number,
}) {
return new Transaction({
value: Balance.egld(rawTransaction.value),
data: TransactionPayload.fromEncoded(rawTransaction.data),
receiver: new Address(rawTransaction.receiver),
gasLimit: new GasLimit(rawTransaction.gasLimit),
gasPrice: new GasPrice(rawTransaction.gasPrice),
chainID: new ChainID(rawTransaction.chainID),
version: new TransactionVersion(rawTransaction.version),
});
}
// then, inside the component
const sendTransaction = Dapp.useSendTransaction();
const transaction = createTransactionFromRaw(rawTransaction);
const onClick = () => {
sendTransaction({
transaction,
callbackRoute: "/outcome",
});
};
FAQs
Elrond Dapp core components
The npm package @elrondnetwork/dapp receives a total of 8 weekly downloads. As such, @elrondnetwork/dapp popularity was classified as not popular.
We found that @elrondnetwork/dapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.