m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Merge pull request #590 from MetaMask/i432PersistFormState

Browse Source 
Persist form state when closing popup
This commit is contained in:
kumavis 2016-08-25 15:40:49 -07:00 committed by GitHub
commit b6b57d928a
10 changed files with 591 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -2,11 +2,12 @@
## Current Master
- Forms now retain their values even when closing the popup and reopening it.
## 2.9.2 2016-08-24
- Fixed shortcut bug from preventing installation.
## 2.9.1 2016-08-24
- Added static image as fallback for when WebGL isn't supported.

2
development/states.js
View File

File diff suppressed because one or more lines are too long

39
development/states/restore-vault.json Normal file
View File

@ -0,0 +1,39 @@
{
"metamask": {
"isInitialized": false,
"isUnlocked": false,
"isEthConfirmed": false,
"currentDomain": "example.com",
"rpcTarget": "https://rawtestrpc.metamask.io/",
"identities": {},
"unconfTxs": {},
"currentFiat": "USD",
"conversionRate": 0,
"conversionDate": "N/A",
"accounts": {},
"transactions": [],
"seedWords": null,
"isConfirmed": true,
"unconfMsgs": {},
"messages": [],
"shapeShiftTxList": [],
"provider": {
"type": "testnet"
},
"network": "2"
},
"appState": {
"menuOpen": false,
"currentView": {
"name": "restoreVault"
},
"accountDetail": {
"subview": "transactions"
},
"currentDomain": "extensions",
"transForward": true,
"isLoading": false,
"warning": null
},
"identities": {}
}

76
development/states/send.json Normal file
View File

@ -0,0 +1,76 @@
{
"metamask": {
"isInitialized": true,
"isUnlocked": true,
"isEthConfirmed": false,
"currentDomain": "example.com",
"rpcTarget": "https://rawtestrpc.metamask.io/",
"identities": {
"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": {
"name": "Wallet 1",
"address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
"mayBeFauceting": false
},
"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": {
"name": "Wallet 2",
"address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb",
"mayBeFauceting": false
},
"0x2f8d4a878cfa04a6e60d46362f5644deab66572d": {
"name": "Wallet 3",
"address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d",
"mayBeFauceting": false
}
},
"unconfTxs": {},
"currentFiat": "USD",
"conversionRate": 11.21283484,
"conversionDate": 1472158984,
"accounts": {
"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": {
"code": "0x",
"balance": "0x34693f54a1e25900",
"nonce": "0x100013",
"address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
},
"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": {
"code": "0x",
"nonce": "0x100000",
"balance": "0x18af912cee770000",
"address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb"
},
"0x2f8d4a878cfa04a6e60d46362f5644deab66572d": {
"code": "0x",
"nonce": "0x100000",
"balance": "0x2386f26fc10000",
"address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d"
}
},
"transactions": [],
"network": "2",
"seedWords": null,
"isConfirmed": true,
"unconfMsgs": {},
"messages": [],
"shapeShiftTxList": [],
"provider": {
"type": "testnet"
},
"selectedAccount": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
},
"appState": {
"menuOpen": false,
"currentView": {
"name": "sendTransaction"
},
"accountDetail": {
"subview": "transactions"
},
"currentDomain": "127.0.0.1:9966",
"transForward": true,
"isLoading": false,
"warning": null,
"detailView": {}
},
"identities": {}
}

348
development/states/shapeshift.json Normal file
View File

