Dan Finlay
8 years ago
commit
8b81009a30
File diff suppressed because one or more lines are too long
@ -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": {} |
||||
} |
||||
@ -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": {} |
||||
} |
||||
@ -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": {} |
||||
} |
||||
@ -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. |
||||
|
||||
@ -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({}) |
||||
} |
||||
Loading…
Reference in new issue