`typescript
import { DappProvider } from '@elrondnetwork/dapp-core/wrappers/DappProvider';
or
import { DappProvider } from '@elrondnetwork/dapp-core/wrappers';
`
- Wrap your application with this Provider.

`jsx
environment="devnet"
customNetworkConfig={customNetworkConfig}
>
`
environment is a required key that is needed to configure the app's endpoints for a specific environment. Accepted values are testnet, devnet and mainnet (also configured in EnvironmentsEnum)

DappProvider also accepts an optional customNetworkConfig object with a couple of keys.
This allows using different APIs and different connection providers to configure your network configuration.

All keys are optional

`typescript
{
id?: string;
name?: string;
egldLabel?: string;
decimals?: string;
digits?: string;
gasPerDataByte?: string;
walletConnectDeepLink?: string; // a string that will create a deeplink for an application that is used on a mobile phone, instead of generating the login QR code.
walletConnectBridgeAddresses?: string; // a string that is used to establish the connection to walletConnect library;
walletAddress?: string;
apiAddress?: string;
explorerAddress?: string;
apiTimeout?: 4000;
}
`

- TransactionsToastList will display new transactions in nice toasts at the bottom of the screen. This component is fully customizable.

`jsx
import {TransactionsToastList} from "@elrondnetwork/dapp-core/UI/TransactionsToastList";


toastId?: string,
title: string,
className?: string
/>



`

- SignTransactionsModals will show a modal when a new transaction is submitted, prompting the user to verify and sign it.

Important! This is required to make transactions work, except when you use hooks to sign the transactions manually (more on this below).

`jsx
import {SignTransactionsModals} from "@elrondnetwork/dapp-core/UI/SignTransactionsModals";





`

NotificationModal Will show a modal to the user with various warnings and errors.

`jsx
import {NotificationModal} from "@elrondnetwork/dapp-core/UI/NotificationModal";





`

If you want to show custom notifications, you can use the useGetNotification hook to get the notifications (like insufficient funds, errors etc).

Under the DappUI object mentioned above, you can find 4 buttons (one for each provider) which abstract away all the logic of loggin in the user and render the default UI. These buttons can be easily customized with a custom css class.
The exported buttons are:

- ExtensionLoginButton
- WalletConnectLoginButton
- LedgerLoginButton
- WebWalletLoginButton

example:

`jsx
callbackRoute="/dashboard"
buttonClassName="extension-login"
loginButtonText="Extension login"
/>
`

They can also be used with children

`jsx
callbackRoute="/dashboard"
buttonClassName="extension-login"
loginButtonText="Extension login"
>
<>



Login text

WalletConnectLoginButton and LedgerLoginButton will trigger a modal with a QR code and the ledger login UI, respectively.
These are automatically triggered by the buttons.

If, however, you want access to these containers without the buttons,
you can easily import and use them.

`jsx
callbackRoute={callbackRoute}
loginButtonText="Login with Maiar"
title='Maiar Login',
logoutRoute='/unlock',
className='wallect-connect-login-modal',
lead='Scan the QR code using Maiar',
wrapContentInsideModal={wrapContentInsideModal}
redirectAfterLogin={redirectAfterLogin}
token={token}
onLoginRedirect={onLoginRedirect}
onClose={onClose}
isWalletConnectV2={true} // by default is false and will use walletconnect version 1
/>
`

`jsx
callbackRoute={callbackRoute}
className='ledger-login-modal',
wrapContentInsideModal={wrapContentInsideModal}
redirectAfterLogin={redirectAfterLogin}
token={token}
onClose={onClose}
onLoginRedirect={onLoginRedirect}
/>
`

All login buttons and hooks accept a prop called redirectAfterLogin which specifies of the user should be redirected automatically after login.
The default value for this boolean is false, since most apps listen for the "isLoggedIn" boolean and redirect programmatically.


Another handly component is AuthenticatedRoutesWrapper, which can be used to protect certain routes and redirect the user to login page if the user is not authenticated.

Import from dapp-core:

`typescript
import { AuthenticatedRoutesWrapper } from '@elrondnetwork/dapp-core/wrappers/AuthenticatedRoutesWrapper';
`

Use with routes:

`jsx
routes={routes}
unlockRoute={routeNames.unlock}
>
{appContent}