@ -0,0 +1,348 @@
{
"metamask": {
"isInitialized": true,
"isUnlocked": true,
"isEthConfirmed": true,
"currentDomain": "example.com",
"rpcTarget": "https://rawtestrpc.metamask.io/",
"identities": {
"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": {
"name": "Wallet 1",
"address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
"mayBeFauceting": false
},
"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": {
"name": "Wallet 2",
"address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb",
"mayBeFauceting": false
},
"0x2f8d4a878cfa04a6e60d46362f5644deab66572d": {
"name": "Wallet 3",
"address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d",
"mayBeFauceting": false
}
},
"unconfTxs": {},
"currentFiat": "USD",
"conversionRate": 11.21274318,
"conversionDate": 1472159644,
"accounts": {
"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": {
"code": "0x",
"nonce": "0x13",
"balance": "0x461d4a64e937d3d1",
"address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
},
"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": {
"code": "0x",
"nonce": "0x0",
"balance": "0x0",
"address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb"
},
"0x2f8d4a878cfa04a6e60d46362f5644deab66572d": {
"code": "0x",
"balance": "0x0",
"nonce": "0x0",
"address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d"
}
},
"transactions": [],
"selectedAddress": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
"network": "1",
"seedWords": null,
"isConfirmed": true,
"unconfMsgs": {},
"messages": [],
"shapeShiftTxList": [],
"provider": {
"type": "mainnet"
},
"selectedAccount": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
},
"appState": {
"menuOpen": false,
"currentView": {
"name": "buyEth",
"context": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
},
"accountDetail": {
"subview": "transactions"
},
"currentDomain": "127.0.0.1:9966",
"transForward": true,
"isLoading": false,
"detailView": {},
"buyView": {
"subview": "buyForm",
"formView": {
"coinbase": false,
"shapeshift": true,
"marketinfo": {
"pair": "btc_eth",
"rate": 51.14252949,
"minerFee": 0.01,
"limit": 2.60306578,
"minimum": 0.00038935,
"maxLimit": 8.67688592
},
"coinOptions": {
"BTC": {
"name": "Bitcoin",
"symbol": "BTC",
"image": "https://shapeshift.io/images/coins/bitcoin.png",
"status": "available"
},
"BCY": {
"name": "BitCrystals",
"symbol": "BCY",
"image": "https://shapeshift.io/images/coins/bitcrystals.png",
"status": "available"
},
"BLK": {
"name": "Blackcoin",
"symbol": "BLK",
"image": "https://shapeshift.io/images/coins/blackcoin.png",
"status": "available"
},
"BTS": {
"name": "Bitshares",
"symbol": "BTS",
"specialReturn": false,
"specialOutgoing": true,
"specialIncoming": true,
"fieldName": "destTag",
"fieldKey": "destTag",
"image": "https://shapeshift.io/images/coins/bitshares.png",
"status": "available"
},
"CLAM": {
"name": "Clams",
"symbol": "CLAM",
"image": "https://shapeshift.io/images/coins/clams.png",
"status": "available"
},
"DASH": {
"name": "Dash",
"symbol": "DASH",
"image": "https://shapeshift.io/images/coins/dash.png",
"status": "available"
},
"DGB": {
"name": "Digibyte",
"symbol": "DGB",
"image": "https://shapeshift.io/images/coins/digibyte.png",
"status": "available"
},
"DAO": {
"name": "TheDao",
"symbol": "DAO",
"image": "https://shapeshift.io/images/coins/thedao.png",
"status": "available"
},
"DGD": {
"name": "DigixDao",
"symbol": "DGD",
"image": "https://shapeshift.io/images/coins/digixdao.png",
"status": "available"
},
"DOGE": {
"name": "Dogecoin",
"symbol": "DOGE",
"image": "https://shapeshift.io/images/coins/dogecoin.png",
"status": "available"
},
"EMC": {
"name": "Emercoin",
"symbol": "EMC",
"image": "https://shapeshift.io/images/coins/emercoin.png",
"status": "available"
},
"ETH": {
"name": "Ether",
"symbol": "ETH",
"image": "https://shapeshift.io/images/coins/ether.png",
"status": "available"
},
"ETC": {
"name": "Ether Classic",
"symbol": "ETC",
"image": "https://shapeshift.io/images/coins/etherclassic.png",
"status": "available"
},
"FCT": {
"name": "Factoids",
"symbol": "FCT",
"image": "https://shapeshift.io/images/coins/factoids.png",
"status": "available"
},
"LBC": {
"name": "LBRY Credits",
"symbol": "LBC",
"image": "https://shapeshift.io/images/coins/lbry.png",
"status": "available"
},
"LSK": {
"name": "Lisk",
"symbol": "LSK",
"image": "https://shapeshift.io/images/coins/lisk.png",
"status": "available"
},
"LTC": {
"name": "Litecoin",
"symbol": "LTC",
"image": "https://shapeshift.io/images/coins/litecoin.png",
"status": "available"
},
"MAID": {
"name": "Maidsafe",
"symbol": "MAID",
"image": "https://shapeshift.io/images/coins/maidsafe.png",
"status": "available"
},
"MINT": {
"name": "Mintcoin",
"symbol": "MINT",
"image": "https://shapeshift.io/images/coins/mintcoin.png",
"status": "available"
},
"MONA": {
"name": "Monacoin",
"symbol": "MONA",
"image": "https://shapeshift.io/images/coins/monacoin.png",
"status": "available"
},
"MSC": {
"name": "Omni",
"symbol": "MSC",
"image": "https://shapeshift.io/images/coins/mastercoin.png",
"status": "available"
},
"NBT": {
"name": "Nubits",
"symbol": "NBT",
"image": "https://shapeshift.io/images/coins/nubits.png",
"status": "available"
},
"NMC": {
"name": "Namecoin",
"symbol": "NMC",
"image": "https://shapeshift.io/images/coins/namecoin.png",
"status": "available"
},
"NVC": {
"name": "Novacoin",
"symbol": "NVC",
"image": "https://shapeshift.io/images/coins/novacoin.png",
"status": "available"
},
"NXT": {
"name": "Nxt",
"symbol": "NXT",
"specialReturn": false,
"specialOutgoing": true,
"specialIncoming": true,
"specialIncomingStatus": false,
"fieldName": "Public Key (only for unfunded accounts!)",
"fieldKey": "rsAddress",
"image": "https://shapeshift.io/images/coins/nxt.png",
"status": "available"
},
"PPC": {
"name": "Peercoin",
"symbol": "PPC",
"image": "https://shapeshift.io/images/coins/peercoin.png",
"status": "available"
},
"RDD": {
"name": "Reddcoin",
"symbol": "RDD",
"image": "https://shapeshift.io/images/coins/reddcoin.png",
"status": "available"
},
"SDC": {
"name": "Shadowcash",
"symbol": "SDC",
"image": "https://shapeshift.io/images/coins/shadowcash.png",
"status": "available"
},
"SC": {
"name": "Siacoin",
"symbol": "SC",
"image": "https://shapeshift.io/images/coins/siacoin.png",
"status": "available"
},
"SJCX": {
"name": "StorjX",
"symbol": "SJCX",
"image": "https://shapeshift.io/images/coins/storjcoinx.png",
"status": "available"
},
"START": {
"name": "Startcoin",
"symbol": "START",
"image": "https://shapeshift.io/images/coins/startcoin.png",
"status": "available"
},
"STEEM": {
"name": "Steem",
"symbol": "STEEM",
"specialReturn": false,
"specialOutgoing": true,
"specialIncoming": true,
"fieldName": "destTag",
"fieldKey": "destTag",
"image": "https://shapeshift.io/images/coins/steem.png",
"status": "available"
},
"USDT": {
"name": "Tether",
"symbol": "USDT",
"image": "https://shapeshift.io/images/coins/tether.png",
"status": "available"
},
"VOX": {
"name": "Voxels",
"symbol": "VOX",
"image": "https://shapeshift.io/images/coins/voxels.png",
"status": "available"
},
"VRC": {
"name": "Vericoin",
"symbol": "VRC",
"image": "https://shapeshift.io/images/coins/vericoin.png",
"status": "available"
},
"VTC": {
"name": "Vertcoin",
"symbol": "VTC",
"image": "https://shapeshift.io/images/coins/vertcoin.png",
"status": "available"
},
"XCP": {
"name": "Counterparty",
"symbol": "XCP",
"image": "https://shapeshift.io/images/coins/counterparty.png",
"status": "available"
},
"XMR": {
"name": "Monero",
"symbol": "XMR",
"specialReturn": false,
"specialOutgoing": true,
"specialIncoming": true,
"fieldName": "Payment Id",
"qrName": "tx_payment_id",
"fieldKey": "paymentId",
"image": "https://shapeshift.io/images/coins/monero.png",
"status": "available"
}
}
},
"buyAddress": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
"amount": "5.00",
"warning": null
},
"isSubLoading": false
},
"identities": {}
}

