project-serum
/
spl-token-wallet
mirror of https://github.com/project-serum/spl-token-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Import accounts with private key (#29) 

* Named accounts initial commit

* Add account with name

* Import accounts with private key

* Encrypted imported private keys

* Relabel Create Account -> Add Account

* Address feedback

* Remove async

* Fix off by one

Co-authored-by: Philippe Maes <philippe@ftx.com>
Co-authored-by: Nathaniel Parke <nathaniel.parke@gmail.com>
This commit is contained in:
Armani Ferrante 2020-11-09 17:02:55 -08:00 committed by GitHub
parent 30b71dbfac
commit b362d16862
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 231 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/AddAccountDialog.js
View File

@ -4,35 +4,83 @@ import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import Switch from '@material-ui/core/Switch';
import { Account } from '@solana/web3.js';
import * as bs58 from 'bs58';
import DialogForm from './DialogForm';
export default function AddAccountDialog({ open, onAdd, onClose }) {
const [name, setName] = useState('');
const [isImport, setIsImport] = useState(false);
const [importedPrivateKey, setPrivateKey] = useState('');
const importedAccount = isImport ? decodeAccount(importedPrivateKey) : undefined;
const isAddEnabled = isImport ? name && importedAccount !== undefined : name;
return (
<DialogForm
open={open}
onClose={onClose}
onSubmit={() => onAdd(name)}
onSubmit={() => onAdd({ name, importedAccount })}
fullWidth
>
<DialogTitle>Add account</DialogTitle>
<DialogContent style={{ paddingTop: 16 }}>
<TextField
label="Name"
fullWidth
variant="outlined"
margin="normal"
value={name}
onChange={(e) => setName(e.target.value.trim())}
/>
<div
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<TextField
label="Name"
fullWidth
variant="outlined"
margin="normal"
value={name}
onChange={(e) => setName(e.target.value.trim())}
/>
<FormGroup>
<FormControlLabel
control={
<Switch
checked={isImport}
onChange={() => setIsImport(!isImport)}
/>
}
label="Import private key"
/>
</FormGroup>
{isImport && (
<TextField
label="Paste your private key here"
fullWidth
type="password"
value={importedPrivateKey}
variant="outlined"
margin="normal"
onChange={(e) => setPrivateKey(e.target.value.trim())}
/>
)}
</div>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Close</Button>
<Button type="submit" color="primary" disabled={!name}>
<Button type="submit" color="primary" disabled={!isAddEnabled}>
Add
</Button>
</DialogActions>
</DialogForm>
);
}
function decodeAccount(privateKey) {
try {
const a = new Account(bs58.decode(privateKey));
return a;
} catch (_) {
return undefined;
}
}

26
src/components/NavigationFrame.js
View File