`

routes should be an array with objects with a signature similar to this:

`typescript
{
path: "/dashboard",
title: "Dashboard",
component: Dashboard,
authenticatedRoute: true,
}
`

The important parts that makes this component work are the flag authenticatedRoute: true and the key path, which means that this route should be accessible only to authenticated users.

$3

This area covers the login hooks, which expose a trigger function and the login data, ready to be rendered.

These hooks are exposed as named exports, which can be imported from dapp-core:

`typescript
import { useExtensionLogin, useWalletConnectLogin, useLedgerLogin, useWebWalletLogin } from '@elrondnetwork/dapp-core/hooks';
or
import { useExtensionLogin } from '@elrondnetwork/dapp-core/hooks/login/useExtensionLogin';
import { useWalletConnectLogin } from '@elrondnetwork/dapp-core/hooks/login/useWebWalletLogin';
import { useLedgerLogin } from '@elrondnetwork/dapp-core/hooks/login/useLedgerLogin';
import { useWebWalletLogin } from '@elrondnetwork/dapp-core/hooks/login/useWebWalletLogin';
`

There are 4 available hooks:

- useExtensionLogin
- useWalletConnectLogin
- useLedgerLogin
- useWebWalletLogin

All hooks have the same response signature:

return type is as follows:

`typescript
const [initiateLogin, genericLoginReturnType, customLoginReturnType] = useLoginHook({
callbackRoute,
logoutRoute,
onLoginRedirect,
});
`

- initiateLogin is a function that needs to be called for the login flow to be initiated;
- genericLoginReturnType is an object that is exactly the same for all hooks:

`typescript
{
error: string,
loginFailed: boolean,
isLoading: boolean,
isLoggedIn: boolean
}
`

- customLoginReturnType is an object that is custom for each hook and returns specific data for that login:

- null for useExtensionLogin;

- null for useWebWalletConnect;

- { uriDeepLink: string, qrCodeSvg: svgElement } for useWalletConnectLogin;

-

`typescript
{
accounts: string[];
showAddressList: boolean;
startIndex: number;
selectedAddress: SelectedAddress | null;
onGoToPrevPage: () => void;
onGoToNextPage: () => void;
onSelectAddress: (address: SelectedAddress | null) => void;
onConfirmSelectedAddress: () => void;
}
`

for useLedgerLogin;

the function accepts 2 arguments:
- callbackUrl: string (optional) the url to redirect the user to after logging him out
- onRedirect: (callbackUrl: string) => void (optional) a function that will be called instead of redirecting the user.
This allows you to control how the redirect is done, for example, with react-router-dom, instead of window.location.href assignment.
Important this function will not be called for web wallet logout

You can opt-in for using the useIdleTimer hook, which logs out the user after a period of inactivity (default set to 10 minutes). Optionally it accepts an onLogout function that fulfills your dapp's specific logout business logic. Make sure to call the above logout function inside this onLogout callback.

You can also opt-in for using the useRegisterWebsocketListener hook. The hooks accepts a callback which will get fired once a websocket message is received, receiving the string argument provided by the event. Optionally you can simply listen to changes on account/transactions with the useGetWebsocketEvent hook.

There are 2 ways of reading the user current state: hooks (to be used inside components and for reacting to changes in the data) and simple functions (for reading data outside of React components or inside handlers).

- hooks: useGetLoginInfo, useGetAccountInfo, useGetNetworkConfig, useGetWebsocketEvent;
- functions: getAccount, getAccountBalance, getAccountShard, getAddress, getIsLoggedIn;

$3

The API for sending transactions is a function called sendTransactions:

import { sendTransactions } from "@elrondnetwork/dapp-core";

It can be used to send a transaction with minimum information:

`typescript
const { sessionId, error } = await sendTransactions({
transactions: [
{
value: '1000000000000000000',
data: 'ping',
receiver: contractAddress
},
],
callbackRoute?: string // (optional, defaults to window.location.pathname) the route to be redirected to after signing. Will not redirect if the user is already on the specified route;
transactionsDisplayInfo: TransactionsDisplayInfoType // (optional, default to null) custom message for toasts texts;
minGasLimit?: number (optional, defaults to 50_000);
sessionInformation?: any (optional, defaults to null) extra sessionInformation that will be passed back to you via getSignedTransactions hook;
signWithoutSending?: boolean // (optional, defaults to false), the transaction will be signed without being sent to the blockchain;
completedTransactionsDelay?: number // delay the transaction status from going into "successful" state;
redirectAfterSigning?: boolean // (optional, defaults to true), whether to redirect to the provided callbackRoute;
});
`

It returns a Promise that will be fulfilled with {error?: string; sessionId: string | null;}

sessionId is the transaction's batch id which can be used to track a transaction's status and react to it.

**Important! For the transaction to be signed, you will have to use either SignTransactionsModals defined above, in the Prerequisites section,
or the useSignTransactions hook defined below. If you don't use one of these, the transactions won't be signed**

$3

Once a transaction has been submitted, you have to use either the SignTransactionsModals or the useSignTransactions hook,
for the user to be prompted in his provider (Extension, Maiar etc) to sign the transaction.

If you don't want to use the default modals that appear for the user when the signing process happens,
you have to use the useSignTransactions hook to sign those transactions.

`typescript
const {
callbackRoute,
transactions,
error,
sessionId,
onAbort,
hasTransactions,
canceledTransactionsMessage
} = useSignTransactions();
`

This hook will let you know if there are any transactions and you can programmatically abort the signing process.

We suggest displaying a message on the screen that confirms the transaction that needs to be signed.

You can also get the provider via

`typescript
const { providerType, provider } = useGetAccountProvider();
`

and use that to display an appropriate message to the user.

For ledger, signing a transaction is simple if you're using the SignTransactionsModal component.

It is fully customizable and will take care of walking the user through the signing flow.

If, however, you want to implement a different experience, you will have to use the useSignTransactionsWithLedger hook.

it accepts the following props:

`typescript
{
onCancel: () => void;
}
`

and returns an object with the following keys:

`typescript
{
onSignTransaction: () => void;
onNext: () => void;
onPrev: () => void;
waitingForDevice: boolean;
onAbort: (e: React.MouseEvent) => void;
isLastTransaction: boolean;
currentStep: number;
signedTransactions?: Record;
currentTransaction: {
transaction: Transaction;
transactionTokenInfo: {
tokenId: string;
amount: string;
receiver: string;
type?: string;
nonce?: string;
multiTxData?: string;
};
isTokenTransaction: boolean;
tokenDecimals: number;
dataField: string;
};
}
`

$3

The library exposes a hook called useTrackTransactionStatus;

`typescript
import {useTrackTransactionStatus} from @elrondnetwork/dapp-core/hooks;