28
docs/form_persisting_architecture.md Normal file
View File

@ -0,0 +1,28 @@
# Form Persisting Architecture
Since:
- The popup is torn down completely on every click outside of it.
- We have forms with multiple fields (like passwords & seed phrases) that might encourage a user to leave our panel to refer to a password manager.
We cause user friction when we lose the contents of certain forms.
This calls for an architecture of a form component that can completely persist its values to LocalStorage on every relevant change, and restore those values on reopening.
To achieve this, we have defined a class, a subclass of `React.Component`, called `PersistentForm`, and it's stored at `ui/lib/persistent-form.js`.
To use this class, simply take your form component (the component that renders `input`, `select`, or `textarea` elements), and make it subclass from `PersistentForm` instead of `React.Component`.
You can see an example of this in use in `ui/app/first-time/restore-vault.js`.
Additionally, any field whose value should be persisted, should have a `persistentFormId` attribute, which needs to be assigned under a `dataset` key on the main `attributes` hash. For example:
```javascript
return h('textarea.twelve-word-phrase.letter-spacey', {
dataset: {
persistentFormId: 'wallet-seed',
},
})
```
That's it! This field should be persisted to `localStorage` on each `keyUp`, those values should be restored on view load, and the cached values should be cleared when navigating deliberately away from the form.