@ -126,7 +126,7 @@ function NetworkSelector() {
}
function WalletSelector() {
const { accounts, walletIndex, setWalletIndex } = useWalletSelector();
const { accounts, setWalletSelector, addAccount } = useWalletSelector();
const [anchorEl, setAnchorEl] = useState(null);
const [addAccountOpen, setAddAccountOpen] = useState(false);
const classes = useStyles();
@ -140,8 +140,14 @@ function WalletSelector() {
<AddAccountDialog
open={addAccountOpen}
onClose={() => setAddAccountOpen(false)}
onAdd={(name) => {
setWalletIndex(accounts.length, name);
onAdd={({ name, importedAccount }) => {
addAccount({ name, importedAccount });
setWalletSelector({
walletIndex: importedAccount ? undefined : accounts.length,
importedPubkey: importedAccount
? importedAccount.publicKey.toString()
: undefined,
});
setAddAccountOpen(false);
}}
/>
@ -171,23 +177,21 @@ function WalletSelector() {
}}
getContentAnchorEl={null}
>
{accounts.map(({ index, address, name }) => (
{accounts.map(({ isSelected, selector, address, name, label }) => (
<MenuItem
key={address.toBase58()}
onClick={() => {
setAnchorEl(null);
setWalletIndex(index);
setWalletSelector(selector);
}}
selected={index === walletIndex}
selected={isSelected}
component="div"
>
<ListItemIcon className={classes.menuItemIcon}>
{index === walletIndex ? <CheckIcon fontSize="small" /> : null}
{isSelected ? <CheckIcon fontSize="small" /> : null}
</ListItemIcon>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography>
{index === 0 ? 'Main account' : name || `Account ${index}`}
</Typography>
<Typography>{name}</Typography>
<Typography color="textSecondary">
{address.toBase58()}
</Typography>
@ -204,7 +208,7 @@ function WalletSelector() {
<ListItemIcon className={classes.menuItemIcon}>
<AddIcon fontSize="small" />
</ListItemIcon>
Create Account
Add Account
</MenuItem>
</Menu>
</>

12
src/components/SendDialog.js
View File

@ -28,7 +28,10 @@ import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import { useAsyncData } from '../utils/fetch-loop';
import CircularProgress from '@material-ui/core/CircularProgress';
import {TOKEN_PROGRAM_ID, WRAPPED_SOL_MINT} from '../utils/tokens/instructions';
import {
TOKEN_PROGRAM_ID,
WRAPPED_SOL_MINT,
} from '../utils/tokens/instructions';
import { parseTokenAccountData } from '../utils/tokens/data';
const WUSDC_MINT = new PublicKey(
@ -134,9 +137,10 @@ export default function SendDialog({ open, onClose, publicKey, balanceInfo }) {
}
function SendSplDialog({ onClose, publicKey, balanceInfo, onSubmitRef }) {
const defaultAddressHelperText = !balanceInfo.mint || balanceInfo.mint.equals(WRAPPED_SOL_MINT) ?
'Enter Solana Address' :
'Enter SPL token or Solana address';
const defaultAddressHelperText =
!balanceInfo.mint || balanceInfo.mint.equals(WRAPPED_SOL_MINT)
? 'Enter Solana Address'
: 'Enter SPL token or Solana address';
const wallet = useWallet();
const [sendTransaction, sending] = useSendTransaction();
const [addressHelperText, setAddressHelperText] = useState(

39
src/utils/wallet-seed.js
View File

@ -1,5 +1,6 @@
import { pbkdf2 } from 'crypto';
import { randomBytes, secretbox } from 'tweetnacl';
import * as bip32 from 'bip32';
import bs58 from 'bs58';
import { EventEmitter } from 'events';
@ -19,11 +20,20 @@ export async function mnemonicToSeed(mnemonic) {
return Buffer.from(seed).toString('hex');
}
let unlockedMnemonicAndSeed = JSON.parse(
sessionStorage.getItem('unlocked') ||
localStorage.getItem('unlocked') ||
'null',
) || { mnemonic: null, seed: null };
let unlockedMnemonicAndSeed = (() => {
const stored = JSON.parse(
sessionStorage.getItem('unlocked') ||
localStorage.getItem('unlocked') ||
'null',
);
if (stored === null) {
return { mnemonic: null, seed: null, importsEncryptionKey: null };
}
return {
importsEncryptionKey: deriveImportsEncryptionKey(stored.seed),
...stored,
};
})();
export const walletSeedChanged = new EventEmitter();
export function getUnlockedMnemonicAndSeed() {
@ -34,8 +44,8 @@ export function hasLockedMnemonicAndSeed() {
return !!localStorage.getItem('locked');
}
function setUnlockedMnemonicAndSeed(mnemonic, seed) {
unlockedMnemonicAndSeed = { mnemonic, seed };
function setUnlockedMnemonicAndSeed(mnemonic, seed, importsEncryptionKey) {
unlockedMnemonicAndSeed = { mnemonic, seed, importsEncryptionKey };
walletSeedChanged.emit('change', unlockedMnemonicAndSeed);
}
@ -67,7 +77,8 @@ export async function storeMnemonicAndSeed(mnemonic, seed, password) {
localStorage.removeItem('locked');
sessionStorage.removeItem('unlocked');
}
setUnlockedMnemonicAndSeed(mnemonic, seed);
const privateKey = deriveImportsEncryptionKey(seed);
setUnlockedMnemonicAndSeed(mnemonic, seed, privateKey);
}
export async function loadMnemonicAndSeed(password, stayLoggedIn) {
@ -91,7 +102,8 @@ export async function loadMnemonicAndSeed(password, stayLoggedIn) {
if (stayLoggedIn) {
sessionStorage.setItem('unlocked', decodedPlaintext);
}
setUnlockedMnemonicAndSeed(mnemonic, seed);
const privateKey = deriveImportsEncryptionKey(seed);
setUnlockedMnemonicAndSeed(mnemonic, seed, privateKey);
return { mnemonic, seed };
}
@ -109,5 +121,12 @@ async function deriveEncryptionKey(password, salt, iterations, digest) {
}
export function lockWallet() {
setUnlockedMnemonicAndSeed(null, null);
setUnlockedMnemonicAndSeed(null, null, null);
}
// Returns the 32 byte key used to encrypt imported private keys.
function deriveImportsEncryptionKey(seed) {
// SLIP16 derivation path.
return bip32.fromSeed(Buffer.from(seed, 'hex')).derivePath("m/10016'/0")
.privateKey;
}

157
src/utils/wallet.js
View File

@ -1,6 +1,12 @@
import React, { useContext, useMemo } from 'react';
import * as bip32 from 'bip32';
import { Account, SystemProgram, Transaction } from '@solana/web3.js';
import * as bs58 from 'bs58';
import {
Account,
SystemProgram,
Transaction,
PublicKey,
} from '@solana/web3.js';
import nacl from 'tweetnacl';
import {
setInitialAccountInfo,
@ -24,12 +30,15 @@ import { useTokenName } from './tokens/names';
import { refreshCache, useAsyncData } from './fetch-loop';
import { getUnlockedMnemonicAndSeed, walletSeedChanged } from './wallet-seed';
const DEFAULT_WALLET_SELECTOR = {
walletIndex: 0,
importedPubkey: undefined,
};
export class Wallet {
constructor(connection, seed, walletIndex = 0) {
constructor(connection, account) {
this.connection = connection;
this.seed = seed;
this.walletIndex = walletIndex;
this.account = Wallet.getAccountFromSeed(this.seed, this.walletIndex);
this.account = account;
}
static getAccountFromSeed(seed, walletIndex, accountIndex = 0) {
@ -113,19 +122,63 @@ const WalletContext = React.createContext(null);
export function WalletProvider({ children }) {
useListener(walletSeedChanged, 'change');
const { mnemonic, seed } = getUnlockedMnemonicAndSeed();
const { mnemonic, seed, importsEncryptionKey } = getUnlockedMnemonicAndSeed();
const connection = useConnection();
const [walletIndex, setWalletIndex] = useLocalStorageState('walletIndex', 0);
const wallet = useMemo(
() =>
seed
? new Wallet(connection, Buffer.from(seed, 'hex'), walletIndex)
: null,
[connection, seed, walletIndex],
// `privateKeyImports` are accounts imported *in addition* to HD wallets
const [privateKeyImports, setPrivateKeyImports] = useLocalStorageState(
'walletPrivateKeyImports',
{},
);
// `walletSelector` identifies which wallet to use.
const [walletSelector, setWalletSelector] = useLocalStorageState(
'walletSelector',
DEFAULT_WALLET_SELECTOR,
);
const wallet = useMemo(() => {
if (!seed) {
return null;
}
const account =
walletSelector.walletIndex !== undefined
? Wallet.getAccountFromSeed(
Buffer.from(seed, 'hex'),
walletSelector.walletIndex,
)
: new Account(
(() => {
const { nonce, ciphertext } = privateKeyImports[
walletSelector.importedPubkey
];
return nacl.secretbox.open(
bs58.decode(ciphertext),
bs58.decode(nonce),
importsEncryptionKey,
);
})(),
);
return new Wallet(connection, account);
}, [
connection,
seed,
walletSelector,
privateKeyImports,
importsEncryptionKey,
]);
return (
<WalletContext.Provider
value={{ wallet, walletIndex, setWalletIndex, seed, mnemonic }}
value={{
wallet,
seed,
mnemonic,
importsEncryptionKey,
walletSelector,
setWalletSelector,
privateKeyImports,
setPrivateKeyImports,
}}
>
{children}
</WalletContext.Provider>
@ -244,34 +297,66 @@ export function useBalanceInfo(publicKey) {
}
export function useWalletSelector() {
const { walletIndex, setWalletIndex, seed } = useContext(WalletContext);
const {
seed,
importsEncryptionKey,
walletSelector,
setWalletSelector,
privateKeyImports,
setPrivateKeyImports,
} = useContext(WalletContext);
// `walletCount` is the number of HD wallets.
const [walletCount, setWalletCount] = useLocalStorageState('walletCount', 1);
function selectWallet(walletIndex, name) {
if (walletIndex >= walletCount) {
name && localStorage.setItem(`name${walletIndex}`, name);
setWalletCount(walletIndex + 1);
function addAccount({ name, importedAccount }) {
if (importedAccount === undefined) {
name && localStorage.setItem(`name${walletCount}`, name);
setWalletCount(walletCount + 1);
} else {
const nonce = nacl.randomBytes(nacl.secretbox.nonceLength);
const plaintext = importedAccount.secretKey;
const ciphertext = nacl.secretbox(plaintext, nonce, importsEncryptionKey);
// `useLocalStorageState` requires a new object.
let newPrivateKeyImports = { ...privateKeyImports };
newPrivateKeyImports[importedAccount.publicKey.toString()] = {
name,
ciphertext: bs58.encode(ciphertext),
nonce: bs58.encode(nonce),
};
setPrivateKeyImports(newPrivateKeyImports);
}
setWalletIndex(walletIndex);
}
const accounts = useMemo(() => {
if (!seed) {
return [];
}
const seedBuffer = Buffer.from(seed, 'hex');
return [...Array(walletCount).keys()].map((walletIndex) => {
let address = Wallet.getAccountFromSeed(seedBuffer, walletIndex)
.publicKey;
let name = localStorage.getItem(`name${walletIndex}`);
return { index: walletIndex, address, name };
});
}, [seed, walletCount]);
return { accounts, walletIndex, setWalletIndex: selectWallet };
}
export async function mnemonicToSecretKey(mnemonic) {
const { mnemonicToSeed } = await import('bip39');
const rootSeed = Buffer.from(await mnemonicToSeed(mnemonic), 'hex');
const derivedSeed = bip32.fromSeed(rootSeed).derivePath("m/501'/0'/0/0")
.privateKey;
return nacl.sign.keyPair.fromSeed(derivedSeed).secretKey;
const seedBuffer = Buffer.from(seed, 'hex');
const derivedAccounts = [...Array(walletCount).keys()].map((idx) => {
let address = Wallet.getAccountFromSeed(seedBuffer, idx).publicKey;
let name = localStorage.getItem(`name${idx}`);
return {
selector: { walletIndex: idx, importedPubkey: undefined },
isSelected: walletSelector.walletIndex === idx,
address,
name: idx === 0 ? 'Main account' : name || `Account ${idx}`,
};
});
const importedAccounts = Object.keys(privateKeyImports).map((pubkey) => {
const { name } = privateKeyImports[pubkey];
return {
selector: { walletIndex: undefined, importedPubkey: pubkey },
address: new PublicKey(bs58.decode(pubkey)),
name: `${name} (imported)`, // TODO: do this in the Component with styling.
isSelected: walletSelector.importedPubkey === pubkey,
};
});
return derivedAccounts.concat(importedAccounts);
}, [seed, walletCount, walletSelector, privateKeyImports]);
return { accounts, setWalletSelector, addAccount };
}