const transactionStatus = useTrackTransactionStatus({
transactionId: sessionId,
onSuccess,
onFail,
onCancelled,
});
`

transactionStatus has the following information about the transaction:

`typescript
{
isPending,
isSuccessful,
isFailed,
isCancelled,
errorMessage,
status,
transactions
}
`

It's safe to pass in null as a sessionId, so if the transaction wasn't yet sent, the hook will just return an empty object.

$3

Dapp-core also exposes a number of handy hooks for tracking all, pending, failed, successful and timed out transactions.

Use:

- useGetPendingTransactions to get a list of all pending transactions.
- useGetSuccessfulTransactions to get a list of all successful transactions.
- useGetFailedTransactions to get a list of all pending transactions.

An especially useful hook called useGetActiveTransactionsStatus will keep you updated with the status
of all transactions at a certain point in time.

it's return signature is

`typescript
{
pending: boolean, // at least one transaction is pending;
hasPendingTransactions: boolean, // the user has at least 1 pending transaction active;
timedOut: boolean, // there are no pending transactions and at least one has timed out;
fail: boolean, // there are no pending and no timedOut transactions and at least one has failed;
success: boolean, // all transactions are successful and all smart contract calls have been processed successfully;
}
`

$3

dapp-core also exposes a toast component for tracking transactions that uses the above mentioned hooks and displays toasts with transactions statuses.

The toasts list is exposed via TransactionsToastList UI component and can be used just by rendering it inside the application.
TransactionToastList component renders also custom toasts. A custom toast can be added using the util function: addNewCustomToast and can be removed using deleteCustomToast

When TransactionToastList is also used for displaying custom toasts, is enough to call addNewCustomToast to add new custom toast to the list;

`jsx




`

Important: This has to be inside the children.

In case you don't want to use TransactionToastList and just display a custom toast, then you have to import CustomToast component
`jsx
const customToast = addNewCustomToast(
{
toastId: 'toast-id',
message: '',
type: 'custom',
duration: 2000
}
);

{...customToast}
onDelete: () => deleteCustomToast(toastId)
/>
`

$3

`typescript
removeTransactionsToSign(sessionId);
removeSignedTransaction(sessionId);
removeAllTransactionsToSign();
removeAllSignedTransactions();

`