15
ui/app/components/shapeshift-form.js
View File

@ -1,4 +1,4 @@
const Component = require('react').Component
const PersistentForm = require('../../lib/persistent-form')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
@ -17,12 +17,15 @@ function mapStateToProps(state) {
}
}
inherits(ShapeshiftForm, Component)
inherits(ShapeshiftForm, PersistentForm)
function ShapeshiftForm () {
Component.call(this)
PersistentForm.call(this)
this.persistentFormParentId = 'shapeshift-buy-form'
}
ShapeshiftForm.prototype.render = function () {
return h(ReactCSSTransitionGroup, {
className: 'css-transition-group',
transitionName: 'main',
@ -66,6 +69,9 @@ ShapeshiftForm.prototype.renderMain = function () {
h('input#fromCoin.buy-inputs.ex-coins', {
type: 'text',
list: 'coinList',
dataset: {
persistentFormId: 'input-coin',
},
style: {
boxSizing: 'border-box',
},
@ -159,6 +165,9 @@ ShapeshiftForm.prototype.renderMain = function () {
h('input#fromCoinAddress.buy-inputs', {
type: 'text',
placeholder: `Your ${coin} Refund Address`,
dataset: {
persistentFormId: 'refund-address',
},
style: {
boxSizing: 'border-box',
width: '278px',

17
ui/app/first-time/restore-vault.js
View File

@ -1,14 +1,14 @@
const inherits = require('util').inherits
const Component = require('react').Component
const PersistentForm = require('../../lib/persistent-form')
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const actions = require('../actions')
module.exports = connect(mapStateToProps)(RestoreVaultScreen)
inherits(RestoreVaultScreen, Component)
inherits(RestoreVaultScreen, PersistentForm)
function RestoreVaultScreen () {
Component.call(this)
PersistentForm.call(this)
}
function mapStateToProps (state) {
@ -19,6 +19,8 @@ function mapStateToProps (state) {
RestoreVaultScreen.prototype.render = function () {
var state = this.props
this.persistentFormParentId = 'restore-vault-form'
return (
h('.initialize-screen.flex-column.flex-center.flex-grow', [
@ -39,6 +41,9 @@ RestoreVaultScreen.prototype.render = function () {
// wallet seed entry
h('h3', 'Wallet Seed'),
h('textarea.twelve-word-phrase.letter-spacey', {
dataset: {
persistentFormId: 'wallet-seed',
},
placeholder: 'Enter your secret twelve word phrase here to restore your vault.',
}),
@ -47,6 +52,9 @@ RestoreVaultScreen.prototype.render = function () {
type: 'password',
id: 'password-box',
placeholder: 'New Password (min 8 chars)',
dataset: {
persistentFormId: 'password',
},
style: {
width: 260,
marginTop: 12,
@ -59,6 +67,9 @@ RestoreVaultScreen.prototype.render = function () {
id: 'password-box-confirm',
placeholder: 'Confirm Password',
onKeyPress: this.onMaybeCreate.bind(this),
dataset: {
persistentFormId: 'password-confirmation',
},
style: {
width: 260,
marginTop: 16,

19
ui/app/send.js
View File

@ -1,5 +1,5 @@
const inherits = require('util').inherits
const Component = require('react').Component
const PersistentForm = require('../lib/persistent-form')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const Identicon = require('./components/identicon')
@ -29,12 +29,14 @@ function mapStateToProps (state) {
return result
}
inherits(SendTransactionScreen, Component)
inherits(SendTransactionScreen, PersistentForm)
function SendTransactionScreen () {
Component.call(this)
PersistentForm.call(this)
}
SendTransactionScreen.prototype.render = function () {
this.persistentFormParentId = 'send-tx-form'
var state = this.props
var address = state.address
var account = state.account
@ -137,6 +139,9 @@ SendTransactionScreen.prototype.render = function () {
h('input.large-input', {
name: 'address',
placeholder: 'Recipient Address',
dataset: {
persistentFormId: 'recipient-address',
},
}),
]),
@ -150,6 +155,9 @@ SendTransactionScreen.prototype.render = function () {
style: {
marginRight: 6,
},
dataset: {
persistentFormId: 'tx-amount',
},
}),
h('button.primary', {
@ -185,11 +193,12 @@ SendTransactionScreen.prototype.render = function () {
width: '100%',
resize: 'none',
},
dataset: {
persistentFormId: 'tx-data',
},
}),
]),
])
)
}

57
ui/lib/persistent-form.js Normal file
View File

@ -0,0 +1,57 @@
const inherits = require('util').inherits
const Component = require('react').Component
const defaultKey = 'persistent-form-default'
const eventName = 'keyup'
module.exports = PersistentForm
function PersistentForm () {
Component.call(this)
}
inherits(PersistentForm, Component)
PersistentForm.prototype.componentDidMount = function () {
const fields = document.querySelectorAll('[data-persistent-formid]')
const store = this.getPersistentStore()
fields.forEach((field) => {
const key = field.getAttribute('data-persistent-formid')
const cached = store[key]
if (cached !== undefined) {
field.value = cached
}
field.addEventListener(eventName, this.persistentFieldDidUpdate.bind(this))
})
}
PersistentForm.prototype.getPersistentStore = function () {
let store = window.localStorage[this.persistentFormParentId || defaultKey]
if (store && store !== 'null') {
store = JSON.parse(store)
} else {
store = {}
}
return store
}
PersistentForm.prototype.setPersistentStore = function (newStore) {
window.localStorage[this.persistentFormParentId || defaultKey] = JSON.stringify(newStore)
}
PersistentForm.prototype.persistentFieldDidUpdate = function (event) {
const field = event.target
const store = this.getPersistentStore()
const key = field.getAttribute('data-persistent-formid')
const val = field.value
store[key] = val
this.setPersistentStore(store)
}
PersistentForm.prototype.componentWillUnmount = function () {
const fields = document.querySelectorAll('[data-persistent-formid]')
fields.forEach((field) => {
field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this))
})
this.setPersistentStore({})
}