Skip to content

Commit

Permalink
Feature/wallet type addition
Browse files Browse the repository at this point in the history
  • Loading branch information
gaurab13 committed Jan 10, 2020
1 parent a813dc5 commit 41bf284
Show file tree
Hide file tree
Showing 16 changed files with 501 additions and 10 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,4 @@ jspm_packages
# Custom
.DS_Store
build
src/Extension
19 changes: 19 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"url": "git+https://github.com/njordhov/react-blockstack.git"
},
"dependencies": {
"bip39": "^3.0.2",
"blockstack": "^19.3.0",
"icon-sdk-js": "0.0.18",
"react": "^16.8.6",
Expand All @@ -21,7 +22,9 @@
"react-router-dom": "^5.0.0",
"react-select": "^3.0.8",
"react-spring": "^8.0.27",
"toasted-notes": "^3.2.0"
"toasted-notes": "^3.2.0",
"wallet-address-validator": "^0.2.4",
"zxcvbn": "^4.4.2"
},
"scripts": {
"start": "react-scripts start",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<title>Password Manager</title>
<title>Vaultilo</title>
</head>
<body>
<div id="App"></div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppRouter.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import MainContent from "./MainContent";
import MainContent from "./MainContent";

export default function AppRouter(props) {
return (
<Switch>
<Route
exact={true}
path="/"
render={() => <Redirect to="/items/all" />}
render={() => <Redirect to="/items/all" />}
/>
<Route path="/:type/:subType" render={(routeProps) => <MainContent {...routeProps} {...props} />} />
</Switch>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Content.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import TopBar from './TopBar.js';
import AppRouter from './AppRouter.js';
import SideBar from './Sidebar.js';
import { useFile } from "react-blockstack";
import { useFile } from "react-blockstack";

export default function Content ({ person }) {
const [credentials, setCredentials] = useFile('crypto.json');
Expand Down
166 changes: 166 additions & 0 deletions src/components/CryptoForms/Bitcoin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import React, { useEffect, useState } from "react";
import * as bip39 from 'bip39';
import WAValidator from 'wallet-address-validator';
import toaster from 'toasted-notes'

export default function Bitcoin(props) {
const { credentials, setCredentials, subType, onModalClose, selectedItem } = props;

const defaultValue = selectedItem
? {
walletName: selectedItem.walletName,
walletAddress: selectedItem.walletAddress,
seedWords:selectedItem.seedWords
}
: {
walletName: "",
walletAddress: "",
seedWords:""
};

const [walletName, setWalletName] = useState(defaultValue.walletName);
const [walletAddress, setWalletAddress] = useState(defaultValue.walletAddress);
const [seedWords,setSeedWords]=useState(defaultValue.seedWords)
const [clicked, setClicked] = useState(false);

useEffect(() => {
if (clicked) {
setClicked(false);
onModalClose();
}
}, [credentials]);

const showToast = (text, time) => {
toaster.notify(() => <span className="btn btn-primary mr-2">{text}</span>, {
position: "top",
duration: time
});
};

const validateForm = () => {
const addValid=WAValidator.validate(walletAddress,"BTC")
const valid=bip39.validateMnemonic(seedWords)
console.log("Address ",addValid)

if (!addValid){
showToast('Bitcoin wallet address invalid',2000)
}

if (!valid){
showToast('Invalid Seed Words',2000)
}

if (addValid && valid){
return (
walletName.length &&
walletAddress.length
);
}
};

const handleClick = () => {
if (validateForm()) {
const newCred = {
id: Date.now(),
type: 'crypto',
subType: subType,
walletName,
walletAddress,
seedWords
};
const oldCred = credentials ? JSON.parse(credentials) : [];
setClicked(true);
setCredentials(JSON.stringify([...oldCred, newCred]));
}
};

const handleUpdate = () => {
if (validateForm()) {
const updatedCredentials = JSON.parse(credentials).map(item => {
if (item.id === selectedItem.id) {
return { ...item, walletName, walletAddress,seedWords };
}
return item;
});
setClicked(true);
setCredentials(JSON.stringify(updatedCredentials));
}
};

return (
<>
<div className="form-group row">
<label htmlFor="inputName" className="col-4 col-form-label">
Bitcoin Wallet Name
</label>
<div className="col-8">
<input
type="text"
className="form-control"
id="inputName"
value={walletName}
onChange={evt => setWalletName(evt.target.value)}
/>
</div>
</div>
<div className="form-group row">
<label htmlFor="inputAddress" className="col-4 col-form-label">
Wallet Address
</label>
<div className="col-8">
<input
type="text"
className="form-control"
id="inputAddress"
value={walletAddress}
onChange={evt => setWalletAddress(evt.target.value)}
/>
</div>
</div>

<div className="form-group row">
<label htmlFor="inputSeedWords" className="col-4 col-form-label">
Seed Words
</label>
<div className="col-8">
<input
type="text"
className="form-control"
id="inputSeedWords"
value={seedWords}
onChange={evt => setSeedWords(evt.target.value)}
/>
</div>

</div>
<div className="d-flex justify-content-end">
{selectedItem ? (
<button
disabled={clicked}
type="button"
className="btn btn-primary mr-2"
onClick={handleUpdate}
>
Update
</button>
) : (
<button
disabled={clicked}
type="button"
className="btn btn-primary mr-2"
onClick={handleClick}
>
Save
</button>
)}
<button
type="button"
className="btn btn-primary"
onClick={onModalClose}
>
Cancel
</button>
</div>
</>
);
}
31 changes: 27 additions & 4 deletions src/components/CryptoForms/Ethereum.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import * as bip39 from 'bip39';
import WAValidator from 'wallet-address-validator';
import toaster from "toasted-notes";
import "toasted-notes/src/styles.css";
import './index.css';
Expand Down Expand Up @@ -33,12 +35,33 @@ export default function Ethereum(props) {
}
}, [credentials]);

const showToast = (text, time) => {
toaster.notify(() => <span className="btn btn-primary mr-2">{text}</span>, {
position: "top",
duration: time
});
};

const validateForm = () => {
return (
walletName.length &&
walletAddress.length &&
privateKey.length
const addValid=WAValidator.validate(walletAddress,"ETH")
const seedValid=bip39.validateMnemonic(seedWords)
console.log("Address ",addValid)

if (!addValid){
showToast('Ethereum wallet address invalid',2000)
}

if (!seedValid){
showToast('Invalid Seed Words',2000)
}

if (seedValid && addValid){
return (
walletName.length &&
walletAddress.length &&
privateKey.length
);
}
};

const handleClick = () => {
Expand Down
4 changes: 4 additions & 0 deletions src/components/CryptoForms/Icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FilePicker } from "react-file-picker";
import IconService from "icon-sdk-js";
import toaster from "toasted-notes";
import "toasted-notes/src/styles.css";
import PasswordStrength from '../PasswordsForm/PasswordStrength'
import './index.css';

export default function Icon(props) {
Expand Down Expand Up @@ -207,6 +208,9 @@ export default function Icon(props) {
onChange={evt => setPassword(evt.target.value)}
/>
<span className="password-visibility-btn" onClick={() => setPasswordVisible(!passwordVisible)}>{ passwordVisible ? <i class="fa fa-eye-slash" aria-hidden="true" /> : <i className="fa fa-eye" aria-hidden="true" />}</span>
<span>
<PasswordStrength password={password}/>
</span>
</div>
</div>
<div className="d-flex justify-content-start">
Expand Down
4 changes: 4 additions & 0 deletions src/components/CryptoForms/OtherWallets.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
import PasswordStrength from '../PasswordsForm/PasswordStrength'
import '../CryptoForms/index.css'

export default function OtherWallets(props) {
Expand Down Expand Up @@ -150,6 +151,9 @@ export default function OtherWallets(props) {
onChange={evt => setPassword(evt.target.value)}
/>
<span className="password-visibility-btn" onClick={() => setPasswordVisible(!passwordVisible)}>{ passwordVisible ? <i class="fa fa-eye-slash" aria-hidden="true" /> : <i className="fa fa-eye" aria-hidden="true" />}</span>
<span>
<PasswordStrength password={password}/>
</span>
</div>
</div>
<div className="d-flex justify-content-end">
Expand Down
Loading

0 comments on commit 41bf284

Please sign in to comment.