Arc76Wallet is a simple React package for creating Algorand addresses from an email and password. This package manages the wallet state, account creation, and browser storage. Useful for blockchain identities in dapps and many more.
- Create Algorand addresses using an email and password.
- Manage wallet state within a React context.
- Save and load wallet state from local storage.
To install Arc76Wallet, you can use npm or yarn:
npm install arc76wallet
or
yarn add arc76wallet
Wrap your application with the Arc76WalletProvider
to provide the wallet context to your components:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Arc76WalletProvider } from "arc76wallet";
ReactDOM.render(
<Arc76WalletProvider>
<App />
</Arc76WalletProvider>,
document.getElementById("root")
);
Use the useArc76Wallet
hook to interact with the wallet context in your components:
import React from "react";
import { useArc76Wallet } from "arc76wallet";
const WalletComponent = () => {
const { state, actions } = useArc76Wallet();
const createAccount = () => {
actions.generateNewAccount({
name: "My Account",
email: "user@example.com",
password: "securepassword",
network: "testnet",
savePassword: true,
});
};
return (
<div>
<button onClick={createAccount}>Create Account</button>
{state.accounts.map((account) => (
<div key={account.addr}>
<p>Address: {account.addr}</p>
<p>Email: {account.email}</p>
</div>
))}
</div>
);
};
export default WalletComponent;
Wrap your application with this provider to use the wallet context.
Returns the wallet state and actions to interact with the wallet.
const { state, actions } = useArc76Wallet();
state.isOpen
: Boolean indicating if the wallet is open.state.accounts
: List of accounts.state.isSaved
: Boolean indicating if the wallet is saved in local storage.
actions.generateNewAccount({ name, email, password, network, savePassword })
: Creates a new Algorand account.actions.unlockWallet(password)
: Unlocks the wallet with the given password.actions.lockWallet()
: Locks the wallet.actions.checkForSavedWallet()
: Checks if there is a saved wallet in local storage.actions.setTransaction(transaction)
: Sets the transaction in the state.actions.addAccount(account)
: Adds an account to the state.actions.getAccount(addr)
: Retrieves an account by address.actions.getSK(addr)
: Retrieves the secret key for an account by address.
Here is an example of a complete usage in a React component:
import React, { useEffect } from "react";
import { useArc76Wallet } from "arc76wallet";
const App = () => {
const { state, actions } = useArc76Wallet();
useEffect(() => {
actions.checkForSavedWallet();
}, [actions]);
const handleCreateAccount = async () => {
await actions.generateNewAccount({
name: "Demo Account",
email: "demo@example.com",
password: "demopassword",
network: "testnet",
savePassword: true,
});
};
const handleUnlockWallet = async () => {
await actions.unlockWallet("demopassword");
};
return (
<div>
<h1>Arc76Wallet Demo</h1>
<button onClick={handleCreateAccount}>Create Account</button>
<button onClick={handleUnlockWallet}>Unlock Wallet</button>
{state.accounts.length > 0 && (
<div>
<h2>Accounts:</h2>
{state.accounts.map((account) => (
<div key={account.addr}>
<p>Address: {account.addr}</p>
<p>Email: {account.email}</p>
</div>
))}
</div>
)}
</div>
);
};
export default App;
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License. Credits to Ludo and Team Shindg