Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@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 10 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.