Add network indicator class to loading image

2 files changed, 190 insertions, 1 deletions

diff --git a/development/states/custom-rpc.json b/development/states/custom-rpc.json
new file mode 100644
index 000000000..ea0f797e6
--- /dev/null
+++ b/development/states/custom-rpc.json
@@ -0,0 +1,189 @@
+{
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": 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
+      },
+      "0x18c643c9cf21027339c8648fbaa2f348ddcbe00a": {
+        "name": "Wallet 4",
+        "address": "0x18c643c9cf21027339c8648fbaa2f348ddcbe00a",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": {},
+      "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": {},
+      "0x2f8d4a878cfa04a6e60d46362f5644deab66572d": {},
+      "0x18c643c9cf21027339c8648fbaa2f348ddcbe00a": {}
+    },
+    "transactions": [
+      {
+        "id": 1470676748243181,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "data": "0x60a060405260046060527f48302e31000000000000000000000000000000000000000000000000000000006080526006805460008290527f48302e310000000000000000000000000000000000000000000000000000000882556100b5907ff652222313e28459528d920b65115c16c04f3efc82aaedc97be59f3f377c0d3f602060026001841615610100026000190190931692909204601f01919091048101905b8082111561017957600081556001016100a1565b505060405161097d38038061097d83398101604052808051906020019091908051820191906020018051906020019091908051820191906020015050836000600050600033600160a060020a0316815260200190815260200160002060005081905550836002600050819055508260036000509080519060200190828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061017d57805160ff19168380011785555b506101ad9291506100a1565b5090565b8280016001018555821561016d579182015b8281111561016d57825182600050559160200191906001019061018f565b50506004805460ff19168317905560058054825160008390527f036b6384b5eca791c62761152d0c79bb0604c104a5fb6f4eb0703f3154bb3db0602060026001851615610100026000190190941693909304601f90810184900482019386019083901061022d57805160ff19168380011785555b5061025d9291506100a1565b82800160010185558215610221579182015b8281111561022157825182600050559160200191906001019061023f565b50505050505061070c806102716000396000f36060604052361561008d5760e060020a600035046306fdde038114610095578063095ea7b3146100f257806318160ddd1461015d57806323b872dd14610166578063313ce567146102c757806354fd4d50146102d357806370a082311461033057806395d89b411461035e578063a9059cbb146103bb578063cae9ca511461044d578063dd62ed3e14610618575b610000610002565b61064c60038054602060026001831615610100026000190190921691909104601f810182900490910260809081016040526060828152929190828280156106ef5780601f106106c4576101008083540402835291602001916106ef565b61034c60043560243533600160a060020a03908116600081815260016020908152604080832094871680845294825282208590556060858152919392917f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b9259190a35060015b92915050565b61034c60025481565b61034c600435602435604435600160a060020a0383166000908152602081905260408120548290108015906101b9575060016020908152604080832033600160a060020a03168452909152812054829010155b80156101c55750600082115b1561070757816000600050600085600160a060020a03168152602001908152602001600020600082828250540192505081905550816000600050600086600160a060020a03168152602001908152602001600020600082828250540392505081905550816001600050600086600160a060020a03168152602001908152602001600020600050600033600160a060020a0316815260200190815260200160002060008282825054039250508190555082600160a060020a031684600160a060020a03167fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef846040518082815260200191505060405180910390a35060016106fb565b6106ba60045460ff1681565b61064c60068054602060026001831615610100026000190190921691909104601f810182900490910260809081016040526060828152929190828280156106ef5780601f106106c4576101008083540402835291602001916106ef565b600160a060020a03600435166000908152602081905260409020545b60408051918252519081900360200190f35b61064c60058054602060026001831615610100026000190190921691909104601f810182900490910260809081016040526060828152929190828280156106ef5780601f106106c4576101008083540402835291602001916106ef565b61034c60043560243533600160a060020a03166000908152602081905260408120548290108015906103ed5750600082115b1561070257604080822080548490039055600160a060020a03808516808452918320805485019055606084815233909116907fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef90602090a3506001610157565b60806020604435600481810135601f81018490049093028401604052606083815261034c948235946024803595606494939101919081908382808284375094965050505050505033600160a060020a03908116600081815260016020908152604080832094881680845294825280832087905580518781529051929493927f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929181900390910190a383600160a060020a031660405180807f72656365697665417070726f76616c28616464726573732c75696e743235362c81526020017f616464726573732c627974657329000000000000000000000000000000000000815260200150602e019050604051809103902060e060020a8091040260e060020a9004338530866040518560e060020a0281526004018085600160a060020a0316815260200184815260200183600160a060020a031681526020018280519060200190808383829060006004602084601f0104600f02600301f150905090810190601f1680156105f05780820380516001836020036101000a031916815260200191505b509450505050506000604051808303816000876161da5a03f19250505015156106f757610002565b61034c600435602435600160a060020a03808316600090815260016020908152604080832093851683529290522054610157565b60405180806020018281038252838181518152602001915080519060200190808383829060006004602084601f0104600f02600301f150905090810190601f1680156106ac5780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b6060908152602090f35b820191906000526020600020905b8154815290600101906020018083116106d257829003601f168201915b505050505081565b5060015b9392505050565b610157565b6106fb5600000000000000000000000000000000000000000000000000000000000000640000000000000000000000000000000000000000000000000000000000000080000000000000000000000000000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000000c000000000000000000000000000000000000000000000000000000000000000084d536674436f696e00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000044d53465400000000000000000000000000000000000000000000000000000000",
+          "gasPrice": "0xba43b7400",
+          "gas": "0xf4240",
+          "origin": "tokenfactory.surge.sh",
+          "metamaskId": 1470676748243181,
+          "metamaskNetworkId": "2"
+        },
+        "time": 1470676748243,
+        "status": "confirmed",
+        "estimatedGas": "0xa9442",
+        "hash": "0xce6f9e068c780a1197117ec9e2103c33ac21bc8d5822aa2293c9c84e72229d88"
+      },
+      {
+        "id": 1470682363931487,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "nonce": "0x2",
+          "gasPrice": "0x4a817c800",
+          "to": "0x059f1e6f420d6fee280bb83e2702dcd06a2ce9c8",
+          "value": "0x3e2c284391c0000",
+          "data": "0xd92ed13700000000000000000000000000000000000000000000000000000000000000620000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000006300000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000012000000000000000000000000000000000000000000000000000000000000001800000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000224d6574614d61736b3a20457468657265756d20696e20796f75722042726f777365720000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000052416e7920696e746572657374696e672064657461696c732061626f757420796f752c207468617420796f7520776f756c64206c696b6520746f20736861726520776974682074686520636f6d6d756e697479000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000137777772e796f7572776562736974652e636f6d00000000000000000000000000",
+          "gasLimit": "0x5ce40",
+          "origin": "www.etherfaces.com",
+          "metamaskId": 1470682363931487,
+          "metamaskNetworkId": "1"
+        },
+        "time": 1470682363931,
+        "status": "confirmed",
+        "estimatedGas": "0x447a0",
+        "containsDelegateCall": false,
+        "hash": "0x4aa629bdc0710f9048c2dd8c35883338de681aff50998b0e14f1079e41e7b3bf"
+      },
+      {
+        "id": 1470682617417416,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "nonce": "0x3",
+          "gasPrice": "0x4a817c800",
+          "to": "0x059f1e6f420d6fee280bb83e2702dcd06a2ce9c8",
+          "value": "0x3e2c284391c0000",
+          "data": "0xd92ed137000000000000000000000000000000000000000000000000000000000000006200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000063000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000120000000000000000000000000000000000000000000000000000000000000016000000000000000000000000000000000000000000000000000000000000001c0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000084d6574614d61736b000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000003e566973697420457468657265756d2044617070732077697468696e206e6f726d616c207765622062726f77736572732077697468204d6574614d61736b210000000000000000000000000000000000000000000000000000000000000000001368747470733a2f2f6d6574616d61736b2e696f00000000000000000000000000",
+          "gasLimit": "0x2fc7720",
+          "origin": "www.etherfaces.com",
+          "metamaskId": 1470682617417416,
+          "metamaskNetworkId": "1"
+        },
+        "time": 1470682617417,
+        "status": "confirmed",
+        "containsDelegateCall": false,
+        "estimatedGas": "0x2faf080",
+        "hash": "0x88bd8c6276854039ea416a8c38e867546cc928670758aebb8db44b9120f7dad2"
+      },
+      {
+        "id": 1470682742887332,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "nonce": "0x3",
+          "gasPrice": "0x4a817c800",
+          "to": "0x059f1e6f420d6fee280bb83e2702dcd06a2ce9c8",
+          "value": "0x470de4df8200000",
+          "data": "0xd92ed137000000000000000000000000000000000000000000000000000000000000006200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000063000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000120000000000000000000000000000000000000000000000000000000000000016000000000000000000000000000000000000000000000000000000000000001c0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000084d6574614d61736b0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000029566973697420457468657265756d20446170707320696e2061206e6f726d616c2042726f777365722e0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000f7777772e6d6574616d61736b2e696f0000000000000000000000000000000000",
+          "gasLimit": "0x2fc7720",
+          "origin": "www.etherfaces.com",
+          "metamaskId": 1470682742887332,
+          "metamaskNetworkId": "1"
+        },
+        "time": 1470682742887,
+        "status": "confirmed",
+        "containsDelegateCall": false,
+        "estimatedGas": "0x2faf080",
+        "hash": "0xc716c9ce00d48edf04ec64ab07ea7b413dd49ffd744359213fe8da69246aad10"
+      },
+      {
+        "id": 1470692493483229,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "data": "0x60a060405260046060527f48302e31000000000000000000000000000000000000000000000000000000006080526006805460008290527f48302e310000000000000000000000000000000000000000000000000000000882556100b5907ff652222313e28459528d920b65115c16c04f3efc82aaedc97be59f3f377c0d3f602060026001841615610100026000190190931692909204601f01919091048101905b8082111561017957600081556001016100a1565b505060405161097d38038061097d83398101604052808051906020019091908051820191906020018051906020019091908051820191906020015050836000600050600033600160a060020a0316815260200190815260200160002060005081905550836002600050819055508260036000509080519060200190828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061017d57805160ff19168380011785555b506101ad9291506100a1565b5090565b8280016001018555821561016d579182015b8281111561016d57825182600050559160200191906001019061018f565b50506004805460ff19168317905560058054825160008390527f036b6384b5eca791c62761152d0c79bb0604c104a5fb6f4eb0703f3154bb3db0602060026001851615610100026000190190941693909304601f90810184900482019386019083901061022d57805160ff19168380011785555b5061025d9291506100a1565b82800160010185558215610221579182015b8281111561022157825182600050559160200191906001019061023f565b50505050505061070c806102716000396000f36060604052361561008d5760e060020a600035046306fdde038114610095578063095ea7b3146100f257806318160ddd1461015d57806323b872dd14610166578063313ce567146102c757806354fd4d50146102d357806370a082311461033057806395d89b411461035e578063a9059cbb146103bb578063cae9ca511461044d578063dd62ed3e14610618575b610000610002565b61064c60038054602060026001831615610100026000190190921691909104601f810182900490910260809081016040526060828152929190828280156106ef5780601f106106c4576101008083540402835291602001916106ef565b61034c60043560243533600160a060020a03908116600081815260016020908152604080832094871680845294825282208590556060858152919392917f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b9259190a35060015b92915050565b61034c60025481565b61034c600435602435604435600160a060020a0383166000908152602081905260408120548290108015906101b9575060016020908152604080832033600160a060020a03168452909152812054829010155b80156101c55750600082115b1561070757816000600050600085600160a060020a03168152602001908152602001600020600082828250540192505081905550816000600050600086600160a060020a03168152602001908152602001600020600082828250540392505081905550816001600050600086600160a060020a03168152602001908152602001600020600050600033600160a060020a0316815260200190815260200160002060008282825054039250508190555082600160a060020a031684600160a060020a03167fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef846040518082815260200191505060405180910390a35060016106fb565b6106ba60045460ff1681565b61064c60068054602060026001831615610100026000190190921691909104601f810182900490910260809081016040526060828152929190828280156106ef5780601f106106c4576101008083540402835291602001916106ef565b600160a060020a03600435166000908152602081905260409020545b60408051918252519081900360200190f35b61064c60058054602060026001831615610100026000190190921691909104601f810182900490910260809081016040526060828152929190828280156106ef5780601f106106c4576101008083540402835291602001916106ef565b61034c60043560243533600160a060020a03166000908152602081905260408120548290108015906103ed5750600082115b1561070257604080822080548490039055600160a060020a03808516808452918320805485019055606084815233909116907fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef90602090a3506001610157565b60806020604435600481810135601f81018490049093028401604052606083815261034c948235946024803595606494939101919081908382808284375094965050505050505033600160a060020a03908116600081815260016020908152604080832094881680845294825280832087905580518781529051929493927f8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925929181900390910190a383600160a060020a031660405180807f72656365697665417070726f76616c28616464726573732c75696e743235362c81526020017f616464726573732c627974657329000000000000000000000000000000000000815260200150602e019050604051809103902060e060020a8091040260e060020a9004338530866040518560e060020a0281526004018085600160a060020a0316815260200184815260200183600160a060020a031681526020018280519060200190808383829060006004602084601f0104600f02600301f150905090810190601f1680156105f05780820380516001836020036101000a031916815260200191505b509450505050506000604051808303816000876161da5a03f19250505015156106f757610002565b61034c600435602435600160a060020a03808316600090815260016020908152604080832093851683529290522054610157565b60405180806020018281038252838181518152602001915080519060200190808383829060006004602084601f0104600f02600301f150905090810190601f1680156106ac5780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b6060908152602090f35b820191906000526020600020905b8154815290600101906020018083116106d257829003601f168201915b505050505081565b5060015b9392505050565b610157565b6106fb5600000000000000000000000000000000000000000000000000000000000027100000000000000000000000000000000000000000000000000000000000000080000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000c000000000000000000000000000000000000000000000000000000000000000084d5346542062757800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000044d53465400000000000000000000000000000000000000000000000000000000",
+          "gasPrice": "0xba43b7400",
+          "gas": "0xf4240",
+          "origin": "tokenfactory.surge.sh",
+          "metamaskId": 1470692493483229,
+          "metamaskNetworkId": "1"
+        },
+        "time": 1470692493483,
+        "status": "confirmed",
+        "estimatedGas": "0xa9482",
+        "hash": "0xe539d7b39c2742261b9b3d1cdb22940275c6cc4d8b80a8a0222f6d2b0b549311"
+      },
+      {
+        "id": 1470962599348486,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "to": "0x69eabf45623e5b53683924dff98309eb39af1a89",
+          "value": "0x2",
+          "origin": "localhost",
+          "metamaskId": 1470962599348486,
+          "metamaskNetworkId": "1"
+        },
+        "time": 1470962599348,
+        "status": "rejected",
+        "containsDelegateCall": false,
+        "estimatedGas": "0x5208"
+      },
+      {
+        "id": 1470963263070463,
+        "txParams": {
+          "from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+          "to": "0x69eabf45623e5b53683924dff98309eb39af1a89",
+          "value": "0x2",
+          "origin": "localhost",
+          "metamaskId": 1470963263070463,
+          "metamaskNetworkId": "1"
+        },
+        "time": 1470963263070,
+        "status": "rejected",
+        "containsDelegateCall": false,
+        "estimatedGas": "0x5208"
+      }
+    ],
+    "selectedAddress": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825",
+    "network": "loading",
+    "seedWords": null,
+    "isConfirmed": true,
+    "isEthConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "rpc",
+      "rpcTarget": "555.203.16.244"
+    },
+    "selectedAccount": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accountDetail",
+      "detailView": null,
+      "context": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"
+    },
+    "accountDetail": {
+      "subview": "transactions"
+    },
+    "currentDomain": "localhost:8080",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null
+  },
+  "identities": {}
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 95901fe70..4a5449836 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -23,7 +23,7 @@ Network.prototype.render = function () {
 
   if (networkNumber === 'loading') {
 
-    return h('img', {
+    return h('img.network-indicator', {
       title: 'Attempting to connect to blockchain.',
       onClick: (event) => this.props.onClick(event),
       style: {