aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEsteban MIno <efmino@uc.cl>2018-08-29 02:20:30 +0800
committerEsteban MIno <efmino@uc.cl>2018-08-29 02:20:30 +0800
commite743f44150d4c09908d24945de5a281e15e8469d (patch)
tree76984504e65b06ae15633d721fedc7ddd5b0cca7
parent3106374cc31b66e5a0faadd657b4430e21aa48b2 (diff)
parent0259eb02140fec1db9861506a6ff7890911af652 (diff)
downloadtangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar
tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.gz
tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.bz2
tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.lz
tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.xz
tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.zst
tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.zip
fix conflicts
-rw-r--r--.babelrc2
-rw-r--r--app/_locales/cs/messages.json2
-rw-r--r--app/_locales/de/messages.json6
-rw-r--r--app/_locales/en/messages.json25
-rw-r--r--app/_locales/es/messages.json2
-rw-r--r--app/_locales/ko/messages.json822
-rw-r--r--app/_locales/ru/messages.json2
-rw-r--r--app/_locales/tml/messages.json2
-rw-r--r--app/_locales/tr/messages.json2
-rw-r--r--app/manifest.json1
-rw-r--r--app/scripts/controllers/preferences.js4
-rw-r--r--app/scripts/lib/account-tracker.js18
-rw-r--r--app/scripts/lib/ipfsContent.js2
-rw-r--r--app/scripts/metamask-controller.js63
-rw-r--r--old-ui/app/components/app-bar.js11
-rw-r--r--package.json7
-rw-r--r--test/e2e/beta/from-import-beta-ui.spec.js6
-rw-r--r--test/e2e/beta/metamask-beta-ui.spec.js221
-rw-r--r--test/integration/lib/add-token.js4
-rw-r--r--test/integration/lib/confirm-sig-requests.js2
-rw-r--r--test/integration/lib/currency-localization.js8
-rw-r--r--test/integration/lib/send-new-ui.js6
-rw-r--r--test/integration/lib/tx-list-items.js21
-rw-r--r--test/unit/app/controllers/metamask-controller-test.js71
-rw-r--r--ui/app/account-and-transaction-details.js33
-rw-r--r--ui/app/app.js4
-rw-r--r--ui/app/components/balance-component.js35
-rw-r--r--ui/app/components/buy-button-subview.js267
-rw-r--r--ui/app/components/currency-display/currency-display.component.js26
-rw-r--r--ui/app/components/currency-display/currency-display.container.js19
-rw-r--r--ui/app/components/currency-display/index.js1
-rw-r--r--ui/app/components/currency-display/tests/currency-display.component.test.js27
-rw-r--r--ui/app/components/currency-display/tests/currency-display.container.test.js61
-rw-r--r--ui/app/components/custom-radio-list.js60
-rw-r--r--ui/app/components/dropdowns/network-dropdown.js12
-rw-r--r--ui/app/components/index.scss24
-rw-r--r--ui/app/components/menu-bar/index.js1
-rw-r--r--ui/app/components/menu-bar/index.scss23
-rw-r--r--ui/app/components/menu-bar/menu-bar.component.js52
-rw-r--r--ui/app/components/menu-bar/menu-bar.container.js21
-rw-r--r--ui/app/components/modals/account-details-modal.js2
-rw-r--r--ui/app/components/modals/account-modal-container.js4
-rw-r--r--ui/app/components/modals/export-private-key-modal.js48
-rw-r--r--ui/app/components/page-container/index.scss2
-rw-r--r--ui/app/components/page-container/page-container-header/page-container-header.component.js28
-rw-r--r--ui/app/components/page-container/page-container.component.js84
-rw-r--r--ui/app/components/pages/add-token/add-token.component.js82
-rw-r--r--ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js2
-rw-r--r--ui/app/components/pages/confirm-add-token/confirm-add-token.component.js4
-rw-r--r--ui/app/components/pages/confirm-add-token/token-balance/index.js2
-rw-r--r--ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js16
-rw-r--r--ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js17
-rw-r--r--ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js3
-rw-r--r--ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js6
-rw-r--r--ui/app/components/pages/home.js247
-rw-r--r--ui/app/components/pages/home/home.component.js77
-rw-r--r--ui/app/components/pages/home/home.container.js30
-rw-r--r--ui/app/components/pages/home/index.js1
-rw-r--r--ui/app/components/pending-msg-details.js56
-rw-r--r--ui/app/components/pending-msg.js73
-rw-r--r--ui/app/components/send/send-content/send-to-row/send-to-row.component.js2
-rw-r--r--ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js2
-rw-r--r--ui/app/components/sender-to-recipient/index.scss147
-rw-r--r--ui/app/components/sender-to-recipient/sender-to-recipient.component.js141
-rw-r--r--ui/app/components/sender-to-recipient/sender-to-recipient.constants.js3
-rw-r--r--ui/app/components/shift-list-item.js3
-rw-r--r--ui/app/components/tabs/tab/tab.component.js13
-rw-r--r--ui/app/components/token-balance.js120
-rw-r--r--ui/app/components/token-balance/index.js1
-rw-r--r--ui/app/components/token-balance/token-balance.component.js23
-rw-r--r--ui/app/components/token-balance/token-balance.container.js (renamed from ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js)4
-rw-r--r--ui/app/components/token-currency-display/index.js1
-rw-r--r--ui/app/components/token-currency-display/token-currency-display.component.js54
-rw-r--r--ui/app/components/transaction-action/index.js1
-rw-r--r--ui/app/components/transaction-action/tests/transaction-action.component.test.js112
-rw-r--r--ui/app/components/transaction-action/transaction-action.component.js52
-rw-r--r--ui/app/components/transaction-list-item/index.js1
-rw-r--r--ui/app/components/transaction-list-item/index.scss117
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.component.js148
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.container.js32
-rw-r--r--ui/app/components/transaction-list/index.js1
-rw-r--r--ui/app/components/transaction-list/index.scss46
-rw-r--r--ui/app/components/transaction-list/transaction-list.component.js117
-rw-r--r--ui/app/components/transaction-list/transaction-list.container.js50
-rw-r--r--ui/app/components/transaction-status/index.js1
-rw-r--r--ui/app/components/transaction-status/index.scss28
-rw-r--r--ui/app/components/transaction-status/transaction-status.component.js51
-rw-r--r--ui/app/components/transaction-view-balance/index.js1
-rw-r--r--ui/app/components/transaction-view-balance/index.scss76
-rw-r--r--ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js71
-rw-r--r--ui/app/components/transaction-view-balance/transaction-view-balance.component.js94
-rw-r--r--ui/app/components/transaction-view-balance/transaction-view-balance.container.js30
-rw-r--r--ui/app/components/transaction-view/index.js1
-rw-r--r--ui/app/components/transaction-view/index.scss27
-rw-r--r--ui/app/components/transaction-view/transaction-view.component.js27
-rw-r--r--ui/app/components/tx-list-item.js356
-rw-r--r--ui/app/components/tx-list.js171
-rw-r--r--ui/app/components/tx-view.js156
-rw-r--r--ui/app/components/wallet-view.js7
-rw-r--r--ui/app/constants/common.js1
-rw-r--r--ui/app/constants/transactions.js22
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss130
-rw-r--r--ui/app/css/itcss/components/index.scss2
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss27
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss2
-rw-r--r--ui/app/ducks/confirm-transaction.duck.js50
-rw-r--r--ui/app/ducks/tests/confirm-transaction.duck.test.js70
-rw-r--r--ui/app/helpers/confirm-transaction/util.js25
-rw-r--r--ui/app/helpers/confirm-transaction/util.test.js6
-rw-r--r--ui/app/helpers/conversions.util.js37
-rw-r--r--ui/app/helpers/transactions.util.js105
-rw-r--r--ui/app/higher-order-components/with-method-data/index.js1
-rw-r--r--ui/app/higher-order-components/with-method-data/with-method-data.component.js52
-rw-r--r--ui/app/higher-order-components/with-token-tracker/index.js1
-rw-r--r--ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js (renamed from ui/app/helpers/with-token-tracker.js)4
-rw-r--r--ui/app/i18n-provider.js11
-rw-r--r--ui/app/main-container.js49
-rw-r--r--ui/app/new-keychain.js29
-rw-r--r--ui/app/selectors.js21
-rw-r--r--ui/app/selectors/tokens.js11
-rw-r--r--ui/app/selectors/transactions.js58
-rw-r--r--ui/app/token-util.js116
-rw-r--r--ui/app/util.js2
123 files changed, 3454 insertions, 2426 deletions
diff --git a/.babelrc b/.babelrc
index fcabd2d1a..9b1d5409b 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
{
- "presets": [["env"], "react", "stage-0"],
+ "presets": [["env", { "targets": { "browsers": [">0.25%", "not ie 11", "not op_mini all"] } } ], "react", "stage-0"],
"plugins": ["transform-runtime", "transform-async-to-generator", "transform-class-properties"]
}
diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json
index 6a4ebc8a5..55344f3e1 100644
--- a/app/_locales/cs/messages.json
+++ b/app/_locales/cs/messages.json
@@ -796,7 +796,7 @@
"message": "Testovací faucet"
},
"to": {
- "message": "Komu: "
+ "message": "Komu"
},
"toETHviaShapeShift": {
"message": "$1 na ETH přes ShapeShift",
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
index c06a99250..352d5ad7d 100644
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@@ -384,7 +384,7 @@
"infoHelp": {
"message": "Info & Hilfe"
},
- "insufficientFunds": {
+ "insufficientFunds": {
"message": "Nicht genügend Guthaben."
},
"insufficientTokens": {
@@ -572,7 +572,7 @@
"description": "Wähle diesen Dateityp um damit einen Account zu importieren"
},
"privateKeyWarning": {
- "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen."
+ "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen."
},
"privateNetwork": {
"message": "Privates Netzwerk"
@@ -775,7 +775,7 @@
"message": "Testfaucet"
},
"to": {
- "message": "An:"
+ "message": "An"
},
"toETHviaShapeShift": {
"message": "$1 an ETH via ShapeShift",
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f61fb4335..3cc8dae34 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -454,6 +454,9 @@
"hideTokenPrompt": {
"message": "Hide Token?"
},
+ "history": {
+ "message": "History"
+ },
"howToDeposit": {
"message": "How would you like to deposit Ether?"
},
@@ -654,7 +657,7 @@
"message": "No transaction history."
},
"noTransactions": {
- "message": "No Transactions"
+ "message": "You have no transactions"
},
"notFound": {
"message": "Not Found"
@@ -705,6 +708,9 @@
"pasteSeed": {
"message": "Paste your seed phrase here!"
},
+ "pending": {
+ "message": "pending"
+ },
"personalAddressDetected": {
"message": "Personal address detected. Input the token contract address."
},
@@ -733,6 +739,9 @@
"qrCode": {
"message": "Show QR Code"
},
+ "queue": {
+ "message": "Queue"
+ },
"readdToken": {
"message": "You can add this token back in the future by going go to “Add token” in your accounts options menu."
},
@@ -900,6 +909,12 @@
"sendTokens": {
"message": "Send Tokens"
},
+ "sentEther": {
+ "message": "sent ether"
+ },
+ "sentTokens": {
+ "message": "sent tokens"
+ },
"separateEachWord": {
"message": "Separate each word with a single space"
},
@@ -913,6 +928,9 @@
"orderOneHere": {
"message": "Order a Trezor or Ledger and keep your funds in cold storage"
},
+ "outgoing": {
+ "message": "Outgoing"
+ },
"searchTokens": {
"message": "Search Tokens"
},
@@ -976,6 +994,9 @@
"sign": {
"message": "Sign"
},
+ "signatureRequest": {
+ "message": "Signature Request"
+ },
"signed": {
"message": "Signed"
},
@@ -1028,7 +1049,7 @@
"message": "Test Faucet"
},
"to": {
- "message": "To: "
+ "message": "To"
},
"toETHviaShapeShift": {
"message": "$1 to ETH via ShapeShift",
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index ed7f8f681..3e43a7b43 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -772,7 +772,7 @@
"message": "Probar Faucet"
},
"to": {
- "message": "Para:"
+ "message": "Para"
},
"toETHviaShapeShift": {
"message": "$1 a ETH via ShapeShift",
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index d3801c4f5..30d032357 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -3,86 +3,125 @@
"message": "수락"
},
"account": {
- "message": "계좌"
+ "message": "계정"
},
"accountDetails": {
- "message": "계좌 상세보기"
+ "message": "계정 상세보기"
},
"accountName": {
- "message": "계좌 이름"
+ "message": "계정 이름"
},
"address": {
"message": "주소"
},
+ "addCustomToken": {
+ "message": "사용자 정의 토큰 추가"
+ },
"addToken": {
"message": "토큰 추가"
},
+ "addTokens": {
+ "message": "토큰 추가"
+ },
+ "addAcquiredTokens": {
+ "message": "메타마스크를 통해 획득한 토큰 추가"
+ },
"amount": {
- "message": "금액"
+ "message": "수량"
},
"amountPlusGas": {
- "message": "금액 + 가스"
+ "message": "수량 + 가스"
},
"appDescription": {
"message": "이더리움 브라우저 확장 프로그램",
- "description": "어플리케이션 내용"
+ "description": "어플리케이션 설명"
},
"appName": {
"message": "메타마스크",
"description": "어플리케이션 이름"
},
+ "approved": {
+ "message": "수락"
+ },
"attemptingConnect": {
- "message": "블록체인에 접속 시도 중입니다."
+ "message": "블록체인에 접속을 시도하는 중입니다."
+ },
+ "attributions": {
+ "message": "속성"
},
"available": {
- "message": "사용 가능한"
+ "message": "사용 가능"
},
"back": {
- "message": "뒤로"
+ "message": "돌아가기"
},
"balance": {
- "message": "잔액:"
+ "message": "잔액"
+ },
+ "balances": {
+ "message": "토큰 잔액"
},
"balanceIsInsufficientGas": {
- "message": "가스가 충분하지 않습니다."
+ "message": "현재 가스 총합에 대해 잔액이 부족합니다"
},
"beta": {
- "message": "베타"
+ "message": "BETA"
},
"betweenMinAndMax": {
"message": "$1 이상 $2 이하여야 합니다.",
- "description": "helper for inputting hex as decimal input"
+ "description": "10진수 입력으로 hex값 입력을 도와줍니다"
+ },
+ "blockiesIdenticon": {
+ "message": "Blockies 아이덴티콘 사용"
},
"borrowDharma": {
- "message": "Dharma에서 빌리기(베타)"
+ "message": "Dharma에서 대여하기(Beta)"
+ },
+ "builtInCalifornia": {
+ "message": "메타마스크는 캘리포니아에서 디자인되고 만들어졌습니다."
},
"buy": {
"message": "구매"
},
"buyCoinbase": {
- "message": "코인베이스에서 구매"
+ "message": "코인베이스에서 구매하기"
},
"buyCoinbaseExplainer": {
- "message": "코인베이스에서 비트코인, 이더리움, 라이트코인을 구매하실 수 있습니다."
+ "message": "코인베이스는 비트코인, 이더리움, 라이트코인을 거래할 수 있는 유명한 거래소입니다."
+ },
+ "ok": {
+ "message": "확인"
},
"cancel": {
"message": "취소"
},
+ "classicInterface": {
+ "message": "예전 인터페이스"
+ },
"clickCopy": {
"message": "클릭하여 복사"
},
+ "close": {
+ "message": "닫기"
+ },
"confirm": {
"message": "승인"
},
+ "confirmed": {
+ "message": "승인됨"
+ },
"confirmContract": {
"message": "컨트랙트 승인"
},
"confirmPassword": {
- "message": "패스워드 승인"
+ "message": "비밀번호 확인"
},
"confirmTransaction": {
"message": "트랜잭션 승인"
},
+ "continue": {
+ "message": "계속"
+ },
"continueToCoinbase": {
"message": "코인베이스로 계속하기"
},
@@ -90,72 +129,93 @@
"message": "컨트랙트 배포"
},
"conversionProgress": {
- "message": "변환중.."
+ "message": "변환 진행중"
},
"copiedButton": {
- "message": "복사되었습니다."
+ "message": "복사됨"
},
"copiedClipboard": {
- "message": "클립보드에 복사되었습니다."
+ "message": "클립보드에 복사되었습니다"
},
"copiedExclamation": {
- "message": "복사되었습니다."
+ "message": "복사됨!"
+ },
+ "copiedSafe": {
+ "message": "안전한 곳에 복사하였습니다"
},
"copy": {
- "message": "복사하기"
+ "message": "복사"
+ },
+ "copyContractAddress": {
+ "message": "컨트랙트 주소 복사"
},
"copyToClipboard": {
- "message": "클립보드에 복사"
+ "message": "클립보드로 복사"
},
"copyButton": {
"message": " 복사 "
},
"copyPrivateKey": {
- "message": "비밀 키 (클릭하여 복사)"
+ "message": "비밀 키입니다 (클릭하여 복사)"
},
"create": {
"message": "생성"
},
"createAccount": {
- "message": "계좌 생성"
+ "message": "계정 생성"
},
"createDen": {
"message": "생성"
},
"crypto": {
"message": "암호화폐",
- "description": "Exchange type (cryptocurrencies)"
+ "description": "거래 유형 (암호화폐)"
+ },
+ "currentConversion": {
+ "message": "선택된 단위"
+ },
+ "currentNetwork": {
+ "message": "현재 네트워크"
},
"customGas": {
"message": "가스 설정"
},
+ "customToken": {
+ "message": "사용자 정의 토큰"
+ },
"customize": {
- "message": "커스터마이즈"
+ "message": "맞춤화 하기"
},
"customRPC": {
- "message": "커스텀 RPC"
+ "message": "사용자 정의 RPC"
+ },
+ "decimalsMustZerotoTen": {
+ "message": "소수점은 0 이상이고 36 이하여야 합니다."
+ },
+ "decimal": {
+ "message": "소수점 정확도"
},
"defaultNetwork": {
"message": "이더리움 트랜잭션의 기본 네트워크는 메인넷입니다."
},
"denExplainer": {
- "message": "DEN은 비밀번호가 암호화 된 MetaMask의 스토리지입니다."
+ "message": "DEN은 비밀번호로 암호화 된 메타마스크의 저장소입니다."
},
"deposit": {
"message": "입금"
},
"depositBTC": {
- "message": "아래 주소로 BTC를 입급해주세요."
+ "message": "다음 주소로 BTC를 입급해주세요."
},
"depositCoin": {
- "message": "아래 주소로 $1를 입금해주세요.",
- "description": "Tells the user what coin they have selected to deposit with shapeshift"
+ "message": "다음 주소로 $1 만큼 입금해주세요.",
+ "description": "사용자에게 shapeshift에서 어떤 코인을 선택해 입금했는지 알려줍니다"
},
"depositEth": {
- "message": "이더 입금"
+ "message": "이더 입금하기"
},
"depositEther": {
- "message": "이더 입금"
+ "message": "이더리움 입금하기"
},
"depositFiat": {
"message": "현금으로 입금하기"
@@ -167,10 +227,10 @@
"message": "ShapeShift를 통해 입금하기"
},
"depositShapeShiftExplainer": {
- "message": "다른 암호화폐를 가지고 있으면, 계좌 생성 필요없이, 거래를 하거나 메타마스크 지갑을 통해 이더를 입금할 수 있습니다."
+ "message": "다른 암호화폐를 가지고 있으면, 계정을 생성할 필요없이 메타마스크 지갑에 이더리움을 바로 거래하거나 입금할 수 있습니다."
},
"details": {
- "message": "상세"
+ "message": "세부사항"
},
"directDeposit": {
"message": "즉시 입금"
@@ -179,70 +239,103 @@
"message": "이더 즉시 입금"
},
"directDepositEtherExplainer": {
- "message": "이더를 이미 보유하고 있다면, 직접 입금을 통해 이더를 즉시 입금하실 수 있습니다."
+ "message": "약간의 이더를 이미 보유하고 있다면, 새로 만든 지갑에 직접 입금하여 이더를 보유할 수 있습니다."
},
"done": {
"message": "완료"
},
+ "downloadStateLogs": {
+ "message": "상태 로그 다운로드"
+ },
+ "dropped": {
+ "message": "중단됨"
+ },
"edit": {
"message": "수정"
},
"editAccountName": {
- "message": "계좌명 수정"
+ "message": "계정 이름 수정"
+ },
+ "editingTransaction": {
+ "message": "트랜젝션을 변경합니다"
+ },
+ "emailUs": {
+ "message": "저자에게 메일 보내기!"
},
"encryptNewDen": {
- "message": "새 DEN 암호화"
+ "message": "새로운 DEN을 암호화"
},
"enterPassword": {
- "message": "패스워드를 입력해주세요."
+ "message": "비밀번호를 입력해주세요"
+ },
+ "enterPasswordConfirm": {
+ "message": "비밀번호를 다시 입력해 주세요"
+ },
+ "enterPasswordContinue": {
+ "message": "계속하기 위해 비밀번호 입력"
+ },
+ "passwordNotLongEnough": {
+ "message": "비밀번호가 충분히 길지 않습니다"
+ },
+ "passwordsDontMatch": {
+ "message": "비밀번호가 맞지 않습니다"
},
"etherscanView": {
- "message": "이더스캔에서 계좌보기"
+ "message": "이더스캔에서 계정보기"
},
"exchangeRate": {
"message": "환율"
},
"exportPrivateKey": {
- "message": "비밀키 내보내기"
+ "message": "개인키 내보내기"
},
"exportPrivateKeyWarning": {
- "message": "Export private keys at your own risk."
+ "message": "개인키 내보내기는 위험을 감수해야 합니다."
},
"failed": {
"message": "실패"
},
"fiat": {
"message": "FIAT",
- "description": "Exchange type"
+ "description": "거래 형식"
},
"fileImportFail": {
- "message": "파일을 가져올 수 없나요? 여기를 클릭해주세요!",
- "description": "Helps user import their account from a JSON file"
+ "message": "파일을 가져올 수 없나요? 이곳을 클릭해주세요!",
+ "description": "JSON 파일로부터 계정 가져오기를 도와줍니다"
+ },
+ "followTwitter": {
+ "message": "트위터에서 팔로우하세요"
},
"from": {
- "message": "보내는 사람"
+ "message": "보내는 이"
+ },
+ "fromToSame": {
+ "message": "보내고 받는 주소는 동일할 수 없습니다"
},
"fromShapeShift": {
"message": "ShapeShift로 부터"
},
"gas": {
"message": "가스",
- "description": "Short indication of gas cost"
+ "description": "가스 가격의 줄임"
},
"gasFee": {
"message": "가스 수수료"
},
"gasLimit": {
- "message": "가스 리밋"
+ "message": "가스 한도"
},
"gasLimitCalculation": {
- "message": "네트워크 성공률을 기반으로 적합한 가스 리밋을 계산합니다."
+ "message": "네트워크 성공률을 기반으로 적합한 가스 한도를 계산합니다."
},
"gasLimitRequired": {
- "message": "가스 리밋이 필요합니다."
+ "message": "가스 한도가 필요합니다."
},
"gasLimitTooLow": {
- "message": "가스 리밋은 21000 이상이여야 합니다."
+ "message": "가스 한도는 최소 21000 이상이여야 합니다."
+ },
+ "generatingSeed": {
+ "message": "시드 생성중..."
},
"gasPrice": {
"message": "가스 가격 (GWEI)"
@@ -253,21 +346,27 @@
"gasPriceRequired": {
"message": "가스 가격이 필요합니다."
},
+ "generatingTransaction": {
+ "message": "트랜잭션 생성중"
+ },
"getEther": {
"message": "이더 얻기"
},
"getEtherFromFaucet": {
- "message": "faucet에서 $1에 달하는 이더를 얻으세요.",
- "description": "Displays network name for Ether faucet"
+ "message": "파우셋에서 $1에 달하는 이더를 얻으세요.",
+ "description": "이더 파우셋에 대한 네트워크 이름을 표시합니다"
},
"greaterThanMin": {
"message": "$1 이상이어야 합니다.",
- "description": "helper for inputting hex as decimal input"
+ "description": "10진수 입력으로 hex값 입력을 도와줍니다"
},
"here": {
"message": "여기",
"description": "as in -click here- for more information (goes with troubleTokenBalances)"
},
+ "hereList": {
+ "message": "리스트가 있습니다!!!!"
+ },
"hide": {
"message": "숨기기"
},
@@ -280,51 +379,96 @@
"howToDeposit": {
"message": "어떤 방법으로 이더를 입금하시겠습니까?"
},
+ "holdEther": {
+ "message": "It allows you to hold ether & tokens, and serves as your bridge to decentralized applications."
+ },
"import": {
- "message": "파일에서 가져오기",
- "description": "Button to import an account from a selected file"
+ "message": "가져오기",
+ "description": "선택된 파일로부터 계정 가져오기 버튼"
},
"importAccount": {
- "message": "계좌 가져오기"
+ "message": "계정 가져오기"
+ },
+ "importAccountMsg": {
+ "message": " 가져온 계정은 메타마스크에서 원래 생성된 계정의 시드구문과 연관성이 없습니다. 가져온 계정에 대해 더 배우기 "
},
"importAnAccount": {
- "message": "계좌 가져오기"
+ "message": "계정 가져오기"
},
"importDen": {
- "message": "기존 DEN 가져오기"
+ "message": "기존의 DEN 가져오기"
},
"imported": {
- "message": "가져오기 완료",
- "description": "status showing that an account has been fully loaded into the keyring"
+ "message": "가져온 계정",
+ "description": "이 상태는 해당 계정이 keyring으로 완전히 적재된 상태임을 표시합니다"
+ },
+ "importUsingSeed": {
+ "message": "계정 시드 구문으로 가져오기"
},
"infoHelp": {
"message": "정보 및 도움말"
},
+ "initialTransactionConfirmed": {
+ "message": "초기 트랜잭션이 네트워크를 통해 확정되었습니다. 확인을 누르고 이전으로 돌아갑니다."
+ },
+ "insufficientFunds": {
+ "message": "충분하지 않은 자금."
+ },
+ "insufficientTokens": {
+ "message": "충분하지 않은 토큰."
+ },
"invalidAddress": {
- "message": "유효하지 않은 주소"
+ "message": "올바르지 않은 주소"
+ },
+ "invalidAddressRecipient": {
+ "message": "수신 주소가 올바르지 않습니다"
},
"invalidGasParams": {
- "message": "유효하지 않은 가스 입력값"
+ "message": "올바르지 않은 가스 입력값"
},
"invalidInput": {
- "message": "유효하지 않은 입력값"
+ "message": "올바르지 않은 입력값"
},
"invalidRequest": {
"message": "유효하지 않은 요청"
},
+ "invalidRPC": {
+ "message": "올바르지 않은 RPC URI"
+ },
+ "jsonFail": {
+ "message": "이상이 있습니다. JSON 파일이 올바른 파일인지 확인해주세요."
+ },
"jsonFile": {
"message": "JSON 파일",
- "description": "format for importing an account"
+ "description": "계정을 가져오기 위한 형식"
+ },
+ "keepTrackTokens": {
+ "message": "메타마스크 계정을 통해 구입한 토큰 기록을 추적 및 보관합니다."
},
"kovan": {
"message": "Kovan 테스트넷"
},
+ "knowledgeDataBase": {
+ "message": "지식 베이스 방문"
+ },
+ "max": {
+ "message": "최대"
+ },
+ "learnMore": {
+ "message": "더 배우기."
+ },
"lessThanMax": {
"message": "$1 이하여야합니다.",
- "description": "helper for inputting hex as decimal input"
+ "description": "10진수 입력으로 hex값 입력을 도와줍니다"
+ },
+ "likeToAddTokens": {
+ "message": "토큰을 추가하시겠습니까?"
+ },
+ "links": {
+ "message": "링크"
},
"limit": {
- "message": "리밋"
+ "message": "한도"
},
"loading": {
"message": "로딩중..."
@@ -335,11 +479,17 @@
"localhost": {
"message": "로컬호스트 8545"
},
+ "login": {
+ "message": "로그인"
+ },
"logout": {
"message": "로그아웃"
},
"loose": {
- "message": "외부 비밀키"
+ "message": "느슨함"
+ },
+ "loweCaseWords": {
+ "message": "시드 단어는 소문자만 가능합니다"
},
"mainnet": {
"message": "이더리움 메인넷"
@@ -347,94 +497,127 @@
"message": {
"message": "메시지"
},
+ "metamaskDescription": {
+ "message": "메타마스크는 이더리움을 위한 안전한 신분 저장소입니다."
+ },
+ "metamaskSeedWords": {
+ "message": "메타마스크 시드 단어"
+ },
"min": {
"message": "최소"
},
"myAccounts": {
- "message": "내 계좌"
+ "message": "내 계정"
+ },
+ "mustSelectOne": {
+ "message": "적어도 하나의 토큰을 선택하세요."
},
"needEtherInWallet": {
- "message": "dApp을 이용하기 위해서는 지갑에 이더가 있어야 합니다."
+ "message": "메타마스크를 통한 dApp을 이용하기 위해서는 지갑에 이더가 있어야 합니다."
},
"needImportFile": {
"message": "가져올 파일을 선택해주세요.",
- "description": "User is important an account and needs to add a file to continue"
+ "description": "사용자는 계정을 가져오기 위해서 파일을 추가후 계속 진행해야 합니다"
},
"needImportPassword": {
- "message": "선택 된 파일에 패스워드를 입력해주세요.",
- "description": "Password and file needed to import an account"
+ "message": "선택 된 파일에 대한 비밀번호를 입력해주세요.",
+ "description": "계정을 가져오기 위해서 비밀번호와 파일이 필요합니다."
+ },
+ "negativeETH": {
+ "message": "음수값의 이더를 보낼 수 없습니다."
},
"networks": {
"message": "네트워크"
},
+ "nevermind": {
+ "message": "상관안함"
+ },
"newAccount": {
- "message": "새 계좌"
+ "message": "새 계정"
},
"newAccountNumberName": {
- "message": "새 계좌 $1",
- "description": "Default name of next account to be created on create account screen"
+ "message": "새 계정 $1",
+ "description": "계정 생성시 볼 수 있는 새 계정의 기본 이름"
},
"newContract": {
"message": "새 컨트랙트"
},
"newPassword": {
- "message": "새 패스워드 (최소 8자 이상)"
+ "message": "새 비밀번호 (최소 8자 이상)"
},
"newRecipient": {
"message": "받는 사람"
},
+ "newRPC": {
+ "message": "새로운 RPC URL"
+ },
"next": {
"message": "다음"
},
"noAddressForName": {
- "message": "이 이름에는 주소가 설정되어 있지 않습니다."
+ "message": "이 이름에 대해 주소가 설정되어 있지 않습니다."
},
"noDeposits": {
- "message": "입금이 없습니다."
+ "message": "입금 내역이 없습니다."
},
"noTransactionHistory": {
"message": "트랜잭션 기록이 없습니다."
},
"noTransactions": {
- "message": "트랜잭션이 없습니다."
+ "message": "트랜잭션이 없습니다"
},
"notStarted": {
- "message": "시작되지 않음."
+ "message": "시작 안됨"
},
"oldUI": {
- "message": "구버전의 UI"
+ "message": "구버전 UI"
},
"oldUIMessage": {
- "message": "구버전 UI로 변경하셨습니다. 우 상단 드랍다운 메뉴에서 새 UI로 변경하실 수 있습니다."
+ "message": "구버전 UI로 변경하셨습니다. 우 상단 드롭다운 메뉴에서 새 UI로 변경하실 수 있습니다."
},
"or": {
"message": "또는",
- "description": "choice between creating or importing a new account"
+ "description": "새 계정을 만들거나 가져오기중에 선택하기"
+ },
+ "password": {
+ "message": "비밀번호"
+ },
+ "passwordCorrect": {
+ "message": "비밀번호가 맞는지 확인해주세요."
},
"passwordMismatch": {
- "message": "패스워드가 일치하지 않습니다.",
- "description": "in password creation process, the two new password fields did not match"
+ "message": "비밀번호가 일치하지 않습니다.",
+ "description": "비밀번호를 생성하는 과정에서 두개의 새 비밀번호 입력란이 일치하지 않습니다"
},
"passwordShort": {
- "message": "패스워드가 너무 짧습니다.",
- "description": "in password creation process, the password is not long enough to be secure"
+ "message": "비밀번호가 짧습니다.",
+ "description": "비밀번호를 생성하는 과정에서 비밀번호가 짧으면 안전하지 않습니다"
},
"pastePrivateKey": {
- "message": "비밀키를 입력해주세요.",
- "description": "For importing an account from a private key"
+ "message": "개인키를 입력해주세요:",
+ "description": "개인키로부터 계정을 가져오는 것입니다"
},
"pasteSeed": {
- "message": "시드 문장들을 붙여넣어주세요."
+ "message": "시드 구문을 이곳에 붙여넣어주세요!"
+ },
+ "personalAddressDetected": {
+ "message": "개인 주소가 탐지됨. 토큰 컨트랙트 주소를 입력하세요."
},
"pleaseReviewTransaction": {
"message": "트랜잭션을 검토해주세요."
},
+ "popularTokens": {
+ "message": "인기있는 토큰"
+ },
+ "privacyMsg": {
+ "message": "개인정보 보호 정책"
+ },
"privateKey": {
- "message": "비밀키",
- "description": "select this type of file to use to import an account"
+ "message": "개인키",
+ "description": "이 형식의 파일을 선택하여 계정을 가져올 수 있습니다"
},
"privateKeyWarning": {
- "message": " 절대 이 키를 노출하지 마십시오. 비밀키가 노출되면 누구나 당신의 계좌에서 자산을 빼갈 수 있습니다."
+ "message": " 절대 이 키를 노출하지 마십시오. 개인키가 노출되면 누구나 당신의 계정에서 자산을 빼갈 수 있습니다."
},
"privateNetwork": {
"message": "프라이빗 네트워크"
@@ -446,28 +629,64 @@
"message": "옵션 메뉴에서 “토큰 추가”를 눌러서 추후에 다시 이 토큰을 추가하실 수 있습니다."
},
"readMore": {
- "message": "더 읽기."
+ "message": "여기서 더 보기."
+ },
+ "readMore2": {
+ "message": "더 보기."
},
"receive": {
"message": "받기"
},
"recipientAddress": {
- "message": "받는 사람 주소"
+ "message": "받는 주소"
},
"refundAddress": {
"message": "환불받을 주소"
},
"rejected": {
- "message": "거부되었음."
+ "message": "거부됨"
+ },
+ "reset": {
+ "message": "초기화"
+ },
+ "resetAccount": {
+ "message": "계정 초기화"
+ },
+ "resetAccountDescription": {
+ "message": "계정을 초기화 하는 경우에 트랜잭션 기록이 삭제됩니다."
+ },
+ "restoreFromSeed": {
+ "message": "계정을 복구하시겠습니까?"
+ },
+ "restoreVault": {
+ "message": "저장소 복구"
},
"required": {
- "message": "필요함."
+ "message": "필요함"
},
"retryWithMoreGas": {
- "message": "더 높은 가스 가격으로 다시 시도해주세요."
+ "message": "더 높은 가스 가격으로 다시 시도해주세요"
+ },
+ "walletSeed": {
+ "message": "지갑 시드값"
+ },
+ "revealSeedWords": {
+ "message": "시드 단어 보이기"
+ },
+ "revealSeedWordsTitle": {
+ "message": "시드 단어"
+ },
+ "revealSeedWordsDescription": {
+ "message": "브라우저를 바꾸거나 컴퓨터를 옮기는 경우 이 시드 구문이 필요하며 이를 통해 계정에 접근할 수 있습니다. 시드 구문을 안전한 곳에 보관하세요."
+ },
+ "revealSeedWordsWarningTitle": {
+ "message": "이 구문을 다른사람과 절대로 공유하지 마세요!"
+ },
+ "revealSeedWordsWarning": {
+ "message": "이 단어모음은 당신의 모든 계정을 훔치는데 사용할 수 있습니다."
},
"revert": {
- "message": "취소"
+ "message": "되돌림"
},
"rinkeby": {
"message": "Rinkeby 테스트넷"
@@ -475,46 +694,122 @@
"ropsten": {
"message": "Ropsten 테스트넷"
},
+ "rpc": {
+ "message": "사용자 정의 RPC"
+ },
+ "currentRpc": {
+ "message": "현재 RPC"
+ },
+ "connectingToMainnet": {
+ "message": "이더리움 메인넷 접속중"
+ },
+ "connectingToRopsten": {
+ "message": "Ropsten 테스트넷 접속중"
+ },
+ "connectingToKovan": {
+ "message": "Kovan 테스트넷 접속중"
+ },
+ "connectingToRinkeby": {
+ "message": "Rinkeby 테스트넷 접속중"
+ },
+ "connectingToUnknown": {
+ "message": "알려지지 않은 네트워크 접속중"
+ },
"sampleAccountName": {
- "message": "예) 나의 새 계좌",
- "description": "Help user understand concept of adding a human-readable name to their account"
+ "message": "예) 나의 새 계정",
+ "description": "각 계정에 대해서 구별하기 쉬운 이름을 지정하여 사용자가 쉽게 이해할 수 있게 합니다"
},
"save": {
"message": "저장"
},
+ "speedUpTitle": {
+ "message": "트랜잭션 속도 향상하기"
+ },
+ "speedUpSubtitle": {
+ "message": "트랜잭션 가스 가격을 늘려서 해당 트랙잭션에 덮어쓰기 하여 속도를 빠르게 합니다"
+ },
+ "saveAsCsvFile": {
+ "message": "CSV 파일로 저장"
+ },
"saveAsFile": {
"message": "파일로 저장",
- "description": "Account export process"
+ "description": "계정 내보내기 절차"
+ },
+ "saveSeedAsFile": {
+ "message": "시드 단어를 파일로 저장하기"
+ },
+ "search": {
+ "message": "검색"
+ },
+ "searchResults": {
+ "message": "검색 결과"
+ },
+ "secretPhrase": {
+ "message": "12개 단어로 구성된 비밀 구문을 입력하여 저장소를 복구하세요."
+ },
+ "newPassword8Chars": {
+ "message": "새 비밀번호 (최소 8문자)"
+ },
+ "seedPhraseReq": {
+ "message": "시드 구문은 12개의 단어입니다"
+ },
+ "select": {
+ "message": "선택"
+ },
+ "selectCurrency": {
+ "message": "통화 선택"
},
"selectService": {
"message": "서비스 선택"
},
+ "selectType": {
+ "message": "형식 선택"
+ },
"send": {
"message": "전송"
},
+ "sendETH": {
+ "message": "ETH 보내기"
+ },
"sendTokens": {
"message": "토큰 전송"
},
+ "onlySendToEtherAddress": {
+ "message": "이더리움 주소로 ETH만 송금하세요."
+ },
+ "onlySendTokensToAccountAddress": {
+ "message": "이더리움계정 주소로 $1 만 보내기.",
+ "description": "토큰 심볼 보이기"
+ },
+ "searchTokens": {
+ "message": "토큰 검색"
+ },
"sendTokensAnywhere": {
- "message": "이더 계좌로 토큰 전송"
+ "message": "이더 계정로 토큰 전송"
},
"settings": {
"message": "설정"
},
+ "info": {
+ "message": "정보"
+ },
"shapeshiftBuy": {
"message": "Shapeshift를 통해서 구매하기"
},
"showPrivateKeys": {
- "message": "비밀키 보기"
+ "message": "개인키 보기"
},
"showQRCode": {
- "message": "QR코드 보기"
+ "message": "QR 코드 보기"
},
"sign": {
"message": "서명"
},
+ "signed": {
+ "message": "서명됨"
+ },
"signMessage": {
- "message": "서명 메시지"
+ "message": "메시지 서명"
},
"signNotice": {
"message": "이 메시지에 대한 서명은 위험할 수 있습니다.\n 완전히 신뢰할 수 있는 사이트에서만 서명해주세요.\n 안전을 위해 추후의 버전에서는 삭제될 기능입니다. "
@@ -523,33 +818,81 @@
"message": "서명 요청"
},
"sigRequested": {
- "message": "서명이 요청되었습니다."
+ "message": "서명이 요청됨"
+ },
+ "spaceBetween": {
+ "message": "단어 사이에는 공백만 올 수 있습니다"
},
"status": {
"message": "상태"
},
+ "stateLogs": {
+ "message": "상태 로그"
+ },
+ "stateLogsDescription": {
+ "message": "상태 로그에는 공개 계정 주소와 송신 트랜잭션 정보가 들어있습니다."
+ },
+ "stateLogError": {
+ "message": "상태 로그 받기 실패."
+ },
"submit": {
"message": "제출"
},
+ "submitted": {
+ "message": "제출됨"
+ },
+ "supportCenter": {
+ "message": "지원 센터에 방문하기"
+ },
+ "symbolBetweenZeroTen": {
+ "message": "심볼은 0에서 10개 사이의 문자여야 합니다."
+ },
"takesTooLong": {
"message": "너무 오래걸리나요?"
},
+ "terms": {
+ "message": "사용 지침"
+ },
"testFaucet": {
- "message": "Faucet 테스트"
+ "message": "파우셋 테스트"
},
"to": {
- "message": "대상"
+ "message": "받는이: "
},
"toETHviaShapeShift": {
"message": "ShapeShift를 통해 $1를 ETH로 바꾸기",
- "description": "system will fill in deposit type in start of message"
+ "description": "시스템이 시작할 때에 입금 유형을 입력해줍니다"
+ },
+ "token": {
+ "message": "토큰"
+ },
+ "tokenAddress": {
+ "message": "토큰 주소"
+ },
+ "tokenAlreadyAdded": {
+ "message": "토큰이 이미 추가되어있습니다."
},
"tokenBalance": {
- "message": "현재 토큰 잔액: "
+ "message": "현재 토큰 잔액:"
+ },
+ "tokenSelection": {
+ "message": "토큰을 검색하거나 유명한 토큰 리스트에서 선택하시기 바랍니다."
+ },
+ "tokenSymbol": {
+ "message": "토큰 기호"
+ },
+ "tokenWarning1": {
+ "message": "메타마스크 계좌를 통해 구입한 토큰을 추적합니다. 다른 계정으로 토큰을 구입한 경우 이곳에 나타나지 않습니다."
},
"total": {
"message": "합계"
},
+ "transactions": {
+ "message": "트랜잭션"
+ },
+ "transactionError": {
+ "message": "트랜잭션 오류. 컨트랙트 코드에서 예외 발생(Exception thrown)."
+ },
"transactionMemo": {
"message": "트랜잭션 메모 (선택사항)"
},
@@ -560,23 +903,29 @@
"message": "전송"
},
"troubleTokenBalances": {
- "message": "토큰 잔액을 가져오는데에 문제가 생겼습니다. (여기)서 상세내용을 볼 수 있습니다.",
- "description": "Followed by a link (here) to view token balances"
+ "message": "토큰 잔액을 가져오는데에 문제가 생겼습니다. 링크에서 상세내용을 볼 수 있습니다.",
+ "description": "토큰 잔액을 보려면 (here) 링크를 따라가세요"
+ },
+ "twelveWords": {
+ "message": "12개의 단어는 메타마스크 계정을 복구하기 위한 유일한 방법입니다.\n안전한 장소에 보관하시기 바랍니다."
},
"typePassword": {
- "message": "패스워드를 입력하세요."
+ "message": "비밀번호를 입력하세요"
},
"uiWelcome": {
- "message": "새 UI에 오신 것을 환영합니다. (베타)"
+ "message": "새로운 UI에 오신 것을 환영합니다. (Beta)"
},
"uiWelcomeMessage": {
- "message": "새 메타마스크 UI를 사용하고 계십니다. 토큰 전송과 같은 새 기능들을 사용해보시면서 문제가 있다면 알려주세요."
+ "message": "새로운 메타마스크 UI를 사용하고 계십니다. 토큰 전송과 같은 새 기능들을 사용해보시면서 문제가 있다면 알려주세요."
+ },
+ "unapproved": {
+ "message": "허가안됨"
},
"unavailable": {
- "message": "유효하지 않은"
+ "message": "유효하지 않음"
},
"unknown": {
- "message": "알려지지 않은"
+ "message": "알려지지 않음"
},
"unknownNetwork": {
"message": "알려지지 않은 프라이빗 네트워크"
@@ -584,19 +933,46 @@
"unknownNetworkId": {
"message": "알려지지 않은 네트워크 ID"
},
+ "unlockMessage": {
+ "message": "우리가 기다리던 분권형 웹입니다"
+ },
+ "uriErrorMsg": {
+ "message": "URI는 HTTP/HTTPS로 시작해야 합니다."
+ },
"usaOnly": {
"message": "USA 거주자 한정",
- "description": "Using this exchange is limited to people inside the USA"
+ "description": "해당 거래소는 USA거주자에 한해서만 사용가능합니다"
},
"usedByClients": {
- "message": "다양한 클라이언트에서 사용되고 있습니다."
+ "message": "다양한 클라이언트에서 사용되고 있습니다"
+ },
+ "useOldUI": {
+ "message": "예전 UI 사용"
+ },
+ "validFileImport": {
+ "message": "가져오기 위해 유효한 파일을 선택해야 합니다."
+ },
+ "vaultCreated": {
+ "message": "저장소가 생성됨"
},
"viewAccount": {
- "message": "계좌 보기"
+ "message": "계정 보기"
+ },
+ "viewOnEtherscan": {
+ "message": "이터스캔에서 보기"
+ },
+ "visitWebSite": {
+ "message": "웹사이트 방문"
},
"warning": {
"message": "경고"
},
+ "welcomeBack": {
+ "message": "환영합니다!"
+ },
+ "welcomeBeta": {
+ "message": "메타마스크 Beta에 오신 것을 환영합니다"
+ },
"whatsThis": {
"message": "이것은 무엇인가요?"
},
@@ -604,6 +980,204 @@
"message": "서명이 요청되고 있습니다."
},
"youSign": {
- "message": "서명 중입니다."
+ "message": "서명 중입니다"
+ },
+ "yourPrivateSeedPhrase": {
+ "message": "개인 시드 구문"
+ },
+ "accessingYourCamera": {
+ "message": "카메라 접근중..."
+ },
+ "accountSelectionRequired": {
+ "message": "계정을 선택하셔야 합니다!"
+ },
+ "approve": {
+ "message": "수락"
+ },
+ "browserNotSupported": {
+ "message": "브라우저가 지원하지 않습니다..."
+ },
+ "bytes": {
+ "message": "바이트"
+ },
+ "chromeRequiredForHardwareWallets": {
+ "message": "하드웨어 지갑을 연결하기 위해서는 구글 크롬에서 메타마스크를 사용하셔야 합니다."
+ },
+ "connectHardwareWallet": {
+ "message": "하드웨어 지갑 연결"
+ },
+ "connect": {
+ "message": "연결"
+ },
+ "connecting": {
+ "message": "연결중..."
+ },
+ "connectToLedger": {
+ "message": "Ledger 연결"
+ },
+ "connectToTrezor": {
+ "message": "Trezor 연결"
+ },
+ "copyAddress": {
+ "message": "클립보드로 주소 복사"
+ },
+ "downloadGoogleChrome": {
+ "message": "구글 크롬 다운로드"
+ },
+ "dontHaveAHardwareWallet": {
+ "message": "하드웨어 지갑이 없나요?"
+ },
+ "ensNameNotFound": {
+ "message": "ENS 이름을 찾을 수 없습니다"
+ },
+ "parameters": {
+ "message": "매개변수"
+ },
+ "forgetDevice": {
+ "message": "장치 연결 해제"
+ },
+ "functionType": {
+ "message": "함수 유형"
+ },
+ "getHelp": {
+ "message": "도움말"
+ },
+ "hardware": {
+ "message": "하드웨어"
+ },
+ "hardwareWalletConnected": {
+ "message": "하드웨어 지갑이 연결됨"
+ },
+ "hardwareWallets": {
+ "message": "하드웨어 지갑 연결"
+ },
+ "hardwareWalletsMsg": {
+ "message": "메타마스크에서 사용할 하드웨어 지갑을 선택해주세요"
+ },
+ "havingTroubleConnecting": {
+ "message": "연결에 문제가 있나요?"
+ },
+ "hexData": {
+ "message": "Hex 데이터"
+ },
+ "invalidSeedPhrase": {
+ "message": "잘못된 시드 구문"
+ },
+ "ledgerAccountRestriction": {
+ "message": "새 계정을 추가하려면 최소 마지막 계정을 사용해야 합니다."
+ },
+ "menu": {
+ "message": "메뉴"
+ },
+ "noConversionRateAvailable": {
+ "message": "변환 비율을 찾을 수 없습니다"
+ },
+ "notFound": {
+ "message": "찾을 수 없음"
+ },
+ "noWebcamFoundTitle": {
+ "message": "웹캠이 없습니다"
+ },
+ "noWebcamFound": {
+ "message": "컴퓨터의 웹캠을 찾을 수 없습니다. 다시 시도해보세요."
+ },
+ "openInTab": {
+ "message": "탭으로 열기"
+ },
+ "origin": {
+ "message": "Origin"
+ },
+ "prev": {
+ "message": "이전"
+ },
+ "restoreAccountWithSeed": {
+ "message": "시드 구문으로 계정 복구하기"
+ },
+ "restore": {
+ "message": "복구"
+ },
+ "remove": {
+ "message": "제거"
+ },
+ "removeAccount": {
+ "message": "계정 제거"
+ },
+ "removeAccountDescription": {
+ "message": "이 계정한 지갑에서 삭제될 것입니다. 지우기 전에 이 계정에 대한 개인 키 혹은 시드 구문을 가지고 있는지 확인하세요. 계정 드랍다운 메뉴를 통해서 계정을 가져오거나 생성할 수 있습니다."
+ },
+ "readyToConnect": {
+ "message": "접속 준비되었나요?"
+ },
+ "separateEachWord": {
+ "message": "각 단어는 공백 한칸으로 분리합니다"
+ },
+ "orderOneHere": {
+ "message": "Trezor 혹은 Ledger를 구입하고 자금을 콜드 스토리지에 저장합니다"
+ },
+ "selectAnAddress": {
+ "message": "주소 선택"
+ },
+ "selectAnAccount": {
+ "message": "계정 선택"
+ },
+ "selectAnAccountHelp": {
+ "message": "메타마스크에서 보기위한 계정 선택"
+ },
+ "selectHdPath": {
+ "message": "HD 경로 지정"
+ },
+ "selectPathHelp": {
+ "message": "하단에서 Ledger지갑 계정을 찾지 못하겠으면 \"Legacy (MEW / MyCrypto)\" 경로로 바꿔보세요"
+ },
+ "step1HardwareWallet": {
+ "message": "1. 하드웨어 지갑 연결"
+ },
+ "step1HardwareWalletMsg": {
+ "message": "하드웨어 지갑을 컴퓨터에 연결해주세요."
+ },
+ "step2HardwareWallet": {
+ "message": "2. 계정 선택"
+ },
+ "step2HardwareWalletMsg": {
+ "message": "보고 싶은 계정을 선택합니다. 한번에 하나의 계정만 선택할 수 있습니다."
+ },
+ "step3HardwareWallet": {
+ "message": "3. dApps을 사용하거나 다른 것을 합니다!"
+ },
+ "step3HardwareWalletMsg": {
+ "message": "다른 이더리움 계정을 사용하듯 하드웨어 계정을 사용합니다. dApps을 로그인하거나, 이더를 보내거나, ERC20토큰 혹은 대체가능하지 않은 토큰 (예를 들어 CryptoKitties)을 사거나 저장하거나 합니다."
+ },
+ "scanInstructions": {
+ "message": "QR 코드를 카메라 앞에 가져다 놓아주세요"
+ },
+ "scanQrCode": {
+ "message": "QR 코드 스캔"
+ },
+ "transfer": {
+ "message": "전송"
+ },
+ "trezorHardwareWallet": {
+ "message": "TREZOR 하드웨어 지갑"
+ },
+ "tryAgain": {
+ "message": "다시 시도하세요"
+ },
+ "unknownFunction": {
+ "message": "알 수 없는 함수"
+ },
+ "unknownQrCode": {
+ "message": "오류: QR 코드를 확인할 수 없습니다"
+ },
+ "unknownCameraErrorTitle": {
+ "message": "이런! 뭔가 잘못되었습니다...."
+ },
+ "unknownCameraError": {
+ "message": "카메라를 접근하는 중 오류가 발생했습니다. 다시 시도해 주세요..."
+ },
+ "unlock": {
+ "message": "잠금 해제"
+ },
+ "youNeedToAllowCameraAccess": {
+ "message": "이 기능을 사용하려면 카메라 접근을 허용해야 합니다."
}
}
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index bb722735d..6344e1beb 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -784,7 +784,7 @@
"message": "Тестовый кран"
},
"to": {
- "message": "Получатель: "
+ "message": "Получатель"
},
"toETHviaShapeShift": {
"message": "$1 в ETH через ShapeShift",
diff --git a/app/_locales/tml/messages.json b/app/_locales/tml/messages.json
index fcc418bac..4f733458e 100644
--- a/app/_locales/tml/messages.json
+++ b/app/_locales/tml/messages.json
@@ -796,7 +796,7 @@
"message": "சோதனை குழாய்"
},
"to": {
- "message": "பெறுநர்: "
+ "message": "பெறுநர்"
},
"toETHviaShapeShift": {
"message": "$ 1 முதல் ETH வரை வடிவம்",
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
index 08ba6cde8..8be695108 100644
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@@ -796,7 +796,7 @@
"message": "Test Musluğu"
},
"to": {
- "message": "Kime: "
+ "message": "Kime"
},
"toETHviaShapeShift": {
"message": "ShapeShift üstünden $1'dan ETH'e",
diff --git a/app/manifest.json b/app/manifest.json
index 086d5ba00..3718f5c8a 100644
--- a/app/manifest.json
+++ b/app/manifest.json
@@ -63,7 +63,6 @@
"activeTab",
"webRequest",
"*://*.eth/",
- "*://*.test/",
"notifications"
],
"web_accessible_resources": [
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 4798b2ad6..464a37017 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -384,7 +384,7 @@ class PreferencesController {
/**
* Returns an updated rpcList based on the passed url and the current list.
- * The returned list will have a max length of 2. If the _url currently exists it the list, it will be moved to the
+ * The returned list will have a max length of 3. If the _url currently exists it the list, it will be moved to the
* end of the list. The current list is modified and returned as a promise.
*
* @param {string} _url The rpc url to add to the frequentRpcList.
@@ -400,7 +400,7 @@ class PreferencesController {
if (_url !== 'http://localhost:8545') {
rpcList.push(_url)
}
- if (rpcList.length > 2) {
+ if (rpcList.length > 3) {
rpcList.shift()
}
return Promise.resolve(rpcList)
diff --git a/app/scripts/lib/account-tracker.js b/app/scripts/lib/account-tracker.js
index b7e2c7cbe..3a52d5e8d 100644
--- a/app/scripts/lib/account-tracker.js
+++ b/app/scripts/lib/account-tracker.js
@@ -43,10 +43,24 @@ class AccountTracker {
this._provider = opts.provider
this._query = pify(new EthQuery(this._provider))
this._blockTracker = opts.blockTracker
- // subscribe to latest block
- this._blockTracker.on('latest', this._updateForBlock.bind(this))
// blockTracker.currentBlock may be null
this._currentBlockNumber = this._blockTracker.getCurrentBlock()
+ // bind function for easier listener syntax
+ this._updateForBlock = this._updateForBlock.bind(this)
+ }
+
+ start () {
+ // remove first to avoid double add
+ this._blockTracker.removeListener('latest', this._updateForBlock)
+ // add listener
+ this._blockTracker.addListener('latest', this._updateForBlock)
+ // fetch account balances
+ this._updateAccounts()
+ }
+
+ stop () {
+ // remove listener
+ this._blockTracker.removeListener('latest', this._updateForBlock)
}
/**
diff --git a/app/scripts/lib/ipfsContent.js b/app/scripts/lib/ipfsContent.js
index 5db63f47d..38682b916 100644
--- a/app/scripts/lib/ipfsContent.js
+++ b/app/scripts/lib/ipfsContent.js
@@ -34,7 +34,7 @@ module.exports = function (provider) {
return { cancel: true }
}
- extension.webRequest.onErrorOccurred.addListener(ipfsContent, {urls: ['*://*.eth/', '*://*.test/']})
+ extension.webRequest.onErrorOccurred.addListener(ipfsContent, {urls: ['*://*.eth/']})
return {
remove () {
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 63385f4fc..98cb62bfa 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -67,6 +67,10 @@ module.exports = class MetamaskController extends EventEmitter {
const initState = opts.initState || {}
this.recordFirstTimeInfo(initState)
+ // this keeps track of how many "controllerStream" connections are open
+ // the only thing that uses controller connections are open metamask UI instances
+ this.activeControllerConnections = 0
+
// platform-specific api
this.platform = opts.platform
@@ -128,6 +132,14 @@ module.exports = class MetamaskController extends EventEmitter {
provider: this.provider,
blockTracker: this.blockTracker,
})
+ // start and stop polling for balances based on activeControllerConnections
+ this.on('controllerConnectionChanged', (activeControllerConnections) => {
+ if (activeControllerConnections > 0) {
+ this.accountTracker.start()
+ } else {
+ this.accountTracker.stop()
+ }
+ })
// key mgmt
const additionalKeyrings = [TrezorKeyring, LedgerBridgeKeyring]
@@ -138,19 +150,7 @@ module.exports = class MetamaskController extends EventEmitter {
encryptor: opts.encryptor || undefined,
})
- // If only one account exists, make sure it is selected.
- this.keyringController.memStore.subscribe((state) => {
- const addresses = state.keyrings.reduce((res, keyring) => {
- return res.concat(keyring.accounts)
- }, [])
- if (addresses.length === 1) {
- const address = addresses[0]
- this.preferencesController.setSelectedAddress(address)
- }
- // ensure preferences + identities controller know about all addresses
- this.preferencesController.addAddresses(addresses)
- this.accountTracker.syncWithAddresses(addresses)
- })
+ this.keyringController.memStore.subscribe((s) => this._onKeyringControllerUpdate(s))
// detect tokens controller
this.detectTokensController = new DetectTokensController({
@@ -1211,11 +1211,19 @@ module.exports = class MetamaskController extends EventEmitter {
setupControllerConnection (outStream) {
const api = this.getApi()
const dnode = Dnode(api)
+ // report new active controller connection
+ this.activeControllerConnections++
+ this.emit('controllerConnectionChanged', this.activeControllerConnections)
+ // connect dnode api to remote connection
pump(
outStream,
dnode,
outStream,
(err) => {
+ // report new active controller connection
+ this.activeControllerConnections--
+ this.emit('controllerConnectionChanged', this.activeControllerConnections)
+ // report any error
if (err) log.error(err)
}
)
@@ -1282,6 +1290,34 @@ module.exports = class MetamaskController extends EventEmitter {
}
/**
+ * Handle a KeyringController update
+ * @param {object} state the KC state
+ * @return {Promise<void>}
+ * @private
+ */
+ async _onKeyringControllerUpdate (state) {
+ const {isUnlocked, keyrings} = state
+ const addresses = keyrings.reduce((acc, {accounts}) => acc.concat(accounts), [])
+
+ if (!addresses.length) {
+ return
+ }
+
+ // Ensure preferences + identities controller know about all addresses
+ this.preferencesController.addAddresses(addresses)
+ this.accountTracker.syncWithAddresses(addresses)
+
+ const wasLocked = !isUnlocked
+ if (wasLocked) {
+ const oldSelectedAddress = this.preferencesController.getSelectedAddress()
+ if (!addresses.includes(oldSelectedAddress)) {
+ const address = addresses[0]
+ await this.preferencesController.setSelectedAddress(address)
+ }
+ }
+ }
+
+ /**
* A method for emitting the full MetaMask state to all registered listeners.
* @private
*/
@@ -1427,6 +1463,7 @@ module.exports = class MetamaskController extends EventEmitter {
}
}
+ // TODO: Replace isClientOpen methods with `controllerConnectionChanged` events.
/**
* A method for recording whether the MetaMask user interface is open or not.
* @private
diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js
index 8ab647efd..234c06a01 100644
--- a/old-ui/app/components/app-bar.js
+++ b/old-ui/app/components/app-bar.js
@@ -350,11 +350,14 @@ module.exports = class AppBar extends Component {
}
}
- renderCommonRpc (rpcList, {rpcTarget}) {
+ renderCommonRpc (rpcList, provider) {
const {dispatch} = this.props
+ const reversedRpcList = rpcList.slice().reverse()
- return rpcList.map((rpc) => {
- if ((rpc === LOCALHOST_RPC_URL) || (rpc === rpcTarget)) {
+ return reversedRpcList.map((rpc) => {
+ const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
+
+ if ((rpc === LOCALHOST_RPC_URL) || currentRpcTarget) {
return null
} else {
return h(DropdownMenuItem, {
@@ -364,7 +367,7 @@ module.exports = class AppBar extends Component {
}, [
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
rpc,
- rpcTarget === rpc
+ currentRpcTarget
? h('.check', '✓')
: null,
])
diff --git a/package.json b/package.json
index 698251ccf..a75bea0f7 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,11 @@
[
"env",
{
- "debug": true
+ "browsers": [
+ ">0.25%",
+ "not ie 11",
+ "not op_mini all"
+ ]
}
],
"stage-0"
@@ -185,6 +189,7 @@
"react-dom": "^15.6.2",
"react-hyperscript": "^3.0.0",
"react-markdown": "^3.0.0",
+ "react-media": "^1.8.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.2.2",
"react-select": "^1.0.0",
diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js
index 1261b6f95..f8a904263 100644
--- a/test/e2e/beta/from-import-beta-ui.spec.js
+++ b/test/e2e/beta/from-import-beta-ui.spec.js
@@ -314,12 +314,12 @@ describe('Using MetaMask with an existing account', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
- const txValues = await findElements(driver, By.css('.tx-list-value'))
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--secondary'))
assert.equal(txValues.length, 1)
- assert.equal(await txValues[0].getText(), '1 ETH')
+ assert.equal(await txValues[0].getText(), '-1 ETH')
})
})
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index dd327accb..c9f759780 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -225,19 +225,9 @@ describe('MetaMask', function () {
await delay(regularDelayMs)
}
- await clickWordAndWait(words[0])
- await clickWordAndWait(words[1])
- await clickWordAndWait(words[2])
- await clickWordAndWait(words[3])
- await clickWordAndWait(words[4])
- await clickWordAndWait(words[5])
- await clickWordAndWait(words[6])
- await clickWordAndWait(words[7])
- await clickWordAndWait(words[8])
- await clickWordAndWait(words[9])
- await clickWordAndWait(words[10])
- await clickWordAndWait(words[11])
-
+ for (let i = 0; i < 12; i++) {
+ await clickWordAndWait(words[i])
+ }
} catch (e) {
if (count > 2) {
throw e
@@ -414,12 +404,12 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /1\sETH/), 10000)
+ const txValues = await findElement(driver, By.css('.transaction-list-item__amount--secondary'))
+ await driver.wait(until.elementTextMatches(txValues, /-1\sETH/), 10000)
}
})
})
@@ -457,14 +447,11 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 2)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
-
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /3\sETH/), 10000)
+ const txValues = await findElement(driver, By.css('.transaction-list-item__amount--secondary'))
+ await driver.wait(until.elementTextMatches(txValues, /-3\sETH/), 10000)
})
})
@@ -487,9 +474,9 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(regularDelayMs)
- const txListItem = await findElement(driver, By.xpath(`//span[contains(text(), 'Contract Deployment')]`))
+ const txListItem = await findElement(driver, By.xpath(`//div[contains(text(), 'Contract Deployment')]`))
await txListItem.click()
- await delay(regularDelayMs)
+ await delay(largeDelayMs)
})
it('displays the contract creation data', async () => {
@@ -511,13 +498,15 @@ describe('MetaMask', function () {
it('confirms a deploy contract transaction', async () => {
const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
await confirmButton.click()
- await delay(regularDelayMs)
+ await delay(largeDelayMs)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 3
+ }, 10000)
- const txAccounts = await findElements(driver, By.css('.tx-list-account'))
- assert.equal(await txAccounts[0].getText(), 'Contract Deployment')
+ const txAction = await findElements(driver, By.css('.transaction-list-item__action'))
+ await driver.wait(until.elementTextMatches(txAction[0], /Contract\sDeployment/), 10000)
await delay(regularDelayMs)
})
@@ -538,9 +527,9 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(largeDelayMs)
- await findElements(driver, By.css('.tx-list-pending-item-container'))
- const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txListValue, /4\sETH/), 10000)
+ await findElements(driver, By.css('.transaction-list-item'))
+ const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--secondary'))
+ await driver.wait(until.elementTextMatches(txListValue, /-4\sETH/), 10000)
await txListValue.click()
await delay(regularDelayMs)
@@ -568,15 +557,17 @@ describe('MetaMask', function () {
await confirmButton.click()
await delay(regularDelayMs)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 4
+ }, 10000)
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /4\sETH/), 10000)
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--secondary'))
+ await driver.wait(until.elementTextMatches(txValues[0], /-4\sETH/), 10000)
- const txAccounts = await findElements(driver, By.css('.tx-list-account'))
- const firstTxAddress = await txAccounts[0].getText()
- assert(firstTxAddress.match(/^0x\w{8}\.{3}\w{4}$/))
+ // const txAccounts = await findElements(driver, By.css('.tx-list-account'))
+ // const firstTxAddress = await txAccounts[0].getText()
+ // assert(firstTxAddress.match(/^0x\w{8}\.{3}\w{4}$/))
})
it('calls and confirms a contract method where ETH is received', async () => {
@@ -590,7 +581,7 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(regularDelayMs)
- const txListItem = await findElement(driver, By.css('.tx-list-item'))
+ const txListItem = await findElement(driver, By.css('.transaction-list-item'))
await txListItem.click()
await delay(regularDelayMs)
@@ -598,18 +589,20 @@ describe('MetaMask', function () {
await confirmButton.click()
await delay(regularDelayMs)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 5
+ }, 10000)
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /0\sETH/), 10000)
+ const txValues = await findElement(driver, By.css('.transaction-list-item__amount--secondary'))
+ await driver.wait(until.elementTextMatches(txValues, /-0\sETH/), 10000)
await closeAllWindowHandlesExcept(driver, [extension, dapp])
await driver.switchTo().window(extension)
})
it('renders the correct ETH balance', async () => {
- const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+ const balance = await findElement(driver, By.css('.transaction-view-balance__primary-balance'))
await delay(regularDelayMs)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
await driver.wait(until.elementTextMatches(balance, /^92.*ETH.*$/), 10000)
@@ -654,18 +647,17 @@ describe('MetaMask', function () {
await closeAllWindowHandlesExcept(driver, [extension, dapp])
await delay(regularDelayMs)
await driver.switchTo().window(extension)
- await delay(regularDelayMs)
-
+ await delay(largeDelayMs)
})
it('clicks on the Add Token button', async () => {
- const addToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Token')]`))
+ const addToken = await driver.findElement(By.css('.wallet-view__add-token-button'))
await addToken.click()
await delay(regularDelayMs)
})
it('picks the newly created Test token', async () => {
- const addCustomToken = await findElement(driver, By.xpath("//div[contains(text(), 'Custom Token')]"))
+ const addCustomToken = await findElement(driver, By.xpath("//li[contains(text(), 'Custom Token')]"))
await addCustomToken.click()
await delay(regularDelayMs)
@@ -683,7 +675,7 @@ describe('MetaMask', function () {
})
it('renders the balance for the new token', async () => {
- const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+ const balance = await findElement(driver, By.css('.transaction-view-balance .transaction-view-balance__token-balance'))
await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/))
const tokenAmount = await balance.getText()
assert.ok(/^100\s*TST\s*$/.test(tokenAmount))
@@ -752,21 +744,25 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
- const txValues = await findElements(driver, By.css('.tx-list-value'))
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)
// test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
// or possibly until we use latest version of firefox in the tests
if (process.env.SELENIUM_BROWSER !== 'firefox') {
- await driver.wait(until.elementTextMatches(txValues[0], /50\sTST/), 10000)
+ await driver.wait(until.elementTextMatches(txValues[0], /-50\sTST/), 10000)
}
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- const tx = await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed|Failed/), 10000)
- assert.equal(await tx.getText(), 'Confirmed')
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 1
+ }, 10000)
+ const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
+ const tx = await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken|Failed/), 10000)
+ assert.equal(await tx.getText(), 'Sent Tokens')
})
})
@@ -789,9 +785,9 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(largeDelayMs)
- await findElements(driver, By.css('.tx-list-pending-item-container'))
- const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txListValue, /7\sTST/), 10000)
+ await findElements(driver, By.css('.transaction-list__pending-transactions'))
+ const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txListValue, /-7\sTST/), 10000)
await txListValue.click()
await delay(regularDelayMs)
@@ -838,25 +834,28 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
- assert.equal(transactions.length, 2)
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 2
+ }, 10000)
- const txValues = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues[0], /7\sTST/))
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues[0], /-7\sTST/))
+ const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
+ await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken/))
const walletBalance = await findElement(driver, By.css('.wallet-balance'))
await walletBalance.click()
const tokenListItems = await findElements(driver, By.css('.token-list-item'))
await tokenListItems[0].click()
+ await delay(regularDelayMs)
// test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
// or possibly until we use latest version of firefox in the tests
if (process.env.SELENIUM_BROWSER !== 'firefox') {
- const tokenBalanceAmount = await findElement(driver, By.css('.token-balance__amount'))
- assert.equal(await tokenBalanceAmount.getText(), '43')
+ const tokenBalanceAmount = await findElement(driver, By.css('.transaction-view-balance__token-balance'))
+ assert.equal(await tokenBalanceAmount.getText(), '43 TST')
}
})
})
@@ -880,9 +879,14 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(regularDelayMs)
- const [txListItem] = await findElements(driver, By.css('.tx-list-item'))
- const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txListValue, /0\sETH/))
+ driver.wait(async () => {
+ const pendingTxes = await findElements(driver, By.css('.transaction-list__pending-transactions .transaction-list-item'))
+ return pendingTxes.length === 1
+ }, 10000)
+
+ const [txListItem] = await findElements(driver, By.css('.transaction-list-item'))
+ const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txListValue, /-7\sTST/))
await txListItem.click()
await delay(regularDelayMs)
})
@@ -953,10 +957,15 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const txValues = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues[0], /0\sETH/))
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 3
+ }, 10000)
+
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues[0], /-7\sTST/))
+ const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
+ await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
})
})
@@ -1006,9 +1015,69 @@ describe('MetaMask', function () {
})
it('renders the balance for the chosen token', async () => {
- const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+ const balance = await findElement(driver, By.css('.transaction-view-balance__token-balance'))
await driver.wait(until.elementTextMatches(balance, /0\sBAT/))
await delay(regularDelayMs)
})
})
-}) \ No newline at end of file
+
+ describe('Stores custom RPC history', () => {
+ const customRpcUrls = [
+ 'https://mainnet.infura.io/1',
+ 'https://mainnet.infura.io/2',
+ 'https://mainnet.infura.io/3',
+ 'https://mainnet.infura.io/4',
+ ]
+
+ customRpcUrls.forEach(customRpcUrl => {
+ it('creates custom RPC: ' + customRpcUrl, async () => {
+ const networkDropdown = await findElement(driver, By.css('.network-name'))
+ await networkDropdown.click()
+ await delay(regularDelayMs)
+
+ const customRpcButton = await findElement(driver, By.xpath(`//span[contains(text(), 'Custom RPC')]`))
+ await customRpcButton.click()
+ await delay(regularDelayMs)
+
+ const customRpcInput = await findElement(driver, By.css('input[placeholder="New RPC URL"]'))
+ await customRpcInput.clear()
+ await customRpcInput.sendKeys(customRpcUrl)
+
+ const customRpcSave = await findElement(driver, By.css('.settings__rpc-save-button'))
+ await customRpcSave.click()
+ await delay(largeDelayMs * 2)
+ })
+ })
+
+ it('selects another provider', async () => {
+ const networkDropdown = await findElement(driver, By.css('.network-name'))
+ await networkDropdown.click()
+ await delay(regularDelayMs)
+
+ const customRpcButton = await findElement(driver, By.xpath(`//span[contains(text(), 'Main Ethereum Network')]`))
+ await customRpcButton.click()
+ await delay(largeDelayMs * 2)
+ })
+
+ it('finds 3 recent RPCs in history', async () => {
+ const networkDropdown = await findElement(driver, By.css('.network-name'))
+ await networkDropdown.click()
+ await delay(regularDelayMs)
+
+ // oldest selected RPC is not found
+ await assertElementNotPresent(webdriver, driver, By.xpath(`//span[contains(text(), '${customRpcUrls[0]}')]`))
+
+ // only recent 3 are found and in correct order (most recent at the top)
+ const customRpcs = await findElements(driver, By.xpath(`//span[contains(text(), 'https://mainnet.infura.io/')]`))
+
+ assert.equal(customRpcs.length, 3)
+
+ for (let i = 0; i < customRpcs.length; i++) {
+ const linkText = await customRpcs[i].getText()
+ const rpcUrl = customRpcUrls[customRpcUrls.length - i - 1]
+
+ assert.notEqual(linkText.indexOf(rpcUrl), -1)
+ }
+ })
+ })
+})
diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js
index 6de7574c4..bb9d0d10f 100644
--- a/test/integration/lib/add-token.js
+++ b/test/integration/lib/add-token.js
@@ -86,7 +86,7 @@ async function runAddTokenFlowTest (assert, done) {
$('button.btn-primary.btn--large')[0].click()
// Verify added token image
- let heroBalance = await queryAsync($, '.hero-balance')
+ let heroBalance = await queryAsync($, '.transaction-view-balance__balance-container')
assert.ok(heroBalance, 'rendered hero balance')
assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
@@ -134,7 +134,7 @@ async function runAddTokenFlowTest (assert, done) {
// $('button.btn-primary--lg')[0].click()
// Verify added token image
- heroBalance = await queryAsync($, '.hero-balance')
+ heroBalance = await queryAsync($, '.transaction-view-balance__balance-container')
assert.ok(heroBalance, 'rendered hero balance')
assert.ok(heroBalance.find('.identicon')[0], 'token added')
}
diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js
index dcc25c493..3539e97be 100644
--- a/test/integration/lib/confirm-sig-requests.js
+++ b/test/integration/lib/confirm-sig-requests.js
@@ -19,7 +19,7 @@ async function runConfirmSigRequestsTest (assert, done) {
selectState.val('confirm sig requests')
reactTriggerChange(selectState[0])
- const pendingRequestItem = $.find('.tx-list-item.tx-list-pending-item-container.tx-list-clickable')
+ const pendingRequestItem = $.find('.transaction-list-item')
if (pendingRequestItem[0]) {
pendingRequestItem[0].click()
diff --git a/test/integration/lib/currency-localization.js b/test/integration/lib/currency-localization.js
index d42b7495d..8d5acf5d0 100644
--- a/test/integration/lib/currency-localization.js
+++ b/test/integration/lib/currency-localization.js
@@ -22,8 +22,8 @@ async function runCurrencyLocalizationTest (assert, done) {
await timeout(1000)
reactTriggerChange(selectState[0])
await timeout(1000)
- const txView = await queryAsync($, '.tx-view')
- const heroBalance = await findAsync($(txView), '.hero-balance')
- const fiatAmount = await findAsync($(heroBalance), '.fiat-amount')
- assert.equal(fiatAmount[0].textContent, '₱102,707.97')
+ const txView = await queryAsync($, '.transaction-view')
+ const heroBalance = await findAsync($(txView), '.transaction-view-balance__balance')
+ const fiatAmount = await findAsync($(heroBalance), '.transaction-view-balance__secondary-balance')
+ assert.equal(fiatAmount[0].textContent, '₱102,707.97 PHP')
}
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
index 406863ca6..7f3c114e4 100644
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@@ -58,7 +58,7 @@ async function runSendFlowTest (assert, done) {
selectState.val('send new ui')
reactTriggerChange(selectState[0])
- const sendScreenButton = await queryAsync($, 'button.btn-primary.hero-balance-button')
+ const sendScreenButton = await queryAsync($, 'button.btn-primary.transaction-view-balance__button')
assert.ok(sendScreenButton[1], 'send screen button present')
sendScreenButton[1].click()
@@ -124,10 +124,10 @@ async function runSendFlowTest (assert, done) {
selectState.val('send edit')
reactTriggerChange(selectState[0])
- const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first()
+ const confirmFromName = (await queryAsync($, '.sender-to-recipient__name')).first()
assert.equal(confirmFromName[0].textContent, 'Send Account 4', 'confirm screen should show correct from name')
- const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last()
+ const confirmToName = (await queryAsync($, '.sender-to-recipient__name')).last()
assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
const confirmScreenRowFiats = await queryAsync($, '.confirm-detail-row__fiat')
diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js
index 9075efe03..7572d1629 100644
--- a/test/integration/lib/tx-list-items.js
+++ b/test/integration/lib/tx-list-items.js
@@ -29,26 +29,23 @@ async function runTxListItemsTest (assert, done) {
assert.ok(metamaskLogo[0], 'metamask logo present')
metamaskLogo[0].click()
- const txListItems = await queryAsync($, '.tx-list-item')
+ const txListItems = await queryAsync($, '.transaction-list-item')
assert.equal(txListItems.length, 8, 'all tx list items are rendered')
- const unapprovedTx = txListItems[0]
- assert.equal($(unapprovedTx).hasClass('tx-list-pending-item-container'), true, 'unapprovedTx has the correct class')
-
const retryTx = txListItems[1]
- const retryTxLink = await findAsync($(retryTx), '.tx-list-item-retry-container span')
+ const retryTxLink = await findAsync($(retryTx), '.transaction-list-item__retry')
assert.equal(retryTxLink[0].textContent, 'Taking too long? Increase the gas price on your transaction', 'retryTx has expected link')
const approvedTx = txListItems[2]
- const approvedTxRenderedStatus = await findAsync($(approvedTx), '.tx-list-status')
- assert.equal(approvedTxRenderedStatus[0].textContent, 'Approved', 'approvedTx has correct label')
+ const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status')
+ assert.equal(approvedTxRenderedStatus[0].textContent, 'pending', 'approvedTx has correct label')
const unapprovedMsg = txListItems[3]
- const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.tx-list-account')
+ const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.transaction-list-item__action')
assert.equal(unapprovedMsgDescription[0].textContent, 'Signature Request', 'unapprovedMsg has correct description')
const failedTx = txListItems[4]
- const failedTxRenderedStatus = await findAsync($(failedTx), '.tx-list-status')
+ const failedTxRenderedStatus = await findAsync($(failedTx), '.transaction-list-item__status')
assert.equal(failedTxRenderedStatus[0].textContent, 'Failed', 'failedTx has correct label')
const shapeShiftTx = txListItems[5]
@@ -56,10 +53,10 @@ async function runTxListItemsTest (assert, done) {
assert.equal(shapeShiftTxStatus[0].textContent, 'No deposits received', 'shapeShiftTx has correct status')
const confirmedTokenTx = txListItems[6]
- const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.tx-list-account')
- assert.equal(confirmedTokenTxAddress[0].textContent, '0xE7884118...81a9', 'confirmedTokenTx has correct address')
+ const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.transaction-list-item__status')
+ assert.equal(confirmedTokenTxAddress[0].textContent, 'Confirmed', 'confirmedTokenTx has correct address')
const rejectedTx = txListItems[7]
- const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.tx-list-status')
+ const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.transaction-list-item__status')
assert.equal(rejectedTxRenderedStatus[0].textContent, 'Rejected', 'rejectedTx has correct label')
}
diff --git a/test/unit/app/controllers/metamask-controller-test.js b/test/unit/app/controllers/metamask-controller-test.js
index a798d41e2..85c78fe1e 100644
--- a/test/unit/app/controllers/metamask-controller-test.js
+++ b/test/unit/app/controllers/metamask-controller-test.js
@@ -814,6 +814,77 @@ describe('MetaMaskController', function () {
})
})
+ describe('#_onKeyringControllerUpdate', function () {
+ it('should do nothing if there are no keyrings in state', async function () {
+ const addAddresses = sinon.fake()
+ const syncWithAddresses = sinon.fake()
+ sandbox.replace(metamaskController, 'preferencesController', {
+ addAddresses,
+ })
+ sandbox.replace(metamaskController, 'accountTracker', {
+ syncWithAddresses,
+ })
+
+ const oldState = metamaskController.getState()
+ await metamaskController._onKeyringControllerUpdate({keyrings: []})
+
+ assert.ok(addAddresses.notCalled)
+ assert.ok(syncWithAddresses.notCalled)
+ assert.deepEqual(metamaskController.getState(), oldState)
+ })
+
+ it('should update selected address if keyrings was locked', async function () {
+ const addAddresses = sinon.fake()
+ const getSelectedAddress = sinon.fake.returns('0x42')
+ const setSelectedAddress = sinon.fake()
+ const syncWithAddresses = sinon.fake()
+ sandbox.replace(metamaskController, 'preferencesController', {
+ addAddresses,
+ getSelectedAddress,
+ setSelectedAddress,
+ })
+ sandbox.replace(metamaskController, 'accountTracker', {
+ syncWithAddresses,
+ })
+
+ const oldState = metamaskController.getState()
+ await metamaskController._onKeyringControllerUpdate({
+ isUnlocked: false,
+ keyrings: [{
+ accounts: ['0x1', '0x2'],
+ }],
+ })
+
+ assert.deepEqual(addAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(syncWithAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(setSelectedAddress.args, [['0x1']])
+ assert.deepEqual(metamaskController.getState(), oldState)
+ })
+
+ it('should NOT update selected address if already unlocked', async function () {
+ const addAddresses = sinon.fake()
+ const syncWithAddresses = sinon.fake()
+ sandbox.replace(metamaskController, 'preferencesController', {
+ addAddresses,
+ })
+ sandbox.replace(metamaskController, 'accountTracker', {
+ syncWithAddresses,
+ })
+
+ const oldState = metamaskController.getState()
+ await metamaskController._onKeyringControllerUpdate({
+ isUnlocked: true,
+ keyrings: [{
+ accounts: ['0x1', '0x2'],
+ }],
+ })
+
+ assert.deepEqual(addAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(syncWithAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(metamaskController.getState(), oldState)
+ })
+ })
+
})
function deferredPromise () {
diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js
deleted file mode 100644
index 03101d37a..000000000
--- a/ui/app/account-and-transaction-details.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-// Main Views
-const TxView = require('./components/tx-view')
-const WalletView = require('./components/wallet-view')
-
-module.exports = AccountAndTransactionDetails
-
-inherits(AccountAndTransactionDetails, Component)
-function AccountAndTransactionDetails () {
- Component.call(this)
-}
-
-AccountAndTransactionDetails.prototype.render = function () {
- return h('div.account-and-transaction-details', [
- // wallet
- h(WalletView, {
- style: {
- },
- responsiveDisplayClassname: '.lap-visible',
- }, [
- ]),
-
- // transaction
- h(TxView, {
- style: {
- },
- }, [
- ]),
- ])
-}
-
diff --git a/ui/app/app.js b/ui/app/app.js
index cdda44d40..e0bdac359 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -18,7 +18,7 @@ const ConfirmTransaction = require('./components/pages/confirm-transaction')
const WalletView = require('./components/wallet-view')
// other views
-const Home = require('./components/pages/home')
+import Home from './components/pages/home'
const Authenticated = require('./components/pages/authenticated')
const Initialized = require('./components/pages/initialized')
const Settings = require('./components/pages/settings')
@@ -185,7 +185,7 @@ class App extends Component {
}, [
// A second instance of Walletview is used for non-mobile viewports
this.props.sidebarOpen ? h(WalletView, {
- responsiveDisplayClassname: '.sidebar',
+ responsiveDisplayClassname: 'sidebar',
style: {},
}) : undefined,
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index 9b6f13c80..753a27b06 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -4,8 +4,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const TokenBalance = require('./token-balance')
const Identicon = require('./identicon')
-const currencyFormatter = require('currency-formatter')
-const currencies = require('currency-formatter/currencies')
+import CurrencyDisplay from './currency-display'
const { formatBalance, generateBalanceObject } = require('../util')
@@ -84,38 +83,12 @@ BalanceComponent.prototype.renderBalance = function () {
style: {},
}, this.getTokenBalance(formattedBalance, shorten)),
- showFiat ? this.renderFiatValue(formattedBalance) : null,
+ showFiat && h(CurrencyDisplay, {
+ value: balanceValue,
+ }),
])
}
-BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
-
- const { conversionRate, currentCurrency } = this.props
-
- const fiatDisplayNumber = this.getFiatDisplayNumber(formattedBalance, conversionRate)
-
- const fiatPrefix = currentCurrency === 'USD' ? '$' : ''
-
- return this.renderFiatAmount(fiatDisplayNumber, currentCurrency, fiatPrefix)
-}
-
-BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix, fiatPrefix) {
- const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0
- if (shouldNotRenderFiat) return null
-
- const upperCaseFiatSuffix = fiatSuffix.toUpperCase()
-
- const display = currencies.find(currency => currency.code === upperCaseFiatSuffix)
- ? currencyFormatter.format(Number(fiatDisplayNumber), {
- code: upperCaseFiatSuffix,
- })
- : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}`
-
- return h('div.fiat-amount', {
- style: {},
- }, display)
-}
-
BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
deleted file mode 100644
index c6957d2aa..000000000
--- a/ui/app/components/buy-button-subview.js
+++ /dev/null
@@ -1,267 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../actions')
-const CoinbaseForm = require('./coinbase-form')
-const ShapeshiftForm = require('./shapeshift-form')
-const Loading = require('./loading-screen')
-const AccountPanel = require('./account-panel')
-const RadioList = require('./custom-radio-list')
-const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util')
-
-BuyButtonSubview.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(BuyButtonSubview)
-
-
-function mapStateToProps (state) {
- return {
- identity: state.appState.identity,
- account: state.metamask.accounts[state.appState.buyView.buyAddress],
- warning: state.appState.warning,
- buyView: state.appState.buyView,
- network: state.metamask.network,
- provider: state.metamask.provider,
- context: state.appState.currentView.context,
- isSubLoading: state.appState.isSubLoading,
- }
-}
-
-inherits(BuyButtonSubview, Component)
-function BuyButtonSubview () {
- Component.call(this)
-}
-
-BuyButtonSubview.prototype.render = function () {
- return (
- h('div', {
- style: {
- width: '100%',
- },
- }, [
- this.headerSubview(),
- this.primarySubview(),
- ])
- )
-}
-
-BuyButtonSubview.prototype.headerSubview = function () {
- const props = this.props
- const isLoading = props.isSubLoading
- return (
-
- h('.flex-column', {
- style: {
- alignItems: 'center',
- },
- }, [
-
- // header bar (back button, label)
- h('.flex-row', {
- style: {
- alignItems: 'center',
- justifyContent: 'center',
- },
- }, [
- h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
- onClick: this.backButtonContext.bind(this),
- style: {
- position: 'absolute',
- left: '10px',
- },
- }),
- h('h2.text-transform-uppercase.flex-center', {
- style: {
- width: '100vw',
- background: 'rgb(235, 235, 235)',
- color: 'rgb(174, 174, 174)',
- paddingTop: '4px',
- paddingBottom: '4px',
- },
- }, this.context.t('depositEth')),
- ]),
-
- // loading indication
- h('div', {
- style: {
- position: 'absolute',
- top: '57vh',
- left: '49vw',
- },
- }, [
- isLoading && h(Loading),
- ]),
-
- // account panel
- h('div', {
- style: {
- width: '80%',
- },
- }, [
- h(AccountPanel, {
- showFullAddress: true,
- identity: props.identity,
- account: props.account,
- }),
- ]),
-
- h('.flex-row', {
- style: {
- alignItems: 'center',
- justifyContent: 'center',
- },
- }, [
- h('h3.text-transform-uppercase.flex-center', {
- style: {
- paddingLeft: '15px',
- width: '100vw',
- background: 'rgb(235, 235, 235)',
- color: 'rgb(174, 174, 174)',
- paddingTop: '4px',
- paddingBottom: '4px',
- },
- }, this.context.t('selectService')),
- ]),
-
- ])
-
- )
-}
-
-
-BuyButtonSubview.prototype.primarySubview = function () {
- const props = this.props
- const network = props.network
-
- switch (network) {
- case 'loading':
- return
-
- case '1':
- return this.mainnetSubview()
-
- // Ropsten, Rinkeby, Kovan
- case '3':
- case '4':
- case '42':
- const networkName = getNetworkDisplayName(network)
- const label = `${networkName} ${this.context.t('testFaucet')}`
- return (
- h('div.flex-column', {
- style: {
- alignItems: 'center',
- margin: '20px 50px',
- },
- }, [
- h('button.text-transform-uppercase', {
- onClick: () => this.props.dispatch(actions.buyEth({ network })),
- style: {
- marginTop: '15px',
- },
- }, label),
- // Kovan only: Dharma loans beta
- network === '42' ? (
- h('button.text-transform-uppercase', {
- onClick: () => this.navigateTo('https://borrow.dharma.io/'),
- style: {
- marginTop: '15px',
- },
- }, this.context.t('borrowDharma'))
- ) : null,
- ])
- )
-
- default:
- return (
- h('h2.error', this.context.t('unknownNetworkId'))
- )
-
- }
-}
-
-BuyButtonSubview.prototype.mainnetSubview = function () {
- const props = this.props
-
- return (
-
- h('.flex-column', {
- style: {
- alignItems: 'center',
- },
- }, [
-
- h('.flex-row.selected-exchange', {
- style: {
- position: 'relative',
- right: '35px',
- marginTop: '20px',
- marginBottom: '20px',
- },
- }, [
- h(RadioList, {
- defaultFocus: props.buyView.subview,
- labels: [
- 'Coinbase',
- 'ShapeShift',
- ],
- subtext: {
- 'Coinbase': `${this.context.t('crypto')}/${this.context.t('fiat')} (${this.context.t('usaOnly')})`,
- 'ShapeShift': this.context.t('crypto'),
- },
- onClick: this.radioHandler.bind(this),
- }),
- ]),
-
- h('h3.text-transform-uppercase', {
- style: {
- paddingLeft: '15px',
- fontFamily: 'Montserrat Light',
- width: '100vw',
- background: 'rgb(235, 235, 235)',
- color: 'rgb(174, 174, 174)',
- paddingTop: '4px',
- paddingBottom: '4px',
- },
- }, props.buyView.subview),
-
- this.formVersionSubview(),
- ])
-
- )
-}
-
-BuyButtonSubview.prototype.formVersionSubview = function () {
- const network = this.props.network
- if (network === '1') {
- if (this.props.buyView.formView.coinbase) {
- return h(CoinbaseForm, this.props)
- } else if (this.props.buyView.formView.shapeshift) {
- return h(ShapeshiftForm, this.props)
- }
- }
-}
-
-BuyButtonSubview.prototype.navigateTo = function (url) {
- global.platform.openWindow({ url })
-}
-
-BuyButtonSubview.prototype.backButtonContext = function () {
- if (this.props.context === 'confTx') {
- this.props.dispatch(actions.showConfTxPage({transForward: false}))
- } else {
- this.props.dispatch(actions.goHome())
- }
-}
-
-BuyButtonSubview.prototype.radioHandler = function (event) {
- switch (event.target.title) {
- case 'Coinbase':
- return this.props.dispatch(actions.coinBaseSubview())
- case 'ShapeShift':
- return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
- }
-}
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
new file mode 100644
index 000000000..389791b42
--- /dev/null
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { ETH } from '../../constants/common'
+
+export default class CurrencyDisplay extends PureComponent {
+ static propTypes = {
+ className: PropTypes.string,
+ displayValue: PropTypes.string,
+ prefix: PropTypes.string,
+ currency: PropTypes.oneOf([ETH]),
+ }
+
+ render () {
+ const { className, displayValue, prefix } = this.props
+ const text = `${prefix || ''}${displayValue}`
+
+ return (
+ <div
+ className={className}
+ title={text}
+ >
+ { text }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
new file mode 100644
index 000000000..b8a738c65
--- /dev/null
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import CurrencyDisplay from './currency-display.component'
+import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
+
+const mapStateToProps = (state, ownProps) => {
+ const { value, numberOfDecimals = 2, currency } = ownProps
+ const { metamask: { currentCurrency, conversionRate } } = state
+
+ const toCurrency = currency || currentCurrency
+ const convertedValue = getValueFromWeiHex({ value, toCurrency, conversionRate, numberOfDecimals })
+ const formattedValue = formatCurrency(convertedValue, toCurrency)
+ const displayValue = `${formattedValue} ${toCurrency.toUpperCase()}`
+
+ return {
+ displayValue,
+ }
+}
+
+export default connect(mapStateToProps)(CurrencyDisplay)
diff --git a/ui/app/components/currency-display/index.js b/ui/app/components/currency-display/index.js
new file mode 100644
index 000000000..38f08765f
--- /dev/null
+++ b/ui/app/components/currency-display/index.js
@@ -0,0 +1 @@
+export { default } from './currency-display.container'
diff --git a/ui/app/components/currency-display/tests/currency-display.component.test.js b/ui/app/components/currency-display/tests/currency-display.component.test.js
new file mode 100644
index 000000000..d9ef052f1
--- /dev/null
+++ b/ui/app/components/currency-display/tests/currency-display.component.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import CurrencyDisplay from '../currency-display.component'
+
+describe('CurrencyDisplay Component', () => {
+ it('should render text with a className', () => {
+ const wrapper = shallow(<CurrencyDisplay
+ displayValue="$123.45"
+ className="currency-display"
+ />)
+
+ assert.ok(wrapper.hasClass('currency-display'))
+ assert.equal(wrapper.text(), '$123.45')
+ })
+
+ it('should render text with a prefix', () => {
+ const wrapper = shallow(<CurrencyDisplay
+ displayValue="$123.45"
+ className="currency-display"
+ prefix="-"
+ />)
+
+ assert.ok(wrapper.hasClass('currency-display'))
+ assert.equal(wrapper.text(), '-$123.45')
+ })
+})
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js
new file mode 100644
index 000000000..474ce5378
--- /dev/null
+++ b/ui/app/components/currency-display/tests/currency-display.container.test.js
@@ -0,0 +1,61 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../currency-display.container.js', {
+ 'react-redux': {
+ connect: ms => {
+ mapStateToProps = ms
+ return () => ({})
+ },
+ },
+})
+
+describe('CurrencyDisplay container', () => {
+ describe('mapStateToProps()', () => {
+ it('should return the correct props', () => {
+ const mockState = {
+ metamask: {
+ conversionRate: 280.45,
+ currentCurrency: 'usd',
+ },
+ }
+
+ const tests = [
+ {
+ props: {
+ value: '0x2386f26fc10000',
+ numberOfDecimals: 2,
+ currency: 'usd',
+ },
+ result: {
+ displayValue: '$2.80 USD',
+ },
+ },
+ {
+ props: {
+ value: '0x2386f26fc10000',
+ },
+ result: {
+ displayValue: '$2.80 USD',
+ },
+ },
+ {
+ props: {
+ value: '0x1193461d01595930',
+ currency: 'ETH',
+ numberOfDecimals: 3,
+ },
+ result: {
+ displayValue: '1.266 ETH',
+ },
+ },
+ ]
+
+ tests.forEach(({ props, result }) => {
+ assert.deepEqual(mapStateToProps(mockState, props), result)
+ })
+ })
+ })
+})
diff --git a/ui/app/components/custom-radio-list.js b/ui/app/components/custom-radio-list.js
deleted file mode 100644
index a4c525396..000000000
--- a/ui/app/components/custom-radio-list.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-module.exports = RadioList
-
-inherits(RadioList, Component)
-function RadioList () {
- Component.call(this)
-}
-
-RadioList.prototype.render = function () {
- const props = this.props
- const activeClass = '.custom-radio-selected'
- const inactiveClass = '.custom-radio-inactive'
- const {
- labels,
- defaultFocus,
- } = props
-
-
- return (
- h('.flex-row', {
- style: {
- fontSize: '12px',
- },
- }, [
- h('.flex-column.custom-radios', {
- style: {
- marginRight: '5px',
- },
- },
- labels.map((lable, i) => {
- let isSelcted = (this.state !== null)
- isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable)
- return h(isSelcted ? activeClass : inactiveClass, {
- title: lable,
- onClick: (event) => {
- this.setState({selected: event.target.title})
- props.onClick(event)
- },
- })
- })
- ),
- h('.text', {},
- labels.map((lable) => {
- if (props.subtext) {
- return h('.flex-row', {}, [
- h('.radio-titles', lable),
- h('.radio-titles-subtext', `- ${props.subtext[lable]}`),
- ])
- } else {
- return h('.radio-titles', lable)
- }
- })
- ),
- ])
- )
-}
-
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index e5363ff56..63a30dd82 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -272,10 +272,12 @@ NetworkDropdown.prototype.getNetworkName = function () {
NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
const props = this.props
- const rpcTarget = provider.rpcTarget
+ const reversedRpcList = rpcList.slice().reverse()
- return rpcList.map((rpc) => {
- if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+ return reversedRpcList.map((rpc) => {
+ const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
+
+ if ((rpc === 'http://localhost:8545') || currentRpcTarget) {
return null
} else {
return h(
@@ -291,11 +293,11 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
},
},
[
- rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+ currentRpcTarget ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
h('span.network-name-item', {
style: {
- color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b',
+ color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
},
}, rpc),
]
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index 35d38e2a3..bdcb5626c 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -1,23 +1,35 @@
+@import './app-header/index';
+
@import './button-group/index';
-@import './export-text-container/index';
+@import './confirm-page-container/index';
-@import './selected-account/index';
+@import './export-text-container/index';
@import './info-box/index';
-@import './network-display/index';
+@import './menu-bar/index';
-@import './confirm-page-container/index';
+@import './modals/index';
+
+@import './network-display/index';
@import './page-container/index';
@import './pages/index';
-@import './modals/index';
+@import './selected-account/index';
@import './sender-to-recipient/index';
@import './tabs/index';
-@import './app-header/index';
+@import './transaction-view/index';
+
+@import './transaction-view-balance/index';
+
+@import './transaction-list/index';
+
+@import './transaction-list-item/index';
+
+@import './transaction-status/index';
diff --git a/ui/app/components/menu-bar/index.js b/ui/app/components/menu-bar/index.js
new file mode 100644
index 000000000..c5760847f
--- /dev/null
+++ b/ui/app/components/menu-bar/index.js
@@ -0,0 +1 @@
+export { default } from './menu-bar.container'
diff --git a/ui/app/components/menu-bar/index.scss b/ui/app/components/menu-bar/index.scss
new file mode 100644
index 000000000..f699f4090
--- /dev/null
+++ b/ui/app/components/menu-bar/index.scss
@@ -0,0 +1,23 @@
+.menu-bar {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex: 0 0 auto;
+ margin-bottom: 16px;
+ padding: 5px;
+ border-bottom: 1px solid #e5e5e5;
+
+ &__sidebar-button {
+ font-size: 1.25rem;
+ cursor: pointer;
+ padding: 10px;
+ }
+
+ &__open-in-browser {
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ padding: 10px;
+ }
+}
diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js
new file mode 100644
index 000000000..eee9feebb
--- /dev/null
+++ b/ui/app/components/menu-bar/menu-bar.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Tooltip from '../tooltip'
+import SelectedAccount from '../selected-account'
+
+export default class MenuBar extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ hideSidebar: PropTypes.func,
+ isMascara: PropTypes.bool,
+ sidebarOpen: PropTypes.bool,
+ showSidebar: PropTypes.func,
+ }
+
+ render () {
+ const { t } = this.context
+ const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
+
+ return (
+ <div className="menu-bar">
+ <Tooltip
+ title={t('menu')}
+ position="bottom"
+ >
+ <div
+ className="fa fa-bars menu-bar__sidebar-button"
+ onClick={() => sidebarOpen ? hideSidebar() : showSidebar()}
+ />
+ </Tooltip>
+ <SelectedAccount />
+ {
+ !isMascara && (
+ <Tooltip
+ title={t('openInTab')}
+ position="bottom"
+ >
+ <div
+ className="menu-bar__open-in-browser"
+ onClick={() => global.platform.openExtensionInBrowser()}
+ >
+ <img src="images/popout.svg" />
+ </div>
+ </Tooltip>
+ )
+ }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/menu-bar/menu-bar.container.js b/ui/app/components/menu-bar/menu-bar.container.js
new file mode 100644
index 000000000..2bd0ed6ed
--- /dev/null
+++ b/ui/app/components/menu-bar/menu-bar.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import MenuBar from './menu-bar.component'
+import { showSidebar, hideSidebar } from '../../actions'
+
+const mapStateToProps = state => {
+ const { appState: { sidebarOpen, isMascara } } = state
+
+ return {
+ sidebarOpen,
+ isMascara,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ showSidebar: () => dispatch(showSidebar()),
+ hideSidebar: () => dispatch(hideSidebar()),
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index cc90cf578..bc577fda0 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -61,7 +61,7 @@ AccountDetailsModal.prototype.render = function () {
let exportPrivateKeyFeatureEnabled = true
// This feature is disabled for hardware wallets
- if (keyring.type.search('Hardware') !== -1) {
+ if (keyring && keyring.type.search('Hardware') !== -1) {
exportPrivateKeyFeatureEnabled = false
}
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index a9856b20f..aa0593df8 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -7,9 +7,9 @@ const actions = require('../../actions')
const { getSelectedIdentity } = require('../../selectors')
const Identicon = require('../identicon')
-function mapStateToProps (state) {
+function mapStateToProps (state, ownProps) {
return {
- selectedIdentity: getSelectedIdentity(state),
+ selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state),
}
}
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 80ece425f..60a416304 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -1,3 +1,4 @@
+const log = require('loglevel')
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
@@ -11,19 +12,33 @@ const ReadOnlyInput = require('../readonly-input')
const copyToClipboard = require('copy-to-clipboard')
const { checksumAddress } = require('../../util')
-function mapStateToProps (state) {
- return {
- warning: state.appState.warning,
- privateKey: state.appState.accountDetail.privateKey,
- network: state.metamask.network,
- selectedIdentity: getSelectedIdentity(state),
- previousModalState: state.appState.modal.previousModalState.name,
+function mapStateToPropsFactory () {
+ let selectedIdentity = null
+ return function mapStateToProps (state) {
+ // We should **not** change the identity displayed here even if it changes from underneath us.
+ // If we do, we will be showing the user one private key and a **different** address and name.
+ // Note that the selected identity **will** change from underneath us when we unlock the keyring
+ // which is the expected behavior that we are side-stepping.
+ selectedIdentity = selectedIdentity || getSelectedIdentity(state)
+ return {
+ warning: state.appState.warning,
+ privateKey: state.appState.accountDetail.privateKey,
+ network: state.metamask.network,
+ selectedIdentity,
+ previousModalState: state.appState.modal.previousModalState.name,
+ }
}
}
function mapDispatchToProps (dispatch) {
return {
- exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
+ exportAccount: (password, address) => {
+ return dispatch(actions.exportAccount(password, address))
+ .then((res) => {
+ dispatch(actions.hideWarning())
+ return res
+ })
+ },
showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
hideModal: () => dispatch(actions.hideModal()),
}
@@ -36,6 +51,7 @@ function ExportPrivateKeyModal () {
this.state = {
password: '',
privateKey: null,
+ showWarning: true,
}
}
@@ -43,14 +59,18 @@ ExportPrivateKeyModal.contextTypes = {
t: PropTypes.func,
}
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
+module.exports = connect(mapStateToPropsFactory, mapDispatchToProps)(ExportPrivateKeyModal)
ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
const { exportAccount } = this.props
exportAccount(password, address)
- .then(privateKey => this.setState({ privateKey }))
+ .then(privateKey => this.setState({
+ privateKey,
+ showWarning: false,
+ }))
+ .catch((e) => log.error(e))
}
ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
@@ -110,9 +130,13 @@ ExportPrivateKeyModal.prototype.render = function () {
} = this.props
const { name, address } = selectedIdentity
- const { privateKey } = this.state
+ const {
+ privateKey,
+ showWarning,
+ } = this.state
return h(AccountModalContainer, {
+ selectedIdentity,
showBackButton: previousModalState === 'ACCOUNT_DETAILS',
backButtonAction: () => showAccountDetailModal(),
}, [
@@ -134,7 +158,7 @@ ExportPrivateKeyModal.prototype.render = function () {
this.renderPasswordInput(privateKey),
- !warning ? null : h('span.private-key-password-error', warning),
+ showWarning && warning ? h('span.private-key-password-error', warning) : null,
]),
h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 06c3ef709..14cdbacd3 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -109,7 +109,7 @@
&--selected {
color: $curious-blue;
- border-bottom: 3px solid $curious-blue;
+ border-bottom: 2px solid $curious-blue;
}
}
diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js
index 5a5de1e5a..a8458604e 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js
@@ -1,8 +1,8 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
export default class PageContainerHeader extends Component {
-
static propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
@@ -11,8 +11,18 @@ export default class PageContainerHeader extends Component {
onBackButtonClick: PropTypes.func,
backButtonStyles: PropTypes.object,
backButtonString: PropTypes.string,
- children: PropTypes.node,
- };
+ tabs: PropTypes.node,
+ }
+
+ renderTabs () {
+ const { tabs } = this.props
+
+ return tabs && (
+ <ul className="page-container__tabs">
+ { tabs }
+ </ul>
+ )
+ }
renderHeaderRow () {
const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props
@@ -31,15 +41,18 @@ export default class PageContainerHeader extends Component {
}
render () {
- const { title, subtitle, onClose, children } = this.props
+ const { title, subtitle, onClose, tabs } = this.props
return (
- <div className="page-container__header">
+ <div className={
+ classnames(
+ 'page-container__header',
+ { 'page-container__header--no-padding-bottom': Boolean(tabs) }
+ )
+ }>
{ this.renderHeaderRow() }
- { children }
-
{
title && <div className="page-container__title">
{ title }
@@ -59,6 +72,7 @@ export default class PageContainerHeader extends Component {
/>
}
+ { this.renderTabs() }
</div>
)
}
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js
index 9bfb99ade..3a2274a29 100644
--- a/ui/app/components/page-container/page-container.component.js
+++ b/ui/app/components/page-container/page-container.component.js
@@ -1,30 +1,82 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import PageContainerHeader from './page-container-header'
import PageContainerFooter from './page-container-footer'
-export default class PageContainer extends Component {
-
+export default class PageContainer extends PureComponent {
static propTypes = {
// PageContainerHeader props
- title: PropTypes.string.isRequired,
- subtitle: PropTypes.string,
+ backButtonString: PropTypes.string,
+ backButtonStyles: PropTypes.object,
+ onBackButtonClick: PropTypes.func,
onClose: PropTypes.func,
showBackButton: PropTypes.bool,
- onBackButtonClick: PropTypes.func,
- backButtonStyles: PropTypes.object,
- backButtonString: PropTypes.string,
+ subtitle: PropTypes.string,
+ title: PropTypes.string.isRequired,
+ // Tabs-related props
+ defaultActiveTabIndex: PropTypes.number,
+ tabsComponent: PropTypes.node,
// Content props
- ContentComponent: PropTypes.func,
- contentComponentProps: PropTypes.object,
+ contentComponent: PropTypes.node,
// PageContainerFooter props
- onCancel: PropTypes.func,
cancelText: PropTypes.string,
+ disabled: PropTypes.bool,
+ onCancel: PropTypes.func,
onSubmit: PropTypes.func,
submitText: PropTypes.string,
- disabled: PropTypes.bool,
- };
+ }
+
+ state = {
+ activeTabIndex: this.props.defaultActiveTabIndex || 0,
+ }
+
+ handleTabClick (activeTabIndex) {
+ this.setState({ activeTabIndex })
+ }
+
+ renderTabs () {
+ const { tabsComponent } = this.props
+
+ if (!tabsComponent) {
+ return
+ }
+
+ const numberOfTabs = React.Children.count(tabsComponent.props.children)
+
+ return React.Children.map(tabsComponent.props.children, (child, tabIndex) => {
+ return child && React.cloneElement(child, {
+ onClick: index => this.handleTabClick(index),
+ tabIndex,
+ isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
+ key: tabIndex,
+ className: 'page-container__tab',
+ activeClassName: 'page-container__tab--selected',
+ })
+ })
+ }
+
+ renderActiveTabContent () {
+ const { tabsComponent } = this.props
+ const { children } = tabsComponent.props
+ const { activeTabIndex } = this.state
+
+ return children[activeTabIndex]
+ ? children[activeTabIndex].props.children
+ : children.props.children
+ }
+
+ renderContent () {
+ const { contentComponent, tabsComponent } = this.props
+
+ if (contentComponent) {
+ return contentComponent
+ } else if (tabsComponent) {
+ return this.renderActiveTabContent()
+ } else {
+ return null
+ }
+ }
render () {
const {
@@ -35,8 +87,6 @@ export default class PageContainer extends Component {
onBackButtonClick,
backButtonStyles,
backButtonString,
- ContentComponent,
- contentComponentProps,
onCancel,
cancelText,
onSubmit,
@@ -54,9 +104,10 @@ export default class PageContainer extends Component {
onBackButtonClick={onBackButtonClick}
backButtonStyles={backButtonStyles}
backButtonString={backButtonString}
+ tabs={this.renderTabs()}
/>
<div className="page-container__content">
- <ContentComponent { ...contentComponentProps } />
+ { this.renderContent() }
</div>
<PageContainerFooter
onCancel={onCancel}
@@ -68,5 +119,4 @@ export default class PageContainer extends Component {
</div>
)
}
-
}
diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
index bcb93d401..59748ff46 100644
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ b/ui/app/components/pages/add-token/add-token.component.js
@@ -1,14 +1,14 @@
import React, { Component } from 'react'
-import classnames from 'classnames'
import PropTypes from 'prop-types'
import ethUtil from 'ethereumjs-util'
import { checkExistingAddresses } from './util'
import { tokenInfoGetter } from '../../../token-util'
import { DEFAULT_ROUTE, CONFIRM_ADD_TOKEN_ROUTE } from '../../../routes'
-import Button from '../../button'
import TextField from '../../text-field'
import TokenList from './token-list'
import TokenSearch from './token-search'
+import PageContainer from '../../page-container'
+import { Tabs, Tab } from '../../tabs'
const emptyAddr = '0x0000000000000000000000000000000000000000'
const SEARCH_TAB = 'SEARCH'
@@ -285,65 +285,33 @@ class AddToken extends Component {
)
}
+ renderTabs () {
+ return (
+ <Tabs>
+ <Tab name={this.context.t('search')}>
+ { this.renderSearchToken() }
+ </Tab>
+ <Tab name={this.context.t('customToken')}>
+ { this.renderCustomTokenForm() }
+ </Tab>
+ </Tabs>
+ )
+ }
+
render () {
- const { displayedTab } = this.state
const { history, clearPendingTokens } = this.props
return (
- <div className="page-container">
- <div className="page-container__header page-container__header--no-padding-bottom">
- <div className="page-container__title">
- { this.context.t('addTokens') }
- </div>
- <div className="page-container__tabs">
- <div
- className={classnames('page-container__tab', {
- 'page-container__tab--selected': displayedTab === SEARCH_TAB,
- })}
- onClick={() => this.setState({ displayedTab: SEARCH_TAB })}
- >
- { this.context.t('search') }
- </div>
- <div
- className={classnames('page-container__tab', {
- 'page-container__tab--selected': displayedTab === CUSTOM_TOKEN_TAB,
- })}
- onClick={() => this.setState({ displayedTab: CUSTOM_TOKEN_TAB })}
- >
- { this.context.t('customToken') }
- </div>
- </div>
- </div>
- <div className="page-container__content">
- {
- displayedTab === CUSTOM_TOKEN_TAB
- ? this.renderCustomTokenForm()
- : this.renderSearchToken()
- }
- </div>
- <div className="page-container__footer">
- <Button
- type="default"
- large
- className="page-container__footer-button"
- onClick={() => {
- clearPendingTokens()
- history.push(DEFAULT_ROUTE)
- }}
- >
- { this.context.t('cancel') }
- </Button>
- <Button
- type="primary"
- large
- className="page-container__footer-button"
- onClick={() => this.handleNext()}
- disabled={this.hasError() || !this.hasSelected()}
- >
- { this.context.t('next') }
- </Button>
- </div>
- </div>
+ <PageContainer
+ title={this.context.t('addTokens')}
+ tabsComponent={this.renderTabs()}
+ onSubmit={() => this.handleNext()}
+ disabled={this.hasError() || !this.hasSelected()}
+ onCancel={() => {
+ clearPendingTokens()
+ history.push(DEFAULT_ROUTE)
+ }}
+ />
)
}
}
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 025435a3b..c24e1e0ea 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { DEFAULT_ROUTE } from '../../../routes'
import Button from '../../button'
import Identicon from '../../../components/identicon'
-import TokenBalance from '../confirm-add-token/token-balance'
+import TokenBalance from '../../token-balance'
export default class ConfirmAddSuggestedToken extends Component {
static contextTypes = {
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 65d654b92..3dcc8cda9 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../../routes'
import Button from '../../button'
-import Identicon from '../../../components/identicon'
-import TokenBalance from './token-balance'
+import Identicon from '../../identicon'
+import TokenBalance from '../../token-balance'
export default class ConfirmAddToken extends Component {
static contextTypes = {
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/index.js b/ui/app/components/pages/confirm-add-token/token-balance/index.js
deleted file mode 100644
index 6fb5c8223..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import TokenBalance from './token-balance.container'
-module.exports = TokenBalance
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
deleted file mode 100644
index 976788d4c..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class TokenBalance extends Component {
- static propTypes = {
- string: PropTypes.string,
- symbol: PropTypes.string,
- error: PropTypes.string,
- }
-
- render () {
- return (
- <div className="hide-text-overflow">{ this.props.string }</div>
- )
- }
-}
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index 0280f73c6..2c44b6094 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -12,25 +12,27 @@ import {
CONFIRM_TOKEN_METHOD_PATH,
SIGNATURE_REQUEST_PATH,
} from '../../../routes'
-import { isConfirmDeployContract } from './confirm-transaction-switch.util'
+import { isConfirmDeployContract } from '../../../helpers/transactions.util'
import {
TOKEN_METHOD_TRANSFER,
TOKEN_METHOD_APPROVE,
TOKEN_METHOD_TRANSFER_FROM,
-} from './confirm-transaction-switch.constants'
+} from '../../../constants/transactions'
export default class ConfirmTransactionSwitch extends Component {
static propTypes = {
txData: PropTypes.object,
methodData: PropTypes.object,
- fetchingMethodData: PropTypes.bool,
+ fetchingData: PropTypes.bool,
+ isEtherTransaction: PropTypes.bool,
}
redirectToTransaction () {
const {
txData,
methodData: { name },
- fetchingMethodData,
+ fetchingData,
+ isEtherTransaction,
} = this.props
const { id, txParams: { data } = {} } = txData
@@ -39,10 +41,15 @@ export default class ConfirmTransactionSwitch extends Component {
return <Redirect to={{ pathname }} />
}
- if (fetchingMethodData) {
+ if (fetchingData) {
return <Loading />
}
+ if (isEtherTransaction) {
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+ return <Redirect to={{ pathname }} />
+ }
+
if (data) {
const methodName = name && name.toLowerCase()
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
deleted file mode 100644
index 9db4a2f96..000000000
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const TOKEN_METHOD_TRANSFER = 'transfer'
-export const TOKEN_METHOD_APPROVE = 'approve'
-export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom'
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
index 3d7fc78cc..7f2c36af2 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
@@ -6,14 +6,16 @@ const mapStateToProps = state => {
confirmTransaction: {
txData,
methodData,
- fetchingMethodData,
+ fetchingData,
+ toSmartContract,
},
} = state
return {
txData,
methodData,
- fetchingMethodData,
+ fetchingData,
+ isEtherTransaction: !toSmartContract,
}
}
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
deleted file mode 100644
index 6ee083579..000000000
--- a/ui/app/components/pages/home.js
+++ /dev/null
@@ -1,247 +0,0 @@
-const { Component } = require('react')
-const { connect } = require('react-redux')
-const PropTypes = require('prop-types')
-const { Redirect, withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const h = require('react-hyperscript')
-const actions = require('../../actions')
-const log = require('loglevel')
-
-// init
-const NewKeyChainScreen = require('../../new-keychain')
-// mascara
-const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default
-
-// accounts
-const MainContainer = require('../../main-container')
-
-// other views
-const BuyView = require('../../components/buy-button-subview')
-const QrView = require('../../components/qr-code')
-
-// Routes
-const {
- INITIALIZE_BACKUP_PHRASE_ROUTE,
- RESTORE_VAULT_ROUTE,
- CONFIRM_TRANSACTION_ROUTE,
- NOTICE_ROUTE,
- CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
-} = require('../../routes')
-
-const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
-
-class Home extends Component {
- componentDidMount () {
- const {
- history,
- suggestedTokens = {},
- unconfirmedTransactionsCount = 0,
- } = this.props
-
- // suggested new tokens
- if (Object.keys(suggestedTokens).length > 0) {
- history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
- }
-
- // unapprovedTxs and unapproved messages
- if (unconfirmedTransactionsCount > 0) {
- history.push(CONFIRM_TRANSACTION_ROUTE)
- }
- }
-
- render () {
- log.debug('rendering primary')
- const {
- noActiveNotices,
- lostAccounts,
- forgottenPassword,
- currentView,
- activeAddress,
- seedWords,
- } = this.props
-
- // notices
- if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
- return h(Redirect, {
- to: {
- pathname: NOTICE_ROUTE,
- },
- })
- }
-
- // seed words
- if (seedWords) {
- log.debug('rendering seed words')
- return h(Redirect, {
- to: {
- pathname: INITIALIZE_BACKUP_PHRASE_ROUTE,
- },
- })
- }
-
- if (forgottenPassword) {
- log.debug('rendering restore vault screen')
- return h(Redirect, {
- to: {
- pathname: RESTORE_VAULT_ROUTE,
- },
- })
- }
-
- // show current view
- switch (currentView.name) {
-
- case 'accountDetail':
- log.debug('rendering main container')
- return h(MainContainer, {key: 'account-detail'})
-
- case 'newKeychain':
- log.debug('rendering new keychain screen')
- return h(NewKeyChainScreen, {key: 'new-keychain'})
-
- case 'buyEth':
- log.debug('rendering buy ether screen')
- return h(BuyView, {key: 'buyEthView'})
-
- case 'onboardingBuyEth':
- log.debug('rendering onboarding buy ether screen')
- return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
-
- case 'qr':
- log.debug('rendering show qr screen')
- return h('div', {
- style: {
- position: 'absolute',
- height: '100%',
- top: '0px',
- left: '0px',
- },
- }, [
- h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
- onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)),
- style: {
- marginLeft: '10px',
- marginTop: '50px',
- },
- }),
- h('div', {
- style: {
- position: 'absolute',
- left: '44px',
- width: '285px',
- },
- }, [
- h(QrView, {key: 'qr'}),
- ]),
- ])
-
- default:
- log.debug('rendering default, account detail screen')
- return h(MainContainer, {key: 'account-detail'})
- }
- }
-}
-
-Home.propTypes = {
- currentCurrency: PropTypes.string,
- isLoading: PropTypes.bool,
- loadingMessage: PropTypes.string,
- network: PropTypes.string,
- provider: PropTypes.object,
- frequentRpcList: PropTypes.array,
- currentView: PropTypes.object,
- sidebarOpen: PropTypes.bool,
- isMascara: PropTypes.bool,
- isOnboarding: PropTypes.bool,
- isUnlocked: PropTypes.bool,
- networkDropdownOpen: PropTypes.bool,
- history: PropTypes.object,
- dispatch: PropTypes.func,
- selectedAddress: PropTypes.string,
- noActiveNotices: PropTypes.bool,
- lostAccounts: PropTypes.array,
- isInitialized: PropTypes.bool,
- forgottenPassword: PropTypes.bool,
- activeAddress: PropTypes.string,
- unapprovedTxs: PropTypes.object,
- seedWords: PropTypes.string,
- unapprovedMsgCount: PropTypes.number,
- unapprovedPersonalMsgCount: PropTypes.number,
- unapprovedTypedMessagesCount: PropTypes.number,
- welcomeScreenSeen: PropTypes.bool,
- isPopup: PropTypes.bool,
- isMouseUser: PropTypes.bool,
- t: PropTypes.func,
- suggestedTokens: PropTypes.object,
- unconfirmedTransactionsCount: PropTypes.number,
-}
-
-function mapStateToProps (state) {
- const { appState, metamask } = state
- const {
- networkDropdownOpen,
- sidebarOpen,
- isLoading,
- loadingMessage,
- } = appState
-
- const {
- accounts,
- address,
- isInitialized,
- noActiveNotices,
- seedWords,
- unapprovedTxs,
- nextUnreadNotice,
- lostAccounts,
- unapprovedMsgCount,
- unapprovedPersonalMsgCount,
- unapprovedTypedMessagesCount,
- } = metamask
- const selected = address || Object.keys(accounts)[0]
-
- return {
- // state from plugin
- networkDropdownOpen,
- sidebarOpen,
- isLoading,
- loadingMessage,
- noActiveNotices,
- isInitialized,
- isUnlocked: state.metamask.isUnlocked,
- selectedAddress: state.metamask.selectedAddress,
- currentView: state.appState.currentView,
- activeAddress: state.appState.activeAddress,
- transForward: state.appState.transForward,
- isMascara: state.metamask.isMascara,
- isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
- isPopup: state.metamask.isPopup,
- seedWords: state.metamask.seedWords,
- unapprovedTxs,
- unapprovedMsgs: state.metamask.unapprovedMsgs,
- unapprovedMsgCount,
- unapprovedPersonalMsgCount,
- unapprovedTypedMessagesCount,
- menuOpen: state.appState.menuOpen,
- network: state.metamask.network,
- provider: state.metamask.provider,
- forgottenPassword: state.appState.forgottenPassword,
- nextUnreadNotice,
- lostAccounts,
- frequentRpcList: state.metamask.frequentRpcList || [],
- currentCurrency: state.metamask.currentCurrency,
- isMouseUser: state.appState.isMouseUser,
- isRevealingSeedWords: state.metamask.isRevealingSeedWords,
- Qr: state.appState.Qr,
- welcomeScreenSeen: state.metamask.welcomeScreenSeen,
- suggestedTokens: state.metamask.suggestedTokens,
- // state needed to get account dropdown temporarily rendering from app bar
- selected,
- unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
- }
-}
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps)
-)(Home)
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
new file mode 100644
index 000000000..d3c71c4f6
--- /dev/null
+++ b/ui/app/components/pages/home/home.component.js
@@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Media from 'react-media'
+import { Redirect } from 'react-router-dom'
+import WalletView from '../../wallet-view'
+import TransactionView from '../../transaction-view'
+import {
+ INITIALIZE_BACKUP_PHRASE_ROUTE,
+ RESTORE_VAULT_ROUTE,
+ CONFIRM_TRANSACTION_ROUTE,
+ NOTICE_ROUTE,
+ CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+} from '../../../routes'
+
+export default class Home extends PureComponent {
+ static propTypes = {
+ history: PropTypes.object,
+ noActiveNotices: PropTypes.bool,
+ lostAccounts: PropTypes.array,
+ forgottenPassword: PropTypes.bool,
+ seedWords: PropTypes.string,
+ suggestedTokens: PropTypes.object,
+ unconfirmedTransactionsCount: PropTypes.number,
+ }
+
+ componentDidMount () {
+ const {
+ history,
+ suggestedTokens = {},
+ unconfirmedTransactionsCount = 0,
+ } = this.props
+
+ // suggested new tokens
+ if (Object.keys(suggestedTokens).length > 0) {
+ history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
+ }
+
+ if (unconfirmedTransactionsCount > 0) {
+ history.push(CONFIRM_TRANSACTION_ROUTE)
+ }
+ }
+
+ render () {
+ const {
+ noActiveNotices,
+ lostAccounts,
+ forgottenPassword,
+ seedWords,
+ } = this.props
+
+ // notices
+ if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
+ return <Redirect to={{ pathname: NOTICE_ROUTE }} />
+ }
+
+ // seed words
+ if (seedWords) {
+ return <Redirect to={{ pathname: INITIALIZE_BACKUP_PHRASE_ROUTE }}/>
+ }
+
+ if (forgottenPassword) {
+ return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
+ }
+
+ return (
+ <div className="main-container">
+ <div className="account-and-transaction-details">
+ <Media
+ query="(min-width: 576px)"
+ render={() => <WalletView />}
+ />
+ <TransactionView />
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js
new file mode 100644
index 000000000..58001df6b
--- /dev/null
+++ b/ui/app/components/pages/home/home.container.js
@@ -0,0 +1,30 @@
+import Home from './home.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { unconfirmedTransactionsCountSelector } from '../../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+ const { metamask, appState } = state
+ const {
+ noActiveNotices,
+ lostAccounts,
+ seedWords,
+ suggestedTokens,
+ } = metamask
+ const { forgottenPassword } = appState
+
+ return {
+ noActiveNotices,
+ lostAccounts,
+ forgottenPassword,
+ seedWords,
+ suggestedTokens,
+ unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps)
+)(Home)
diff --git a/ui/app/components/pages/home/index.js b/ui/app/components/pages/home/index.js
new file mode 100644
index 000000000..4474ba5b8
--- /dev/null
+++ b/ui/app/components/pages/home/index.js
@@ -0,0 +1 @@
+export { default } from './home.container'
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
deleted file mode 100644
index f16fcb1c7..000000000
--- a/ui/app/components/pending-msg-details.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-
-const AccountPanel = require('./account-panel')
-
-PendingMsgDetails.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(PendingMsgDetails)
-
-
-inherits(PendingMsgDetails, Component)
-function PendingMsgDetails () {
- Component.call(this)
-}
-
-PendingMsgDetails.prototype.render = function () {
- var state = this.props
- var msgData = state.txData
-
- var msgParams = msgData.msgParams || {}
- var address = msgParams.from || state.selectedAddress
- var identity = state.identities[address] || { address: address }
- var account = state.accounts[address] || { address: address }
-
- return (
- h('div', {
- key: msgData.id,
- style: {
- margin: '10px 20px',
- },
- }, [
-
- // account that will sign
- h(AccountPanel, {
- showFullAddress: true,
- identity: identity,
- account: account,
- imageifyIdenticons: state.imageifyIdenticons,
- }),
-
- // message data
- h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
- h('.flex-column.flex-space-between', [
- h('label.font-small.allcaps', this.context.t('message')),
- h('span.font-small', msgParams.data),
- ]),
- ]),
-
- ])
- )
-}
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
deleted file mode 100644
index 21a7864e4..000000000
--- a/ui/app/components/pending-msg.js
+++ /dev/null
@@ -1,73 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const PendingTxDetails = require('./pending-msg-details')
-const connect = require('react-redux').connect
-
-PendingMsg.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(PendingMsg)
-
-
-inherits(PendingMsg, Component)
-function PendingMsg () {
- Component.call(this)
-}
-
-PendingMsg.prototype.render = function () {
- var state = this.props
- var msgData = state.txData
-
- return (
-
- h('div', {
- key: msgData.id,
- style: {
- maxWidth: '350px',
- },
- }, [
-
- // header
- h('h3', {
- style: {
- fontWeight: 'bold',
- textAlign: 'center',
- },
- }, this.context.t('signMessage')),
-
- h('.error', {
- style: {
- margin: '10px',
- },
- }, [
- this.context.t('signNotice'),
- h('a', {
- href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
- style: { color: 'rgb(247, 134, 28)' },
- onClick: (event) => {
- event.preventDefault()
- const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
- global.platform.openWindow({ url })
- },
- }, this.context.t('readMore')),
- ]),
-
- // message details
- h(PendingTxDetails, state),
-
- // sign + cancel
- h('.flex-row.flex-space-around', [
- h('button', {
- onClick: state.cancelMessage,
- }, this.context.t('cancel')),
- h('button', {
- onClick: state.signMessage,
- }, this.context.t('sign')),
- ]),
- ])
-
- )
-}
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 1163dcffc..434db81e5 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -48,7 +48,7 @@ export default class SendToRow extends Component {
return (
<SendRowWrapper
errorType={'to'}
- label={`${this.context.t('to')}`}
+ label={`${this.context.t('to')}: `}
showError={inError}
>
<EnsInput
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
index 781371004..591229deb 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-component.test.js
@@ -102,7 +102,7 @@ describe('SendToRow Component', function () {
assert.equal(errorType, 'to')
- assert.equal(label, 'to_t')
+ assert.equal(label, 'to_t: ')
assert.equal(showError, false)
})
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
index a97393b8f..656e30ddf 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -1,5 +1,5 @@
.sender-to-recipient {
- &__container {
+ &--default {
width: 100%;
display: flex;
flex-direction: row;
@@ -8,67 +8,114 @@
position: relative;
flex: 0 0 auto;
height: 42px;
- }
- &__tooltip-wrapper {
- min-width: 0;
- }
+ .sender-to-recipient {
+ &__tooltip-wrapper {
+ min-width: 0;
+ }
- &__tooltip-container {
- max-width: 100%;
- }
+ &__tooltip-container {
+ max-width: 100%;
+ }
- &__sender,
- &__recipient {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex: 1;
- padding: 0 16px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ &__party {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ padding: 0 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
- &__sender {
- padding-right: 30px;
- cursor: pointer;
- }
+ &--sender {
+ padding-right: 30px;
+ cursor: pointer;
+ }
+
+ &--recipient {
+ padding-left: 30px;
+ border-left: 1px solid $geyser;
+
+ &-with-address {
+ cursor: pointer;
+ }
+ }
+ }
- &__recipient {
- padding-left: 30px;
- border-left: 1px solid $geyser;
+ &__arrow-container {
+ position: absolute;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
- &--with-address {
- cursor: pointer;
+ &__arrow-circle {
+ background: $white;
+ padding: 5px;
+ border: 1px solid $geyser;
+ border-radius: 20px;
+ height: 32px;
+ width: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &__name {
+ padding-left: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: .875rem;
+ }
}
}
- &__arrow-container {
- position: absolute;
- height: 100%;
+ &--cards {
+ width: 100%;
display: flex;
- align-items: center;
+ flex-direction: row;
justify-content: center;
- }
+ position: relative;
+ flex: 0 0 auto;
+ padding: 8px;
- &__arrow-circle {
- background: $white;
- padding: 5px;
- border: 1px solid $geyser;
- border-radius: 20px;
- height: 32px;
- width: 32px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
+ .sender-to-recipient {
+ &__party {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ border-radius: 4px;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 6px;
+ background: $white;
+ cursor: pointer;
+ min-width: 0;
+ color: $dusty-gray;
+ }
+
+ &__tooltip-wrapper {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- &__name {
- padding-left: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: .875rem;
+ &__name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: .5rem;
+ }
+
+ &__arrow-container {
+ padding: 0 2px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
}
}
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
index cae173b56..5af4045f5 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -1,16 +1,29 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
import Identicon from '../identicon'
import Tooltip from '../tooltip-v2'
import copyToClipboard from 'copy-to-clipboard'
+import { DEFAULT_VARIANT, CARDS_VARIANT } from './sender-to-recipient.constants'
-export default class SenderToRecipient extends Component {
+const variantHash = {
+ [DEFAULT_VARIANT]: 'sender-to-recipient--default',
+ [CARDS_VARIANT]: 'sender-to-recipient--cards',
+}
+
+export default class SenderToRecipient extends PureComponent {
static propTypes = {
senderName: PropTypes.string,
senderAddress: PropTypes.string,
recipientName: PropTypes.string,
recipientAddress: PropTypes.string,
t: PropTypes.func,
+ variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT]),
+ addressOnly: PropTypes.bool,
+ }
+
+ static defaultProps = {
+ variant: DEFAULT_VARIANT,
}
static contextTypes = {
@@ -22,24 +35,62 @@ export default class SenderToRecipient extends Component {
recipientAddressCopied: false,
}
+ renderSenderIdenticon () {
+ return !this.props.addressOnly && (
+ <div className="sender-to-recipient__sender-icon">
+ <Identicon
+ address={this.props.senderAddress}
+ diameter={24}
+ />
+ </div>
+ )
+ }
+
+ renderSenderAddress () {
+ const { t } = this.context
+ const { senderName, senderAddress, addressOnly } = this.props
+
+ return (
+ <Tooltip
+ position="bottom"
+ title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
+ wrapperClassName="sender-to-recipient__tooltip-wrapper"
+ containerClassName="sender-to-recipient__tooltip-container"
+ onHidden={() => this.setState({ senderAddressCopied: false })}
+ >
+ <div className="sender-to-recipient__name">
+ { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
+ </div>
+ </Tooltip>
+ )
+ }
+
+ renderRecipientIdenticon () {
+ const { recipientAddress } = this.props
+
+ return !this.props.addressOnly && (
+ <div className="sender-to-recipient__sender-icon">
+ <Identicon
+ address={recipientAddress}
+ diameter={24}
+ />
+ </div>
+ )
+ }
+
renderRecipientWithAddress () {
const { t } = this.context
- const { recipientName, recipientAddress } = this.props
+ const { recipientName, recipientAddress, addressOnly } = this.props
return (
<div
- className="sender-to-recipient__recipient sender-to-recipient__recipient--with-address"
+ className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
onClick={() => {
this.setState({ recipientAddressCopied: true })
copyToClipboard(recipientAddress)
}}
>
- <div className="sender-to-recipient__sender-icon">
- <Identicon
- address={recipientAddress}
- diameter={24}
- />
- </div>
+ { this.renderRecipientIdenticon() }
<Tooltip
position="bottom"
title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
@@ -47,8 +98,12 @@ export default class SenderToRecipient extends Component {
containerClassName="sender-to-recipient__tooltip-container"
onHidden={() => this.setState({ recipientAddressCopied: false })}
>
- <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
- { recipientName || this.context.t('newContract') }
+ <div className="sender-to-recipient__name">
+ {
+ addressOnly
+ ? `${t('to')}: ${recipientAddress}`
+ : (recipientName || this.context.t('newContract'))
+ }
</div>
</Tooltip>
</div>
@@ -57,46 +112,25 @@ export default class SenderToRecipient extends Component {
renderRecipientWithoutAddress () {
return (
- <div className="sender-to-recipient__recipient">
+ <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
<i className="fa fa-file-text-o" />
- <div className="sender-to-recipient__name sender-to-recipient__recipient-name">
+ <div className="sender-to-recipient__name">
{ this.context.t('newContract') }
</div>
</div>
)
}
- render () {
- const { t } = this.context
- const { senderName, senderAddress, recipientAddress } = this.props
-
- return (
- <div className="sender-to-recipient__container">
- <div
- className="sender-to-recipient__sender"
- onClick={() => {
- this.setState({ senderAddressCopied: true })
- copyToClipboard(senderAddress)
- }}
- >
- <div className="sender-to-recipient__sender-icon">
- <Identicon
- address={senderAddress}
- diameter={24}
- />
- </div>
- <Tooltip
- position="bottom"
- title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
- wrapperClassName="sender-to-recipient__tooltip-wrapper"
- containerClassName="sender-to-recipient__tooltip-container"
- onHidden={() => this.setState({ senderAddressCopied: false })}
- >
- <div className="sender-to-recipient__name sender-to-recipient__sender-name">
- { senderName }
- </div>
- </Tooltip>
+ renderArrow () {
+ return this.props.variant === CARDS_VARIANT
+ ? (
+ <div className="sender-to-recipient__arrow-container">
+ <img
+ height={20}
+ src="./images/caret-right.svg"
+ />
</div>
+ ) : (
<div className="sender-to-recipient__arrow-container">
<div className="sender-to-recipient__arrow-circle">
<img
@@ -106,6 +140,25 @@ export default class SenderToRecipient extends Component {
/>
</div>
</div>
+ )
+ }
+
+ render () {
+ const { senderAddress, recipientAddress, variant } = this.props
+
+ return (
+ <div className={classnames(variantHash[variant])}>
+ <div
+ className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
+ onClick={() => {
+ this.setState({ senderAddressCopied: true })
+ copyToClipboard(senderAddress)
+ }}
+ >
+ { this.renderSenderIdenticon() }
+ { this.renderSenderAddress() }
+ </div>
+ { this.renderArrow() }
{
recipientAddress
? this.renderRecipientWithAddress()
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
new file mode 100644
index 000000000..166228932
--- /dev/null
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
@@ -0,0 +1,3 @@
+// Component design variants
+export const DEFAULT_VARIANT = 'DEFAULT_VARIANT'
+export const CARDS_VARIANT = 'CARDS_VARIANT'
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 4334aacba..b87bf959e 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -35,12 +35,13 @@ function ShiftListItem () {
}
ShiftListItem.prototype.render = function () {
- return h('div.tx-list-item.tx-list-clickable', {
+ return h('div.transaction-list-item.tx-list-clickable', {
style: {
paddingTop: '20px',
paddingBottom: '20px',
justifyContent: 'space-around',
alignItems: 'center',
+ flexDirection: 'row',
},
}, [
h('div', {
diff --git a/ui/app/components/tabs/tab/tab.component.js b/ui/app/components/tabs/tab/tab.component.js
index a59da8904..9e590391c 100644
--- a/ui/app/components/tabs/tab/tab.component.js
+++ b/ui/app/components/tabs/tab/tab.component.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
const Tab = props => {
- const { name, onClick, isActive, tabIndex } = props
+ const { name, onClick, isActive, tabIndex, className, activeClassName } = props
return (
<li
className={classnames(
- 'tab',
- isActive && 'tab--active',
+ className,
+ { [activeClassName]: isActive },
)}
onClick={event => {
event.preventDefault()
@@ -26,6 +26,13 @@ Tab.propTypes = {
onClick: PropTypes.func,
isActive: PropTypes.bool,
tabIndex: PropTypes.number,
+ className: PropTypes.string,
+ activeClassName: PropTypes.string,
+}
+
+Tab.defaultProps = {
+ className: 'tab',
+ activeClassName: 'tab--active',
}
export default Tab
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
deleted file mode 100644
index 99ca7335c..000000000
--- a/ui/app/components/token-balance.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const TokenTracker = require('eth-token-tracker')
-const connect = require('react-redux').connect
-const selectors = require('../selectors')
-const log = require('loglevel')
-
-function mapStateToProps (state) {
- return {
- userAddress: selectors.getSelectedAddress(state),
- }
-}
-
-module.exports = connect(mapStateToProps)(TokenBalance)
-
-
-inherits(TokenBalance, Component)
-function TokenBalance () {
- this.state = {
- string: '',
- symbol: '',
- isLoading: true,
- error: null,
- }
- Component.call(this)
-}
-
-TokenBalance.prototype.render = function () {
- const state = this.state
- const { symbol, string, isLoading } = state
- const { balanceOnly } = this.props
-
- return isLoading
- ? h('span', '')
- : h('span.token-balance', [
- h('span.hide-text-overflow.token-balance__amount', string),
- !balanceOnly && h('span.token-balance__symbol', symbol),
- ])
-}
-
-TokenBalance.prototype.componentDidMount = function () {
- this.createFreshTokenTracker()
-}
-
-TokenBalance.prototype.createFreshTokenTracker = function () {
- if (this.tracker) {
- // Clean up old trackers when refreshing:
- this.tracker.stop()
- this.tracker.removeListener('update', this.balanceUpdater)
- this.tracker.removeListener('error', this.showError)
- }
-
- if (!global.ethereumProvider) return
- const { userAddress, token } = this.props
-
- this.tracker = new TokenTracker({
- userAddress,
- provider: global.ethereumProvider,
- tokens: [token],
- pollingInterval: 8000,
- })
-
-
- // Set up listener instances for cleaning up
- this.balanceUpdater = this.updateBalance.bind(this)
- this.showError = error => {
- this.setState({ error, isLoading: false })
- }
- this.tracker.on('update', this.balanceUpdater)
- this.tracker.on('error', this.showError)
-
- this.tracker.updateBalances()
- .then(() => {
- this.updateBalance(this.tracker.serialize())
- })
- .catch((reason) => {
- log.error(`Problem updating balances`, reason)
- this.setState({ isLoading: false })
- })
-}
-
-TokenBalance.prototype.componentDidUpdate = function (nextProps) {
- const {
- userAddress: oldAddress,
- token: { address: oldTokenAddress },
- } = this.props
- const {
- userAddress: newAddress,
- token: { address: newTokenAddress },
- } = nextProps
-
- if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return
- if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return
-
- this.setState({ isLoading: true })
- this.createFreshTokenTracker()
-}
-
-TokenBalance.prototype.updateBalance = function (tokens = []) {
- if (!this.tracker.running) {
- return
- }
-
- const [{ string, symbol }] = tokens
-
- this.setState({
- string,
- symbol,
- isLoading: false,
- })
-}
-
-TokenBalance.prototype.componentWillUnmount = function () {
- if (!this.tracker) return
- this.tracker.stop()
- this.tracker.removeListener('update', this.balanceUpdater)
- this.tracker.removeListener('error', this.showError)
-}
-
diff --git a/ui/app/components/token-balance/index.js b/ui/app/components/token-balance/index.js
new file mode 100644
index 000000000..f7da15cf8
--- /dev/null
+++ b/ui/app/components/token-balance/index.js
@@ -0,0 +1 @@
+export { default } from './token-balance.container'
diff --git a/ui/app/components/token-balance/token-balance.component.js b/ui/app/components/token-balance/token-balance.component.js
new file mode 100644
index 000000000..2b4f73980
--- /dev/null
+++ b/ui/app/components/token-balance/token-balance.component.js
@@ -0,0 +1,23 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TokenBalance extends PureComponent {
+ static propTypes = {
+ string: PropTypes.string,
+ symbol: PropTypes.string,
+ error: PropTypes.string,
+ className: PropTypes.string,
+ withSymbol: PropTypes.bool,
+ }
+
+ render () {
+ const { className, string, withSymbol, symbol } = this.props
+
+ return (
+ <div className={classnames('hide-text-overflow', className)}>
+ { string + (withSymbol ? ` ${symbol}` : '') }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js b/ui/app/components/token-balance/token-balance.container.js
index bc1289ce1..adc001f83 100644
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
+++ b/ui/app/components/token-balance/token-balance.container.js
@@ -1,8 +1,8 @@
import { connect } from 'react-redux'
import { compose } from 'recompose'
-import withTokenTracker from '../../../../helpers/with-token-tracker'
+import withTokenTracker from '../../higher-order-components/with-token-tracker'
import TokenBalance from './token-balance.component'
-import selectors from '../../../../selectors'
+import selectors from '../../selectors'
const mapStateToProps = state => {
return {
diff --git a/ui/app/components/token-currency-display/index.js b/ui/app/components/token-currency-display/index.js
new file mode 100644
index 000000000..6065cae1f
--- /dev/null
+++ b/ui/app/components/token-currency-display/index.js
@@ -0,0 +1 @@
+export { default } from './token-currency-display.component'
diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js
new file mode 100644
index 000000000..957aec376
--- /dev/null
+++ b/ui/app/components/token-currency-display/token-currency-display.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../currency-display/currency-display.component'
+import { getTokenData } from '../../helpers/transactions.util'
+import { calcTokenAmount } from '../../token-util'
+
+export default class TokenCurrencyDisplay extends PureComponent {
+ static propTypes = {
+ transactionData: PropTypes.string,
+ token: PropTypes.object,
+ }
+
+ state = {
+ displayValue: '',
+ }
+
+ componentDidMount () {
+ this.setDisplayValue()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { transactionData } = this.props
+ const { transactionData: prevTransactionData } = prevProps
+
+ if (transactionData !== prevTransactionData) {
+ this.setDisplayValue()
+ }
+ }
+
+ setDisplayValue () {
+ const { transactionData: data, token } = this.props
+ const { decimals = '', symbol = '' } = token
+ const tokenData = getTokenData(data)
+
+ let displayValue
+
+ if (tokenData.params && tokenData.params.length === 2) {
+ const tokenValue = tokenData.params[1].value
+ const tokenAmount = calcTokenAmount(tokenValue, decimals)
+ displayValue = `${tokenAmount} ${symbol}`
+ }
+
+ this.setState({ displayValue })
+ }
+
+ render () {
+ return (
+ <CurrencyDisplay
+ {...this.props}
+ displayValue={this.state.displayValue}
+ />
+ )
+ }
+}
diff --git a/ui/app/components/transaction-action/index.js b/ui/app/components/transaction-action/index.js
new file mode 100644
index 000000000..a6e9097f1
--- /dev/null
+++ b/ui/app/components/transaction-action/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-action.component'
diff --git a/ui/app/components/transaction-action/tests/transaction-action.component.test.js b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
new file mode 100644
index 000000000..218792847
--- /dev/null
+++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
@@ -0,0 +1,112 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TransactionAction from '../transaction-action.component'
+
+describe('TransactionAction Component', () => {
+ const tOrDefault = key => key
+ global.eth = {
+ getCode: sinon.stub().callsFake(address => {
+ console.log('CALLED')
+ const code = address === 'approveAddress' ? 'contract' : '0x'
+ return Promise.resolve(code)
+ }),
+ }
+
+ describe('Outgoing transaction', () => {
+ it('should render -- when methodData is still fetching', () => {
+ const methodData = { data: {}, done: false, error: null }
+ const transaction = {
+ id: 1,
+ status: 'confirmed',
+ submittedTime: 1534045442919,
+ time: 1534045440641,
+ txParams: {
+ from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0x96',
+ to: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(<TransactionAction
+ methodData={methodData}
+ transaction={transaction}
+ className="transaction-action"
+ />, { context: { tOrDefault }})
+
+ assert.equal(wrapper.find('.transaction-action').length, 1)
+ assert.equal(wrapper.text(), '--')
+ })
+
+ it('should render Sent Ether', () => {
+ const methodData = { data: {}, done: true, error: null }
+ const transaction = {
+ id: 1,
+ status: 'confirmed',
+ submittedTime: 1534045442919,
+ time: 1534045440641,
+ txParams: {
+ from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0x96',
+ to: 'sentEtherAddress',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(<TransactionAction
+ methodData={methodData}
+ transaction={transaction}
+ className="transaction-action"
+ />, { context: { tOrDefault }})
+
+ assert.equal(wrapper.find('.transaction-action').length, 1)
+ wrapper.setState({ transactionAction: 'sentEther' })
+ assert.equal(wrapper.text(), 'sentEther')
+ })
+
+ it('should render Approved', () => {
+ const methodData = {
+ data: {
+ name: 'Approve',
+ params: [
+ { type: 'address' },
+ { type: 'uint256' },
+ ],
+ },
+ done: true,
+ error: null,
+ }
+ const transaction = {
+ id: 1,
+ status: 'confirmed',
+ submittedTime: 1534045442919,
+ time: 1534045440641,
+ txParams: {
+ from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0x96',
+ to: 'approveAddress',
+ value: '0x2386f26fc10000',
+ data: '0x095ea7b300000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000000003',
+ },
+ }
+
+ const wrapper = shallow(<TransactionAction
+ methodData={methodData}
+ transaction={transaction}
+ className="transaction-action"
+ />, { context: { tOrDefault }})
+
+ assert.equal(wrapper.find('.transaction-action').length, 1)
+ wrapper.setState({ transactionAction: 'approve' })
+ assert.equal(wrapper.text(), 'approve')
+ })
+ })
+})
diff --git a/ui/app/components/transaction-action/transaction-action.component.js b/ui/app/components/transaction-action/transaction-action.component.js
new file mode 100644
index 000000000..81a1e96d0
--- /dev/null
+++ b/ui/app/components/transaction-action/transaction-action.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getTransactionActionKey } from '../../helpers/transactions.util'
+
+export default class TransactionAction extends PureComponent {
+ static contextTypes = {
+ tOrDefault: PropTypes.func,
+ }
+
+ static propTypes = {
+ className: PropTypes.string,
+ transaction: PropTypes.object,
+ methodData: PropTypes.object,
+ }
+
+ state = {
+ transactionAction: '',
+ }
+
+ componentDidMount () {
+ this.getTransactionAction()
+ }
+
+ componentDidUpdate () {
+ this.getTransactionAction()
+ }
+
+ async getTransactionAction () {
+ const { transactionAction } = this.state
+ const { transaction, methodData } = this.props
+ const { data, done } = methodData
+
+ if (!done || transactionAction) {
+ return
+ }
+
+ const actionKey = await getTransactionActionKey(transaction, data)
+ const action = actionKey && this.context.tOrDefault(actionKey)
+ this.setState({ transactionAction: action })
+ }
+
+ render () {
+ const { className, methodData: { done } } = this.props
+ const { transactionAction } = this.state
+
+ return (
+ <div className={className}>
+ { (done && transactionAction) || '--' }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item/index.js b/ui/app/components/transaction-list-item/index.js
new file mode 100644
index 000000000..697cc55e9
--- /dev/null
+++ b/ui/app/components/transaction-list-item/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list-item.container'
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
new file mode 100644
index 000000000..9c53c8960
--- /dev/null
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -0,0 +1,117 @@
+.transaction-list-item {
+ box-sizing: border-box;
+ min-height: 74px;
+ padding: 8px 20px;
+ border-bottom: 1px solid $geyser;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ @media screen and (max-width: $break-small) {
+ padding: 8px 20px 12px;
+ }
+
+ &:hover {
+ background: rgba($alto, .2);
+ }
+
+ &__grid {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 45px 1fr 1fr 1fr;
+ grid-template-areas:
+ "identicon action status primary-amount"
+ "identicon nonce status secondary-amount";
+
+ @media screen and (max-width: $break-small) {
+ grid-template-columns: 45px 5fr 3fr;
+ grid-template-areas:
+ "nonce nonce nonce"
+ "identicon action primary-amount"
+ "identicon status secondary-amount";
+ }
+ }
+
+ &__identicon {
+ grid-area: identicon;
+ grid-row: 1 / span 2;
+ align-self: center;
+
+ @media screen and (max-width: $break-small) {
+ grid-row: 2 / span 2;
+ }
+ }
+
+ &__action {
+ text-transform: capitalize;
+ padding: 0 8px 2px 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ grid-area: action;
+ align-self: end;
+ }
+
+ &__status {
+ grid-area: status;
+ grid-row: 1 / span 2;
+ align-self: center;
+
+ @media screen and (max-width: $break-small) {
+ grid-row: 3;
+ }
+ }
+
+ &__nonce {
+ font-size: .75rem;
+ color: #5e6064;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ grid-area: nonce;
+ align-self: start;
+
+ @media screen and (max-width: $break-small) {
+ padding-bottom: 4px;
+ }
+ }
+
+ &__amount {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &--primary {
+ text-align: end;
+ grid-area: primary-amount;
+ align-self: end;
+
+ @media screen and (max-width: $break-small) {
+ padding-bottom: 2px;
+ }
+ }
+
+ &--secondary {
+ text-align: end;
+ font-size: .75rem;
+ color: #5e6064;
+ grid-area: secondary-amount;
+ align-self: start;
+ }
+ }
+
+ &__retry {
+ background: #d1edff;
+ border-radius: 12px;
+ font-size: .75rem;
+ padding: 4px 12px;
+ cursor: pointer;
+ margin-top: 8px;
+
+ @media screen and (max-width: $break-small) {
+ font-size: .5rem;
+ }
+ }
+}
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
new file mode 100644
index 000000000..d9e63d6e0
--- /dev/null
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -0,0 +1,148 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../identicon'
+import TransactionStatus from '../transaction-status'
+import TransactionAction from '../transaction-action'
+import CurrencyDisplay from '../currency-display'
+import TokenCurrencyDisplay from '../token-currency-display'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
+import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
+import { ETH } from '../../constants/common'
+
+export default class TransactionListItem extends PureComponent {
+ static propTypes = {
+ history: PropTypes.object,
+ transaction: PropTypes.object,
+ value: PropTypes.string,
+ methodData: PropTypes.object,
+ showRetry: PropTypes.bool,
+ retryTransaction: PropTypes.func,
+ setSelectedToken: PropTypes.func,
+ nonceAndDate: PropTypes.string,
+ token: PropTypes.object,
+ }
+
+ handleClick = () => {
+ const { transaction, history } = this.props
+ const { id, status, hash, metamaskNetworkId } = transaction
+
+ if (status === UNAPPROVED_STATUS) {
+ history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
+ } else if (hash) {
+ const prefix = prefixForNetwork(metamaskNetworkId)
+ const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+ global.platform.openWindow({ url: etherscanUrl })
+ }
+ }
+
+ handleRetryClick = event => {
+ event.stopPropagation()
+
+ const {
+ transaction: { txParams: { to } = {} },
+ methodData: { name } = {},
+ setSelectedToken,
+ } = this.props
+
+ if (name === TOKEN_METHOD_TRANSFER) {
+ setSelectedToken(to)
+ }
+
+ this.resubmit()
+ }
+
+ resubmit () {
+ const { transaction: { id }, retryTransaction, history } = this.props
+ retryTransaction(id)
+ .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
+ }
+
+ renderPrimaryCurrency () {
+ const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props
+
+ return token
+ ? (
+ <TokenCurrencyDisplay
+ className="transaction-list-item__amount transaction-list-item__amount--primary"
+ token={token}
+ transactionData={data}
+ prefix="-"
+ />
+ ) : (
+ <CurrencyDisplay
+ className="transaction-list-item__amount transaction-list-item__amount--primary"
+ value={value}
+ prefix="-"
+ />
+ )
+ }
+
+ renderSecondaryCurrency () {
+ const { token, value } = this.props
+
+ return token
+ ? null
+ : (
+ <CurrencyDisplay
+ className="transaction-list-item__amount transaction-list-item__amount--secondary"
+ prefix="-"
+ value={value}
+ numberOfDecimals={2}
+ currency={ETH}
+ />
+ )
+ }
+
+ render () {
+ const {
+ transaction,
+ methodData,
+ showRetry,
+ nonceAndDate,
+ } = this.props
+ const { txParams = {} } = transaction
+
+ return (
+ <div
+ className="transaction-list-item"
+ onClick={this.handleClick}
+ >
+ <div className="transaction-list-item__grid">
+ <Identicon
+ className="transaction-list-item__identicon"
+ address={txParams.to}
+ diameter={34}
+ />
+ <TransactionAction
+ transaction={transaction}
+ methodData={methodData}
+ className="transaction-list-item__action"
+ />
+ <div
+ className="transaction-list-item__nonce"
+ title={nonceAndDate}
+ >
+ { nonceAndDate }
+ </div>
+ <TransactionStatus
+ className="transaction-list-item__status"
+ statusKey={transaction.status}
+ />
+ { this.renderPrimaryCurrency() }
+ { this.renderSecondaryCurrency() }
+ </div>
+ {
+ showRetry && methodData.done && (
+ <div
+ className="transaction-list-item__retry"
+ onClick={this.handleRetryClick}
+ >
+ <span>Taking too long? Increase the gas price on your transaction</span>
+ </div>
+ )
+ }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
new file mode 100644
index 000000000..47644241a
--- /dev/null
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -0,0 +1,32 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import withMethodData from '../../higher-order-components/with-method-data'
+import TransactionListItem from './transaction-list-item.component'
+import { setSelectedToken, retryTransaction } from '../../actions'
+import { hexToDecimal } from '../../helpers/conversions.util'
+import { formatDate } from '../../util'
+
+const mapStateToProps = (state, ownProps) => {
+ const { transaction: { txParams: { value, nonce } = {}, time } = {} } = ownProps
+
+ const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
+
+ return {
+ value,
+ nonceAndDate,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
+ retryTransaction: transactionId => dispatch(retryTransaction(transactionId)),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps),
+ withMethodData,
+)(TransactionListItem)
diff --git a/ui/app/components/transaction-list/index.js b/ui/app/components/transaction-list/index.js
new file mode 100644
index 000000000..688994367
--- /dev/null
+++ b/ui/app/components/transaction-list/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list.container'
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
new file mode 100644
index 000000000..0e8db485c
--- /dev/null
+++ b/ui/app/components/transaction-list/index.scss
@@ -0,0 +1,46 @@
+.transaction-list {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow-y: hidden;
+
+ &__completed-transactions {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+
+ &__header {
+ flex: 0 0 auto;
+ font-size: .875rem;
+ color: $dusty-gray;
+ border-bottom: 1px solid $geyser;
+ padding: 16px 0 8px 20px;
+
+ @media screen and (max-width: $break-small) {
+ padding: 8px 0 8px 16px;
+ }
+ }
+
+ &__transactions {
+ flex: 1;
+ overflow-y: auto;
+ }
+
+ &__pending-transactions {
+ margin-bottom: 16px;
+ }
+
+ &__empty {
+ flex: 1;
+ display: grid;
+ grid-template-rows: 35% 1fr;
+ }
+
+ &__empty-text {
+ grid-row-start: 2;
+ display: flex;
+ justify-content: center;
+ color: $silver;
+ }
+}
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
new file mode 100644
index 000000000..e30476d8c
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -0,0 +1,117 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TransactionListItem from '../transaction-list-item'
+import ShapeShiftTransactionListItem from '../shift-list-item'
+import { TRANSACTION_TYPE_SHAPESHIFT } from '../../constants/transactions'
+
+export default class TransactionList extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static defaultProps = {
+ pendingTransactions: [],
+ completedTransactions: [],
+ transactionToRetry: {},
+ }
+
+ static propTypes = {
+ pendingTransactions: PropTypes.array,
+ completedTransactions: PropTypes.array,
+ transactionToRetry: PropTypes.object,
+ selectedToken: PropTypes.object,
+ updateNetworkNonce: PropTypes.func,
+ }
+
+ componentDidMount () {
+ this.props.updateNetworkNonce()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { pendingTransactions: prevPendingTransactions = [] } = prevProps
+ const { pendingTransactions = [], updateNetworkNonce } = this.props
+
+ if (pendingTransactions.length > prevPendingTransactions.length) {
+ updateNetworkNonce()
+ }
+ }
+
+ shouldShowRetry = transaction => {
+ const { transactionToRetry } = this.props
+ const { id, submittedTime } = transaction
+ return id === transactionToRetry.id && Date.now() - submittedTime > 30000
+ }
+
+ renderTransactions () {
+ const { t } = this.context
+ const { pendingTransactions = [], completedTransactions = [] } = this.props
+
+ return (
+ <div className="transaction-list__transactions">
+ {
+ pendingTransactions.length > 0 && (
+ <div className="transaction-list__pending-transactions">
+ <div className="transaction-list__header">
+ { `${t('queue')} (${pendingTransactions.length})` }
+ </div>
+ {
+ pendingTransactions.map((transaction, index) => (
+ this.renderTransaction(transaction, index)
+ ))
+ }
+ </div>
+ )
+ }
+ <div className="transaction-list__completed-transactions">
+ <div className="transaction-list__header">
+ { t('history') }
+ </div>
+ {
+ completedTransactions.length > 0
+ ? completedTransactions.map((transaction, index) => (
+ this.renderTransaction(transaction, index)
+ ))
+ : this.renderEmpty()
+ }
+ </div>
+ </div>
+ )
+ }
+
+ renderTransaction (transaction, index) {
+ const { selectedToken } = this.props
+
+ return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
+ ? (
+ <ShapeShiftTransactionListItem
+ { ...transaction }
+ key={`shapeshift${index}`}
+ />
+ ) : (
+ <TransactionListItem
+ transaction={transaction}
+ key={transaction.id}
+ showRetry={this.shouldShowRetry(transaction)}
+ token={selectedToken}
+ />
+ )
+ }
+
+ renderEmpty () {
+ return (
+ <div className="transaction-list__empty">
+ <div className="transaction-list__empty-text">
+ { this.context.t('noTransactions') }
+ </div>
+ </div>
+ )
+ }
+
+ render () {
+ return (
+ <div className="transaction-list">
+ { this.renderTransactions() }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
new file mode 100644
index 000000000..1ec1f9ccf
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.container.js
@@ -0,0 +1,50 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionList from './transaction-list.component'
+import {
+ pendingTransactionsSelector,
+ submittedPendingTransactionsSelector,
+ completedTransactionsSelector,
+} from '../../selectors/transactions'
+import { getSelectedAddress } from '../../selectors'
+import { selectedTokenSelector } from '../../selectors/tokens'
+import { getLatestSubmittedTxWithNonce } from '../../helpers/transactions.util'
+import { updateNetworkNonce } from '../../actions'
+
+const mapStateToProps = state => {
+ const pendingTransactions = pendingTransactionsSelector(state)
+ const submittedPendingTransactions = submittedPendingTransactionsSelector(state)
+ const networkNonce = state.appState.networkNonce
+
+ return {
+ completedTransactions: completedTransactionsSelector(state),
+ pendingTransactions,
+ transactionToRetry: getLatestSubmittedTxWithNonce(submittedPendingTransactions, networkNonce),
+ selectedToken: selectedTokenSelector(state),
+ selectedAddress: getSelectedAddress(state),
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ updateNetworkNonce: address => dispatch(updateNetworkNonce(address)),
+ }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ const { selectedAddress, ...restStateProps } = stateProps
+ const { updateNetworkNonce, ...restDispatchProps } = dispatchProps
+
+ return {
+ ...restStateProps,
+ ...restDispatchProps,
+ ...ownProps,
+ updateNetworkNonce: () => updateNetworkNonce(selectedAddress),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(TransactionList)
diff --git a/ui/app/components/transaction-status/index.js b/ui/app/components/transaction-status/index.js
new file mode 100644
index 000000000..dece41e9c
--- /dev/null
+++ b/ui/app/components/transaction-status/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-status.component'
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
new file mode 100644
index 000000000..35be550f7
--- /dev/null
+++ b/ui/app/components/transaction-status/index.scss
@@ -0,0 +1,28 @@
+.transaction-status {
+ height: 26px;
+ width: 81px;
+ border-radius: 4px;
+ background-color: #f0f0f0;
+ color: #5e6064;
+ font-size: .625rem;
+ text-transform: uppercase;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ @media screen and (max-width: $break-small) {
+ height: 16px;
+ width: 70px;
+ font-size: .5rem;
+ }
+
+ &--confirmed {
+ background-color: #eafad7;
+ color: #609a1c;
+ }
+
+ &--approved, &--submitted {
+ background-color: #FFF2DB;
+ color: #CA810A;
+ }
+} \ No newline at end of file
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
new file mode 100644
index 000000000..a4c827ae8
--- /dev/null
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {
+ UNAPPROVED_STATUS,
+ REJECTED_STATUS,
+ APPROVED_STATUS,
+ SIGNED_STATUS,
+ SUBMITTED_STATUS,
+ CONFIRMED_STATUS,
+ FAILED_STATUS,
+ DROPPED_STATUS,
+} from '../../constants/transactions'
+
+const statusToClassNameHash = {
+ [UNAPPROVED_STATUS]: 'transaction-status--unapproved',
+ [REJECTED_STATUS]: 'transaction-status--rejected',
+ [APPROVED_STATUS]: 'transaction-status--approved',
+ [SIGNED_STATUS]: 'transaction-status--signed',
+ [SUBMITTED_STATUS]: 'transaction-status--submitted',
+ [CONFIRMED_STATUS]: 'transaction-status--confirmed',
+ [FAILED_STATUS]: 'transaction-status--failed',
+ [DROPPED_STATUS]: 'transaction-status--dropped',
+}
+
+const statusToTextHash = {
+ [APPROVED_STATUS]: 'pending',
+ [SUBMITTED_STATUS]: 'pending',
+}
+
+export default class TransactionStatus extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ statusKey: PropTypes.string,
+ className: PropTypes.string,
+ }
+
+ render () {
+ const { className, statusKey } = this.props
+ const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
+
+ return (
+ <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
+ { statusText }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/transaction-view-balance/index.js b/ui/app/components/transaction-view-balance/index.js
new file mode 100644
index 000000000..8824737f7
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-view-balance.container'
diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
new file mode 100644
index 000000000..12045ab6d
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/index.scss
@@ -0,0 +1,76 @@
+.transaction-view-balance {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ height: 54px;
+
+ &__balance {
+ margin-left: 12px;
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (max-width: $break-small) {
+ align-items: center;
+ margin: 16px 0;
+ }
+ }
+
+ &__token-balance {
+ margin-left: 12px;
+ font-size: 1.5rem;
+
+ @media screen and (max-width: $break-small) {
+ margin-bottom: 12px;
+ font-size: 1.75rem;
+ }
+ }
+
+ &__primary-balance {
+ font-size: 1.5rem;
+
+ @media screen and (max-width: $break-small) {
+ margin-bottom: 12px;
+ font-size: 1.75rem;
+ }
+ }
+
+ &__secondary-balance {
+ font-size: 1.15rem;
+ color: #a0a0a0;
+ }
+
+ &__balance-container {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ @media screen and (max-width: $break-small) {
+ flex-direction: column;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+
+ @media screen and (max-width: $break-small) {
+ margin-bottom: 16px;
+ }
+ }
+
+ &__button {
+ min-width: initial;
+ width: 100px;
+
+ &:not(:last-child) {
+ margin-right: 12px;
+ }
+ }
+
+ @media screen and (max-width: $break-small) {
+ flex-direction: column;
+ height: initial
+ }
+}
diff --git a/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js
new file mode 100644
index 000000000..bb95cb27e
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TokenBalance from '../../token-balance'
+import CurrencyDisplay from '../../currency-display'
+import { SEND_ROUTE } from '../../../routes'
+import TransactionViewBalance from '../transaction-view-balance.component'
+
+const propsMethodSpies = {
+ showDepositModal: sinon.spy(),
+}
+
+const historySpies = {
+ push: sinon.spy(),
+}
+
+const t = (str1, str2) => str2 ? str1 + str2 : str1
+
+describe('TransactionViewBalance Component', () => {
+ afterEach(() => {
+ propsMethodSpies.showDepositModal.resetHistory()
+ historySpies.push.resetHistory()
+ })
+
+ it('should render ETH balance properly', () => {
+ const wrapper = shallow(<TransactionViewBalance
+ showDepositModal={propsMethodSpies.showDepositModal}
+ history={historySpies}
+ network="3"
+ ethBalance={123}
+ fiatBalance={456}
+ currentCurrency="usd"
+ />, { context: { t } })
+
+ assert.equal(wrapper.find('.transaction-view-balance').length, 1)
+ assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
+ assert.equal(wrapper.find(CurrencyDisplay).length, 2)
+
+ const buttons = wrapper.find('.transaction-view-balance__buttons')
+ assert.equal(propsMethodSpies.showDepositModal.callCount, 0)
+ buttons.childAt(0).simulate('click')
+ assert.equal(propsMethodSpies.showDepositModal.callCount, 1)
+ assert.equal(historySpies.push.callCount, 0)
+ buttons.childAt(1).simulate('click')
+ assert.equal(historySpies.push.callCount, 1)
+ assert.equal(historySpies.push.getCall(0).args[0], SEND_ROUTE)
+ })
+
+ it('should render token balance properly', () => {
+ const token = {
+ address: '0x35865238f0bec9d5ce6abff0fdaebe7b853dfcc5',
+ decimals: '2',
+ symbol: 'ABC',
+ }
+
+ const wrapper = shallow(<TransactionViewBalance
+ showDepositModal={propsMethodSpies.showDepositModal}
+ history={historySpies}
+ network="3"
+ ethBalance={123}
+ fiatBalance={456}
+ currentCurrency="usd"
+ selectedToken={token}
+ />, { context: { t } })
+
+ assert.equal(wrapper.find('.transaction-view-balance').length, 1)
+ assert.equal(wrapper.find('.transaction-view-balance__button').length, 1)
+ assert.equal(wrapper.find(TokenBalance).length, 1)
+ })
+})
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
new file mode 100644
index 000000000..bdc46f714
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
@@ -0,0 +1,94 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../button'
+import Identicon from '../identicon'
+import TokenBalance from '../token-balance'
+import CurrencyDisplay from '../currency-display'
+import { SEND_ROUTE } from '../../routes'
+import { ETH } from '../../constants/common'
+
+export default class TransactionViewBalance extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ showDepositModal: PropTypes.func,
+ selectedToken: PropTypes.object,
+ history: PropTypes.object,
+ network: PropTypes.string,
+ balance: PropTypes.string,
+ }
+
+ renderBalance () {
+ const { selectedToken, balance } = this.props
+
+ return selectedToken
+ ? (
+ <TokenBalance
+ token={selectedToken}
+ withSymbol
+ className="transaction-view-balance__token-balance"
+ />
+ ) : (
+ <div className="transaction-view-balance__balance">
+ <CurrencyDisplay
+ className="transaction-view-balance__primary-balance"
+ value={balance}
+ currency={ETH}
+ numberOfDecimals={3}
+ />
+ <CurrencyDisplay
+ className="transaction-view-balance__secondary-balance"
+ value={balance}
+ />
+ </div>
+ )
+ }
+
+ renderButtons () {
+ const { t } = this.context
+ const { selectedToken, showDepositModal, history } = this.props
+
+ return (
+ <div className="transaction-view-balance__buttons">
+ {
+ !selectedToken && (
+ <Button
+ type="primary"
+ className="transaction-view-balance__button"
+ onClick={() => showDepositModal()}
+ >
+ { t('deposit') }
+ </Button>
+ )
+ }
+ <Button
+ type="primary"
+ className="transaction-view-balance__button"
+ onClick={() => history.push(SEND_ROUTE)}
+ >
+ { t('send') }
+ </Button>
+ </div>
+ )
+ }
+
+ render () {
+ const { network, selectedToken } = this.props
+
+ return (
+ <div className="transaction-view-balance">
+ <div className="transaction-view-balance__balance-container">
+ <Identicon
+ diameter={50}
+ address={selectedToken && selectedToken.address}
+ network={network}
+ />
+ { this.renderBalance() }
+ </div>
+ { this.renderButtons() }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
new file mode 100644
index 000000000..1d3432b15
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
@@ -0,0 +1,30 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionViewBalance from './transaction-view-balance.component'
+import { getSelectedToken, getSelectedAddress } from '../../selectors'
+import { showModal } from '../../actions'
+
+const mapStateToProps = state => {
+ const selectedAddress = getSelectedAddress(state)
+ const { metamask: { network, accounts } } = state
+ const account = accounts[selectedAddress]
+ const { balance } = account
+
+ return {
+ selectedToken: getSelectedToken(state),
+ network,
+ balance,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ showDepositModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(TransactionViewBalance)
diff --git a/ui/app/components/transaction-view/index.js b/ui/app/components/transaction-view/index.js
new file mode 100644
index 000000000..9eb0c3c83
--- /dev/null
+++ b/ui/app/components/transaction-view/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-view.component'
diff --git a/ui/app/components/transaction-view/index.scss b/ui/app/components/transaction-view/index.scss
new file mode 100644
index 000000000..af9771ce0
--- /dev/null
+++ b/ui/app/components/transaction-view/index.scss
@@ -0,0 +1,27 @@
+.transaction-view {
+ flex: 1 1 66.5%;
+ background: $white;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+
+ &__balance-wrapper {
+ @media screen and (max-width: $break-small) {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ flex: 0 0 auto;
+ padding-top: 16px;
+ }
+
+ @media screen and (min-width: $break-large) {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ margin: 2.3em 2.37em .8em;
+ flex: 0 0 auto;
+ }
+ }
+}
diff --git a/ui/app/components/transaction-view/transaction-view.component.js b/ui/app/components/transaction-view/transaction-view.component.js
new file mode 100644
index 000000000..7014ca173
--- /dev/null
+++ b/ui/app/components/transaction-view/transaction-view.component.js
@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Media from 'react-media'
+import MenuBar from '../menu-bar'
+import TransactionViewBalance from '../transaction-view-balance'
+import TransactionList from '../transaction-list'
+
+export default class TransactionView extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ render () {
+ return (
+ <div className="transaction-view">
+ <Media
+ query="(max-width: 575px)"
+ render={() => <MenuBar />}
+ />
+ <div className="transaction-view__balance-wrapper">
+ <TransactionViewBalance />
+ </div>
+ <TransactionList />
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
deleted file mode 100644
index 474d62638..000000000
--- a/ui/app/components/tx-list-item.js
+++ /dev/null
@@ -1,356 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const { compose } = require('recompose')
-const { withRouter } = require('react-router-dom')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const inherits = require('util').inherits
-const classnames = require('classnames')
-const abi = require('human-standard-token-abi')
-const abiDecoder = require('abi-decoder')
-abiDecoder.addABI(abi)
-const Identicon = require('./identicon')
-const contractMap = require('eth-contract-metadata')
-const { checksumAddress } = require('../util')
-
-const actions = require('../actions')
-const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
-const { calcTokenAmount } = require('../token-util')
-
-const { getCurrentCurrency } = require('../selectors')
-const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
-
-TxListItem.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(TxListItem)
-
-function mapStateToProps (state) {
- return {
- tokens: state.metamask.tokens,
- currentCurrency: getCurrentCurrency(state),
- contractExchangeRates: state.metamask.contractExchangeRates,
- selectedAddressTxList: state.metamask.selectedAddressTxList,
- networkNonce: state.appState.networkNonce,
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)),
- retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
- }
-}
-
-inherits(TxListItem, Component)
-function TxListItem () {
- Component.call(this)
-
- this.state = {
- total: null,
- fiatTotal: null,
- isTokenTx: null,
- }
-
- this.unmounted = false
-}
-
-TxListItem.prototype.componentDidMount = async function () {
- const { txParams = {} } = this.props
-
- const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
- const { name: txDataName } = decodedData || {}
- const isTokenTx = txDataName === 'transfer'
-
- const { total, fiatTotal } = isTokenTx
- ? await this.getSendTokenTotal()
- : this.getSendEtherTotal()
-
- if (this.unmounted) {
- return
- }
- this.setState({ total, fiatTotal, isTokenTx })
-}
-
-TxListItem.prototype.componentWillUnmount = function () {
- this.unmounted = true
-}
-
-TxListItem.prototype.getAddressText = function () {
- const {
- address,
- txParams = {},
- isMsg,
- } = this.props
-
- const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
- const { name: txDataName, params = [] } = decodedData || {}
- const { value } = params[0] || {}
- const checksummedAddress = checksumAddress(address)
- const checksummedValue = checksumAddress(value)
-
- let addressText
- if (txDataName === 'transfer' || address) {
- const addressToRender = txDataName === 'transfer' ? checksummedValue : checksummedAddress
- addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}`
- } else if (isMsg) {
- addressText = this.context.t('sigRequest')
- } else {
- addressText = this.context.t('contractDeployment')
- }
-
- return addressText
-}
-
-TxListItem.prototype.getSendEtherTotal = function () {
- const {
- transactionAmount,
- conversionRate,
- address,
- currentCurrency,
- } = this.props
-
- if (!address) {
- return {}
- }
-
- const totalInFiat = conversionUtil(transactionAmount, {
- fromNumericBase: 'hex',
- toNumericBase: 'dec',
- fromCurrency: 'ETH',
- toCurrency: currentCurrency,
- fromDenomination: 'WEI',
- numberOfDecimals: 2,
- conversionRate,
- })
- const totalInETH = conversionUtil(transactionAmount, {
- fromNumericBase: 'hex',
- toNumericBase: 'dec',
- fromCurrency: 'ETH',
- toCurrency: 'ETH',
- fromDenomination: 'WEI',
- conversionRate,
- numberOfDecimals: 6,
- })
-
- return {
- total: `${totalInETH} ETH`,
- fiatTotal: `${totalInFiat} ${currentCurrency.toUpperCase()}`,
- }
-}
-
-TxListItem.prototype.getTokenInfo = async function () {
- const { txParams = {}, tokenInfoGetter, tokens } = this.props
- const toAddress = txParams.to
-
- let decimals
- let symbol
-
- ({ decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {})
-
- if (!decimals && !symbol) {
- ({ decimals, symbol } = contractMap[toAddress] || {})
- }
-
- if (!decimals && !symbol) {
- ({ decimals, symbol } = await tokenInfoGetter(toAddress))
- }
-
- return { decimals, symbol, address: toAddress }
-}
-
-TxListItem.prototype.getSendTokenTotal = async function () {
- const {
- txParams = {},
- conversionRate,
- contractExchangeRates,
- currentCurrency,
- } = this.props
-
- const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
- const { params = [] } = decodedData || {}
- const { value } = params[1] || {}
- const { decimals, symbol, address } = await this.getTokenInfo()
- const total = calcTokenAmount(value, decimals)
-
- let tokenToFiatRate
- let totalInFiat
-
- if (contractExchangeRates[address]) {
- tokenToFiatRate = multiplyCurrencies(
- contractExchangeRates[address],
- conversionRate
- )
-
- totalInFiat = conversionUtil(total, {
- fromNumericBase: 'dec',
- toNumericBase: 'dec',
- fromCurrency: symbol,
- toCurrency: currentCurrency,
- numberOfDecimals: 2,
- conversionRate: tokenToFiatRate,
- })
- }
-
- const showFiat = Boolean(totalInFiat) && currentCurrency.toUpperCase() !== symbol
-
- return {
- total: `${total} ${symbol}`,
- fiatTotal: showFiat && `${totalInFiat} ${currentCurrency.toUpperCase()}`,
- }
-}
-
-TxListItem.prototype.showRetryButton = function () {
- const {
- transactionSubmittedTime,
- selectedAddressTxList,
- transactionId,
- txParams,
- networkNonce,
- } = this.props
- if (!txParams) {
- return false
- }
- let currentTxSharesEarliestNonce = false
- const currentNonce = txParams.nonce
- const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
- const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
- const currentSubmittedTxs = selectedAddressTxList.filter(tx => tx.status === 'submitted')
- const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1]
- const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce &&
- lastSubmittedTxWithCurrentNonce.id === transactionId
- if (currentSubmittedTxs.length > 0) {
- currentTxSharesEarliestNonce = currentNonce === networkNonce
- }
-
- return currentTxSharesEarliestNonce && currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
-}
-
-TxListItem.prototype.setSelectedToken = function (tokenAddress) {
- this.props.setSelectedToken(tokenAddress)
-}
-
-TxListItem.prototype.resubmit = function () {
- const { transactionId } = this.props
- this.props.retryTransaction(transactionId)
- .then(id => this.props.history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
-}
-
-TxListItem.prototype.render = function () {
- const {
- transactionStatus,
- onClick,
- transactionId,
- dateString,
- address,
- className,
- txParams,
- } = this.props
- const { total, fiatTotal, isTokenTx } = this.state
-
- return h(`div${className || ''}`, {
- key: transactionId,
- onClick: () => onClick && onClick(transactionId),
- }, [
- h(`div.flex-column.tx-list-item-wrapper`, {}, [
-
- h('div.tx-list-date-wrapper', {
- style: {},
- }, [
- h('span.tx-list-date', {}, [
- dateString,
- ]),
- ]),
-
- h('div.flex-row.tx-list-content-wrapper', {
- style: {},
- }, [
-
- h('div.tx-list-identicon-wrapper', {
- style: {},
- }, [
- h(Identicon, {
- address,
- diameter: 28,
- }),
- ]),
-
- h('div.tx-list-account-and-status-wrapper', {}, [
- h('div.tx-list-account-wrapper', {
- style: {},
- }, [
- h('span.tx-list-account', {}, [
- this.getAddressText(address),
- ]),
- ]),
-
- h('div.tx-list-status-wrapper', {
- style: {},
- }, [
- h('span', {
- className: classnames('tx-list-status', {
- 'tx-list-status--rejected': transactionStatus === 'rejected',
- 'tx-list-status--failed': transactionStatus === 'failed',
- 'tx-list-status--dropped': transactionStatus === 'dropped',
- }),
- },
- this.txStatusIndicator(),
- ),
- ]),
- ]),
-
- h('div.flex-column.tx-list-details-wrapper', {
- style: {},
- }, [
-
- h('span.tx-list-value', total),
-
- fiatTotal && h('span.tx-list-fiat-value', fiatTotal),
-
- ]),
- ]),
-
- this.showRetryButton() && h('.tx-list-item-retry-container', {
- onClick: (event) => {
- event.stopPropagation()
- if (isTokenTx) {
- this.setSelectedToken(txParams.to)
- }
- this.resubmit()
- },
- }, [
- h('span', 'Taking too long? Increase the gas price on your transaction'),
- ]),
-
- ]), // holding on icon from design
- ])
-}
-
-TxListItem.prototype.txStatusIndicator = function () {
- const { transactionStatus } = this.props
-
- let name
-
- if (transactionStatus === 'unapproved') {
- name = this.context.t('unapproved')
- } else if (transactionStatus === 'rejected') {
- name = this.context.t('rejected')
- } else if (transactionStatus === 'approved') {
- name = this.context.t('approved')
- } else if (transactionStatus === 'signed') {
- name = this.context.t('signed')
- } else if (transactionStatus === 'submitted') {
- name = this.context.t('submitted')
- } else if (transactionStatus === 'confirmed') {
- name = this.context.t('confirmed')
- } else if (transactionStatus === 'failed') {
- name = this.context.t('failed')
- } else if (transactionStatus === 'dropped') {
- name = this.context.t('dropped')
- }
- return name
-}
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
deleted file mode 100644
index d8c4a9d19..000000000
--- a/ui/app/components/tx-list.js
+++ /dev/null
@@ -1,171 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
-const selectors = require('../selectors')
-const TxListItem = require('./tx-list-item')
-const ShiftListItem = require('./shift-list-item')
-const { formatDate } = require('../util')
-const { showConfTxPage, updateNetworkNonce } = require('../actions')
-const classnames = require('classnames')
-const { tokenInfoGetter } = require('../token-util')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(TxList)
-
-TxList.contextTypes = {
- t: PropTypes.func,
-}
-
-function mapStateToProps (state) {
- return {
- txsToRender: selectors.transactionsSelector(state),
- conversionRate: selectors.conversionRateSelector(state),
- selectedAddress: selectors.getSelectedAddress(state),
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- showConfTxPage: ({ id }) => dispatch(showConfTxPage({ id })),
- updateNetworkNonce: (address) => dispatch(updateNetworkNonce(address)),
- }
-}
-
-inherits(TxList, Component)
-function TxList () {
- Component.call(this)
-}
-
-TxList.prototype.componentWillMount = function () {
- this.tokenInfoGetter = tokenInfoGetter()
- this.props.updateNetworkNonce(this.props.selectedAddress)
-}
-
-TxList.prototype.componentDidUpdate = function (prevProps) {
- const oldTxsToRender = prevProps.txsToRender
- const {
- txsToRender: newTxsToRender,
- selectedAddress,
- updateNetworkNonce,
- } = this.props
-
- if (newTxsToRender.length > oldTxsToRender.length) {
- updateNetworkNonce(selectedAddress)
- }
-}
-
-TxList.prototype.render = function () {
- return h('div.flex-column', [
- h('div.flex-row.tx-list-header-wrapper', [
- h('div.flex-row.tx-list-header', [
- h('div', this.context.t('transactions')),
- ]),
- ]),
- h('div.flex-column.tx-list-container', {}, [
- this.renderTransaction(),
- ]),
- ])
-}
-
-TxList.prototype.renderTransaction = function () {
- const { txsToRender, conversionRate } = this.props
-
- return txsToRender.length
- ? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i))
- : [h(
- 'div.tx-list-item.tx-list-item--empty',
- { key: 'tx-list-none' },
- [ this.context.t('noTransactions') ],
- )]
-}
-
-// TODO: Consider moving TxListItem into a separate component
-TxList.prototype.renderTransactionListItem = function (transaction, conversionRate, index) {
- // console.log({transaction})
- // refer to transaction-list.js:line 58
-
- if (transaction.key === 'shapeshift') {
- return h(ShiftListItem, { ...transaction, key: `shapeshift${index}` })
- }
-
- const props = {
- dateString: formatDate(transaction.time),
- address: transaction.txParams && transaction.txParams.to,
- transactionStatus: transaction.status,
- transactionAmount: transaction.txParams && transaction.txParams.value,
- transactionId: transaction.id,
- transactionHash: transaction.hash,
- transactionNetworkId: transaction.metamaskNetworkId,
- transactionSubmittedTime: transaction.submittedTime,
- }
-
- const {
- address,
- transactionStatus,
- transactionAmount,
- dateString,
- transactionId,
- transactionHash,
- transactionNetworkId,
- transactionSubmittedTime,
- } = props
- const { history } = this.props
-
- const opts = {
- key: transactionId || transactionHash,
- txParams: transaction.txParams,
- isMsg: Boolean(transaction.msgParams),
- transactionStatus,
- transactionId,
- dateString,
- address,
- transactionAmount,
- transactionHash,
- conversionRate,
- tokenInfoGetter: this.tokenInfoGetter,
- transactionSubmittedTime,
- }
-
- const isUnapproved = transactionStatus === 'unapproved'
-
- if (isUnapproved) {
- opts.onClick = () => {
- this.props.showConfTxPage({ id: transactionId })
- history.push(CONFIRM_TRANSACTION_ROUTE)
- }
- opts.transactionStatus = this.context.t('notStarted')
- } else if (transactionHash) {
- opts.onClick = () => this.view(transactionHash, transactionNetworkId)
- }
-
- opts.className = classnames('.tx-list-item', {
- '.tx-list-pending-item-container': isUnapproved,
- '.tx-list-clickable': Boolean(transactionHash) || isUnapproved,
- })
-
- return h(TxListItem, opts)
-}
-
-TxList.prototype.view = function (txHash, network) {
- const url = etherscanLinkFor(txHash, network)
- if (url) {
- navigateTo(url)
- }
-}
-
-function navigateTo (url) {
- global.platform.openWindow({ url })
-}
-
-function etherscanLinkFor (txHash, network) {
- const prefix = prefixForNetwork(network)
- return `https://${prefix}etherscan.io/tx/${txHash}`
-}
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
deleted file mode 100644
index 654090da6..000000000
--- a/ui/app/components/tx-view.js
+++ /dev/null
@@ -1,156 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const actions = require('../actions')
-const selectors = require('../selectors')
-const { SEND_ROUTE } = require('../routes')
-const { checksumAddress: toChecksumAddress } = require('../util')
-
-const BalanceComponent = require('./balance-component')
-const Tooltip = require('./tooltip')
-const TxList = require('./tx-list')
-const SelectedAccount = require('./selected-account')
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(TxView)
-
-TxView.contextTypes = {
- t: PropTypes.func,
-}
-
-function mapStateToProps (state) {
- const sidebarOpen = state.appState.sidebarOpen
- const isMascara = state.appState.isMascara
-
- const identities = state.metamask.identities
- const accounts = state.metamask.accounts
- const network = state.metamask.network
- const selectedTokenAddress = state.metamask.selectedTokenAddress
- const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
- const checksumAddress = toChecksumAddress(selectedAddress)
- const identity = identities[selectedAddress]
-
- return {
- sidebarOpen,
- selectedAddress,
- checksumAddress,
- selectedTokenAddress,
- selectedToken: selectors.getSelectedToken(state),
- identity,
- network,
- isMascara,
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- showSidebar: () => { dispatch(actions.showSidebar()) },
- hideSidebar: () => { dispatch(actions.hideSidebar()) },
- showModal: (payload) => { dispatch(actions.showModal(payload)) },
- showSendPage: () => { dispatch(actions.showSendPage()) },
- showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) },
- }
-}
-
-inherits(TxView, Component)
-function TxView () {
- Component.call(this)
-}
-
-TxView.prototype.renderHeroBalance = function () {
- const { selectedToken } = this.props
-
- return h('div.hero-balance', {}, [
-
- h(BalanceComponent, { token: selectedToken }),
-
- this.renderButtons(),
- ])
-}
-
-TxView.prototype.renderButtons = function () {
- const {selectedToken, showModal, history } = this.props
-
- return !selectedToken
- ? (
- h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-primary.hero-balance-button', {
- onClick: () => showModal({
- name: 'DEPOSIT_ETHER',
- }),
- }, this.context.t('deposit')),
-
- h('button.btn-primary.hero-balance-button', {
- style: {
- marginLeft: '0.8em',
- },
- onClick: () => history.push(SEND_ROUTE),
- }, this.context.t('send')),
- ])
- )
- : (
- h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-primary.hero-balance-button', {
- onClick: () => history.push(SEND_ROUTE),
- }, this.context.t('send')),
- ])
- )
-}
-
-TxView.prototype.render = function () {
- const { hideSidebar, isMascara, showSidebar, sidebarOpen } = this.props
- const { t } = this.context
-
- return h('div.tx-view.flex-column', {
- style: {},
- }, [
-
- h('div.flex-row.phone-visible', {
- style: {
- justifyContent: 'center',
- alignItems: 'center',
- flex: '0 0 auto',
- marginBottom: '16px',
- padding: '5px',
- borderBottom: '1px solid #e5e5e5',
- },
- }, [
-
- h(Tooltip, {
- title: t('menu'),
- position: 'bottom',
- }, [
- h('div.fa.fa-bars', {
- style: {
- fontSize: '1.3em',
- cursor: 'pointer',
- padding: '10px',
- },
- onClick: () => sidebarOpen ? hideSidebar() : showSidebar(),
- }),
- ]),
-
- h(SelectedAccount),
-
- !isMascara && h(Tooltip, {
- title: t('openInTab'),
- position: 'bottom',
- }, [
- h('div.open-in-browser', {
- onClick: () => global.platform.openExtensionInBrowser(),
- }, [h('img', { src: 'images/popout.svg' })]),
- ]),
- ]),
-
- this.renderHeroBalance(),
-
- h(TxList),
-
- ])
-}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 8e092364c..ffa60e3ed 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -26,6 +26,10 @@ WalletView.contextTypes = {
t: PropTypes.func,
}
+WalletView.defaultProps = {
+ responsiveDisplayClassname: '',
+}
+
function mapStateToProps (state) {
return {
@@ -131,8 +135,9 @@ WalletView.prototype.render = function () {
}
}
- return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
+ return h('div.wallet-view.flex-column', {
style: {},
+ className: responsiveDisplayClassname,
}, [
// TODO: Separate component: wallet account details
diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js
new file mode 100644
index 000000000..28731ce33
--- /dev/null
+++ b/ui/app/constants/common.js
@@ -0,0 +1 @@
+export const ETH = 'ETH'
diff --git a/ui/app/constants/transactions.js b/ui/app/constants/transactions.js
new file mode 100644
index 000000000..df6c4c8a4
--- /dev/null
+++ b/ui/app/constants/transactions.js
@@ -0,0 +1,22 @@
+export const UNAPPROVED_STATUS = 'unapproved'
+export const REJECTED_STATUS = 'rejected'
+export const APPROVED_STATUS = 'approved'
+export const SIGNED_STATUS = 'signed'
+export const SUBMITTED_STATUS = 'submitted'
+export const CONFIRMED_STATUS = 'confirmed'
+export const FAILED_STATUS = 'failed'
+export const DROPPED_STATUS = 'dropped'
+
+export const TOKEN_METHOD_TRANSFER = 'transfer'
+export const TOKEN_METHOD_APPROVE = 'approve'
+export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom'
+
+export const SEND_ETHER_ACTION_KEY = 'sentEther'
+export const DEPLOY_CONTRACT_ACTION_KEY = 'contractDeployment'
+export const APPROVE_ACTION_KEY = 'approve'
+export const SEND_TOKEN_ACTION_KEY = 'sentTokens'
+export const TRANSFER_FROM_ACTION_KEY = 'transferFrom'
+export const SIGNATURE_REQUEST_KEY = 'signatureRequest'
+export const UNKNOWN_FUNCTION_KEY = 'unknownFunction'
+
+export const TRANSACTION_TYPE_SHAPESHIFT = 'shapeshift'
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
deleted file mode 100644
index eba93ecb4..000000000
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-.hero-balance {
-
- @media screen and (max-width: $break-small) {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- flex: 0 0 auto;
- padding-top: 16px;
- }
-
- @media screen and (min-width: $break-large) {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
- margin: 2.3em 2.37em .8em;
- flex: 0 0 auto;
- }
-
- .balance-container {
- display: flex;
- margin: 0;
- justify-content: flex-start;
- align-items: center;
-
- @media screen and (max-width: $break-small) {
- flex-direction: column;
- flex: 0 0 auto;
- max-width: 100%;
- }
-
- @media screen and (min-width: $break-large) {
- flex-direction: row;
- flex-grow: 3;
- min-width: 0;
- }
- }
-
- .balance-display {
- .token-amount {
- color: $black;
- max-width: 100%;
-
- .token-balance {
- display: flex;
- }
- }
-
- @media screen and (max-width: $break-small) {
- max-width: 100%;
- text-align: center;
-
- .token-amount {
- font-size: 1.75rem;
- margin-top: 1rem;
-
- .token-balance {
- flex-direction: column;
- }
- }
-
- .fiat-amount {
- font-size: 115%;
- margin-top: 8.5%;
- color: #a0a0a0;
- }
- }
-
- @media screen and (min-width: $break-large) {
- margin: 0 .8em;
- justify-content: flex-start;
- align-items: flex-start;
- min-width: 0;
-
- .token-amount {
- font-size: 1.5rem;
- }
-
- .fiat-amount {
- margin-top: .25%;
- font-size: 105%;
- }
- }
-
- @media #{$sub-mid-size-breakpoint-range} {
- margin-left: .4em;
- margin-right: .4em;
- justify-content: flex-start;
- align-items: flex-start;
-
- .token-amount {
- font-size: 1rem;
- }
-
- .fiat-amount {
- margin-top: .25%;
- font-size: 1rem;
- }
- }
- }
-
- .hero-balance-buttons {
-
- @media screen and (max-width: $break-small) {
- width: 100%;
- // height: 100px; // needed a round number to set the heights of the buttons inside
- flex: 0 0 auto;
- padding: 16px 0;
- }
-
- @media screen and (min-width: $break-large) {
- flex-grow: 2;
- justify-content: flex-end;
- }
- }
-}
-
-.hero-balance-button {
- min-width: initial;
- width: 6rem;
-
- @media #{$sub-mid-size-breakpoint-range} {
- padding: .4rem;
- width: 4rem;
- display: flex;
- flex: 1;
- justify-content: center;
- }
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 821a6b612..9e2008b54 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -19,8 +19,6 @@
@import './loading-overlay.scss';
// Balances
-@import './hero-balance.scss';
-
@import './wallet-balance.scss';
// Tx List and Sections
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index bbfd85c90..29dd18ae3 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -6,7 +6,6 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
*/
// Component Colors
-$tx-view-bg: $white;
$wallet-view-bg: $alabaster;
// Main container
@@ -30,32 +29,6 @@ $wallet-view-bg: $alabaster;
min-width: 0;
}
-// tx view
-
-.tx-view {
- flex: 1 1 66.5%;
- background: $tx-view-bg;
- min-width: 0;
-
- // No title on mobile
- @media screen and (max-width: 575px) {
- .identicon-wrapper {
- display: none;
- }
-
- .account-name {
- display: none;
- }
- }
-}
-
-.open-in-browser {
- cursor: pointer;
- display: flex;
- justify-content: center;
- padding: 10px;
-}
-
// wallet view and sidebar
.wallet-view {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 1d45ff13b..3435353d9 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -243,7 +243,7 @@
}
.tx-list-item {
- border-top: 1px solid rgb(231, 231, 231);
+ border-bottom: 1px solid $geyser;
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js
index 1885e12d1..30c32f2bf 100644
--- a/ui/app/ducks/confirm-transaction.duck.js
+++ b/ui/app/ducks/confirm-transaction.duck.js
@@ -5,9 +5,7 @@ import {
} from '../selectors/confirm-transaction'
import {
- getTokenData,
- getMethodData,
- getTransactionAmount,
+ getValueFromWeiHex,
getTransactionFee,
getHexGasTotal,
addFiat,
@@ -16,6 +14,7 @@ import {
hexGreaterThan,
} from '../helpers/confirm-transaction/util'
+import { getTokenData, getMethodData, isSmartContractAddress } from '../helpers/transactions.util'
import { getSymbolAndDecimals } from '../token-util'
import { conversionUtil } from '../conversion-util'
@@ -35,8 +34,9 @@ const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS')
const UPDATE_HEX_GAS_TOTAL = createActionType('UPDATE_HEX_GAS_TOTAL')
const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS')
const UPDATE_NONCE = createActionType('UPDATE_NONCE')
-const FETCH_METHOD_DATA_START = createActionType('FETCH_METHOD_DATA_START')
-const FETCH_METHOD_DATA_END = createActionType('FETCH_METHOD_DATA_END')
+const UPDATE_TO_SMART_CONTRACT = createActionType('UPDATE_TO_SMART_CONTRACT')
+const FETCH_DATA_START = createActionType('FETCH_DATA_START')
+const FETCH_DATA_END = createActionType('FETCH_DATA_END')
// Initial state
const initState = {
@@ -55,7 +55,8 @@ const initState = {
ethTransactionTotal: '',
hexGasTotal: '',
nonce: '',
- fetchingMethodData: false,
+ toSmartContract: false,
+ fetchingData: false,
}
// Reducer
@@ -138,15 +139,20 @@ export default function reducer ({ confirmTransaction: confirmState = initState
...confirmState,
nonce: action.payload,
}
- case FETCH_METHOD_DATA_START:
+ case UPDATE_TO_SMART_CONTRACT:
return {
...confirmState,
- fetchingMethodData: true,
+ toSmartContract: action.payload,
}
- case FETCH_METHOD_DATA_END:
+ case FETCH_DATA_START:
return {
...confirmState,
- fetchingMethodData: false,
+ fetchingData: true,
+ }
+ case FETCH_DATA_END:
+ return {
+ ...confirmState,
+ fetchingData: false,
}
case CLEAR_CONFIRM_TRANSACTION:
return initState
@@ -237,9 +243,16 @@ export function updateNonce (nonce) {
}
}
-export function setFetchingMethodData (isFetching) {
+export function updateToSmartContract (toSmartContract) {
+ return {
+ type: UPDATE_TO_SMART_CONTRACT,
+ payload: toSmartContract,
+ }
+}
+
+export function setFetchingData (isFetching) {
return {
- type: isFetching ? FETCH_METHOD_DATA_START : FETCH_METHOD_DATA_END,
+ type: isFetching ? FETCH_DATA_START : FETCH_DATA_END,
}
}
@@ -286,10 +299,10 @@ export function updateTxDataAndCalculate (txData) {
const { txParams: { value, gas: gasLimit = '0x0', gasPrice = '0x0' } = {} } = txData
- const fiatTransactionAmount = getTransactionAmount({
+ const fiatTransactionAmount = getValueFromWeiHex({
value, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
})
- const ethTransactionAmount = getTransactionAmount({
+ const ethTransactionAmount = getValueFromWeiHex({
value, toCurrency: 'ETH', conversionRate, numberOfDecimals: 6,
})
@@ -338,19 +351,22 @@ export function setTransactionToConfirm (transactionId) {
dispatch(updateTxDataAndCalculate(txData))
const { txParams } = transaction
+ const { to } = txParams
if (txParams.data) {
const { tokens: existingTokens } = state
const { data, to: tokenAddress } = txParams
try {
- dispatch(setFetchingMethodData(true))
+ dispatch(setFetchingData(true))
const methodData = await getMethodData(data)
dispatch(updateMethodData(methodData))
- dispatch(setFetchingMethodData(false))
+ const toSmartContract = await isSmartContractAddress(to)
+ dispatch(updateToSmartContract(toSmartContract))
+ dispatch(setFetchingData(false))
} catch (error) {
dispatch(updateMethodData({}))
- dispatch(setFetchingMethodData(false))
+ dispatch(setFetchingData(false))
}
const tokenData = getTokenData(data)
diff --git a/ui/app/ducks/tests/confirm-transaction.duck.test.js b/ui/app/ducks/tests/confirm-transaction.duck.test.js
index 111674e33..1bab0add0 100644
--- a/ui/app/ducks/tests/confirm-transaction.duck.test.js
+++ b/ui/app/ducks/tests/confirm-transaction.duck.test.js
@@ -1,6 +1,7 @@
import assert from 'assert'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
+import sinon from 'sinon'
import ConfirmTransactionReducer, * as actions from '../confirm-transaction.duck.js'
@@ -20,7 +21,8 @@ const initialState = {
ethTransactionTotal: '',
hexGasTotal: '',
nonce: '',
- fetchingMethodData: false,
+ toSmartContract: false,
+ fetchingData: false,
}
const UPDATE_TX_DATA = 'metamask/confirm-transaction/UPDATE_TX_DATA'
@@ -35,8 +37,9 @@ const UPDATE_TRANSACTION_TOTALS = 'metamask/confirm-transaction/UPDATE_TRANSACTI
const UPDATE_HEX_GAS_TOTAL = 'metamask/confirm-transaction/UPDATE_HEX_GAS_TOTAL'
const UPDATE_TOKEN_PROPS = 'metamask/confirm-transaction/UPDATE_TOKEN_PROPS'
const UPDATE_NONCE = 'metamask/confirm-transaction/UPDATE_NONCE'
-const FETCH_METHOD_DATA_START = 'metamask/confirm-transaction/FETCH_METHOD_DATA_START'
-const FETCH_METHOD_DATA_END = 'metamask/confirm-transaction/FETCH_METHOD_DATA_END'
+const UPDATE_TO_SMART_CONTRACT = 'metamask/confirm-transaction/UPDATE_TO_SMART_CONTRACT'
+const FETCH_DATA_START = 'metamask/confirm-transaction/FETCH_DATA_START'
+const FETCH_DATA_END = 'metamask/confirm-transaction/FETCH_DATA_END'
const CLEAR_CONFIRM_TRANSACTION = 'metamask/confirm-transaction/CLEAR_CONFIRM_TRANSACTION'
describe('Confirm Transaction Duck', () => {
@@ -64,7 +67,8 @@ describe('Confirm Transaction Duck', () => {
ethTransactionTotal: '469.27',
hexGasTotal: '0x1319718a5000',
nonce: '0x0',
- fetchingMethodData: false,
+ toSmartContract: false,
+ fetchingData: false,
},
}
@@ -271,30 +275,43 @@ describe('Confirm Transaction Duck', () => {
)
})
- it('should set fetchingMethodData to true when receiving a FETCH_METHOD_DATA_START action', () => {
+ it('should update nonce when receiving an UPDATE_TO_SMART_CONTRACT action', () => {
assert.deepEqual(
ConfirmTransactionReducer(mockState, {
- type: FETCH_METHOD_DATA_START,
+ type: UPDATE_TO_SMART_CONTRACT,
+ payload: true,
}),
{
...mockState.confirmTransaction,
- fetchingMethodData: true,
+ toSmartContract: true,
}
)
})
- it('should set fetchingMethodData to false when receiving a FETCH_METHOD_DATA_END action', () => {
+ it('should set fetchingData to true when receiving a FETCH_DATA_START action', () => {
assert.deepEqual(
- ConfirmTransactionReducer({ confirmTransaction: { fetchingMethodData: true } }, {
- type: FETCH_METHOD_DATA_END,
+ ConfirmTransactionReducer(mockState, {
+ type: FETCH_DATA_START,
}),
{
- fetchingMethodData: false,
+ ...mockState.confirmTransaction,
+ fetchingData: true,
}
)
})
- it('should clear confirmTransaction when receiving a FETCH_METHOD_DATA_END action', () => {
+ it('should set fetchingData to false when receiving a FETCH_DATA_END action', () => {
+ assert.deepEqual(
+ ConfirmTransactionReducer({ confirmTransaction: { fetchingData: true } }, {
+ type: FETCH_DATA_END,
+ }),
+ {
+ fetchingData: false,
+ }
+ )
+ })
+
+ it('should clear confirmTransaction when receiving a FETCH_DATA_END action', () => {
assert.deepEqual(
ConfirmTransactionReducer(mockState, {
type: CLEAR_CONFIRM_TRANSACTION,
@@ -460,24 +477,24 @@ describe('Confirm Transaction Duck', () => {
)
})
- it('should create an action to set fetchingMethodData to true', () => {
+ it('should create an action to set fetchingData to true', () => {
const expectedAction = {
- type: FETCH_METHOD_DATA_START,
+ type: FETCH_DATA_START,
}
assert.deepEqual(
- actions.setFetchingMethodData(true),
+ actions.setFetchingData(true),
expectedAction
)
})
- it('should create an action to set fetchingMethodData to false', () => {
+ it('should create an action to set fetchingData to false', () => {
const expectedAction = {
- type: FETCH_METHOD_DATA_END,
+ type: FETCH_DATA_END,
}
assert.deepEqual(
- actions.setFetchingMethodData(false),
+ actions.setFetchingData(false),
expectedAction
)
})
@@ -495,6 +512,18 @@ describe('Confirm Transaction Duck', () => {
})
describe('Thunk actions', done => {
+ beforeEach(() => {
+ global.eth = {
+ getCode: sinon.stub().callsFake(
+ address => Promise.resolve(address && address.match(/isContract/) ? 'not-0x' : '0x')
+ ),
+ }
+ })
+
+ afterEach(() => {
+ global.eth.getCode.resetHistory()
+ })
+
it('updates txData and gas on an existing transaction in confirmTransaction', () => {
const mockState = {
metamask: {
@@ -505,7 +534,7 @@ describe('Confirm Transaction Duck', () => {
ethTransactionAmount: '1',
ethTransactionFee: '0.000021',
ethTransactionTotal: '1.000021',
- fetchingMethodData: false,
+ fetchingData: false,
fiatTransactionAmount: '469.26',
fiatTransactionFee: '0.01',
fiatTransactionTotal: '469.27',
@@ -581,7 +610,7 @@ describe('Confirm Transaction Duck', () => {
ethTransactionAmount: '1',
ethTransactionFee: '0.000021',
ethTransactionTotal: '1.000021',
- fetchingMethodData: false,
+ fetchingData: false,
fiatTransactionAmount: '469.26',
fiatTransactionFee: '0.01',
fiatTransactionTotal: '469.27',
@@ -667,6 +696,7 @@ describe('Confirm Transaction Duck', () => {
.then(() => {
const storeActions = store.getActions()
assert.equal(storeActions.length, expectedActions.length)
+
storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
done()
})
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index 76e80a8ac..d1a4994e4 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -1,15 +1,8 @@
import currencyFormatter from 'currency-formatter'
import currencies from 'currency-formatter/currencies'
-import abi from 'human-standard-token-abi'
-import abiDecoder from 'abi-decoder'
import ethUtil from 'ethereumjs-util'
import BigNumber from 'bignumber.js'
-abiDecoder.addABI(abi)
-
-import MethodRegistry from 'eth-method-registry'
-const registry = new MethodRegistry({ provider: global.ethereumProvider })
-
import {
conversionUtil,
addCurrencies,
@@ -19,22 +12,6 @@ import {
import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-export function getTokenData (data = {}) {
- return abiDecoder.decodeMethod(data)
-}
-
-export async function getMethodData (data = {}) {
- const prefixedData = ethUtil.addHexPrefix(data)
- const fourBytePrefix = prefixedData.slice(0, 10)
- const sig = await registry.lookup(fourBytePrefix)
- const parsedResult = registry.parse(sig)
-
- return {
- name: parsedResult.name,
- params: parsedResult.args,
- }
-}
-
export function increaseLastGasPrice (lastGasPrice) {
return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
multiplicandBase: 16,
@@ -76,7 +53,7 @@ export function addFiat (...args) {
})
}
-export function getTransactionAmount ({
+export function getValueFromWeiHex ({
value,
toCurrency,
conversionRate,
diff --git a/ui/app/helpers/confirm-transaction/util.test.js b/ui/app/helpers/confirm-transaction/util.test.js
index a9c8fae34..4c1a3e16b 100644
--- a/ui/app/helpers/confirm-transaction/util.test.js
+++ b/ui/app/helpers/confirm-transaction/util.test.js
@@ -92,9 +92,9 @@ describe('Confirm Transaction utils', () => {
})
})
- describe('getTransactionAmount', () => {
+ describe('getValueFromWeiHex', () => {
it('should get the transaction amount in ETH', () => {
- const ethTransactionAmount = utils.getTransactionAmount({
+ const ethTransactionAmount = utils.getValueFromWeiHex({
value: '0xde0b6b3a7640000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
})
@@ -102,7 +102,7 @@ describe('Confirm Transaction utils', () => {
})
it('should get the transaction amount in fiat', () => {
- const fiatTransactionAmount = utils.getTransactionAmount({
+ const fiatTransactionAmount = utils.getValueFromWeiHex({
value: '0xde0b6b3a7640000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
})
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
new file mode 100644
index 000000000..1dec216fa
--- /dev/null
+++ b/ui/app/helpers/conversions.util.js
@@ -0,0 +1,37 @@
+import { conversionUtil } from '../conversion-util'
+
+export function hexToDecimal (hexValue) {
+ return conversionUtil(hexValue, {
+ fromNumericBase: 'hex',
+ toNumericBase: 'dec',
+ })
+}
+
+export function getEthFromWeiHex ({
+ value,
+ conversionRate,
+}) {
+ return getValueFromWeiHex({
+ value,
+ conversionRate,
+ toCurrency: 'ETH',
+ numberOfDecimals: 6,
+ })
+}
+
+export function getValueFromWeiHex ({
+ value,
+ toCurrency,
+ conversionRate,
+ numberOfDecimals,
+}) {
+ return conversionUtil(value, {
+ fromNumericBase: 'hex',
+ toNumericBase: 'dec',
+ fromCurrency: 'ETH',
+ toCurrency,
+ numberOfDecimals,
+ fromDenomination: 'WEI',
+ conversionRate,
+ })
+}
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
new file mode 100644
index 000000000..54df54aa8
--- /dev/null
+++ b/ui/app/helpers/transactions.util.js
@@ -0,0 +1,105 @@
+import ethUtil from 'ethereumjs-util'
+import MethodRegistry from 'eth-method-registry'
+import abi from 'human-standard-token-abi'
+import abiDecoder from 'abi-decoder'
+
+import {
+ TOKEN_METHOD_TRANSFER,
+ TOKEN_METHOD_APPROVE,
+ TOKEN_METHOD_TRANSFER_FROM,
+ SEND_ETHER_ACTION_KEY,
+ DEPLOY_CONTRACT_ACTION_KEY,
+ APPROVE_ACTION_KEY,
+ SEND_TOKEN_ACTION_KEY,
+ TRANSFER_FROM_ACTION_KEY,
+ SIGNATURE_REQUEST_KEY,
+ UNKNOWN_FUNCTION_KEY,
+} from '../constants/transactions'
+
+abiDecoder.addABI(abi)
+
+export function getTokenData (data = {}) {
+ return abiDecoder.decodeMethod(data)
+}
+
+const registry = new MethodRegistry({ provider: global.ethereumProvider })
+
+export async function getMethodData (data = {}) {
+ const prefixedData = ethUtil.addHexPrefix(data)
+ const fourBytePrefix = prefixedData.slice(0, 10)
+ const sig = await registry.lookup(fourBytePrefix)
+ const parsedResult = registry.parse(sig)
+
+ return {
+ name: parsedResult.name,
+ params: parsedResult.args,
+ }
+}
+
+export function isConfirmDeployContract (txData = {}) {
+ const { txParams = {} } = txData
+ return !txParams.to
+}
+
+export async function getTransactionActionKey (transaction, methodData) {
+ const { txParams: { data, to } = {}, msgParams } = transaction
+
+ if (msgParams) {
+ return SIGNATURE_REQUEST_KEY
+ }
+
+ if (isConfirmDeployContract(transaction)) {
+ return DEPLOY_CONTRACT_ACTION_KEY
+ }
+
+ if (data) {
+ const toSmartContract = await isSmartContractAddress(to)
+
+ if (!toSmartContract) {
+ return SEND_ETHER_ACTION_KEY
+ }
+
+ const { name } = methodData
+ const methodName = name && name.toLowerCase()
+
+ if (!methodName) {
+ return UNKNOWN_FUNCTION_KEY
+ }
+
+ switch (methodName) {
+ case TOKEN_METHOD_TRANSFER:
+ return SEND_TOKEN_ACTION_KEY
+ case TOKEN_METHOD_APPROVE:
+ return APPROVE_ACTION_KEY
+ case TOKEN_METHOD_TRANSFER_FROM:
+ return TRANSFER_FROM_ACTION_KEY
+ default:
+ return name
+ }
+ } else {
+ return SEND_ETHER_ACTION_KEY
+ }
+}
+
+export function getLatestSubmittedTxWithNonce (transactions = [], nonce = '0x0') {
+ if (!transactions.length) {
+ return {}
+ }
+
+ return transactions.reduce((acc, current) => {
+ const { submittedTime, txParams: { nonce: currentNonce } = {} } = current
+
+ if (currentNonce === nonce) {
+ return acc.submittedTime
+ ? submittedTime > acc.submittedTime ? current : acc
+ : current
+ } else {
+ return acc
+ }
+ }, {})
+}
+
+export async function isSmartContractAddress (address) {
+ const code = await global.eth.getCode(address)
+ return code && code !== '0x'
+}
diff --git a/ui/app/higher-order-components/with-method-data/index.js b/ui/app/higher-order-components/with-method-data/index.js
new file mode 100644
index 000000000..f511e1ae7
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/index.js
@@ -0,0 +1 @@
+export { default } from './with-method-data.component'
diff --git a/ui/app/higher-order-components/with-method-data/with-method-data.component.js b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
new file mode 100644
index 000000000..fed7d9865
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getMethodData } from '../../helpers/transactions.util'
+
+export default function withMethodData (WrappedComponent) {
+ return class MethodDataWrappedComponent extends PureComponent {
+ static propTypes = {
+ transaction: PropTypes.object,
+ }
+
+ static defaultProps = {
+ transaction: {},
+ }
+
+ state = {
+ methodData: {},
+ done: false,
+ error: null,
+ }
+
+ componentDidMount () {
+ this.fetchMethodData()
+ }
+
+ async fetchMethodData () {
+ const { transaction } = this.props
+ const { txParams: { data = '' } = {} } = transaction
+
+ if (data) {
+ try {
+ const methodData = await getMethodData(data)
+ this.setState({ methodData, done: true })
+ } catch (error) {
+ this.setState({ done: true, error })
+ }
+ } else {
+ this.setState({ done: true })
+ }
+ }
+
+ render () {
+ const { methodData, done, error } = this.state
+
+ return (
+ <WrappedComponent
+ { ...this.props }
+ methodData={{ data: methodData, done, error }}
+ />
+ )
+ }
+ }
+}
diff --git a/ui/app/higher-order-components/with-token-tracker/index.js b/ui/app/higher-order-components/with-token-tracker/index.js
new file mode 100644
index 000000000..d401e81f1
--- /dev/null
+++ b/ui/app/higher-order-components/with-token-tracker/index.js
@@ -0,0 +1 @@
+export { default } from './with-token-tracker.component'
diff --git a/ui/app/helpers/with-token-tracker.js b/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
index 8608b15f4..36f6a6efd 100644
--- a/ui/app/helpers/with-token-tracker.js
+++ b/ui/app/higher-order-components/with-token-tracker/with-token-tracker.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import TokenTracker from 'eth-token-tracker'
-const withTokenTracker = WrappedComponent => {
+export default function withTokenTracker (WrappedComponent) {
return class TokenTrackerWrappedComponent extends Component {
static propTypes = {
userAddress: PropTypes.string.isRequired,
@@ -104,5 +104,3 @@ const withTokenTracker = WrappedComponent => {
}
}
}
-
-module.exports = withTokenTracker
diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js
index d46911f7c..3419474c4 100644
--- a/ui/app/i18n-provider.js
+++ b/ui/app/i18n-provider.js
@@ -6,6 +6,11 @@ const { compose } = require('recompose')
const t = require('../i18n-helper').getMessage
class I18nProvider extends Component {
+ tOrDefault = (key, defaultValue, ...args) => {
+ const { localeMessages: { current, en } = {} } = this.props
+ return t(current, key, ...args) || t(en, key, ...args) || defaultValue
+ }
+
getChildContext () {
const { localeMessages } = this.props
const { current, en } = localeMessages
@@ -13,6 +18,10 @@ class I18nProvider extends Component {
t (key, ...args) {
return t(current, key, ...args) || t(en, key, ...args) || `[${key}]`
},
+ tOrDefault: this.tOrDefault,
+ tOrKey (key, ...args) {
+ return this.tOrDefault(key, key, ...args)
+ },
}
}
@@ -28,6 +37,8 @@ I18nProvider.propTypes = {
I18nProvider.childContextTypes = {
t: PropTypes.func,
+ tOrDefault: PropTypes.func,
+ tOrKey: PropTypes.func,
}
const mapStateToProps = state => {
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
deleted file mode 100644
index 8a0708025..000000000
--- a/ui/app/main-container.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountAndTransactionDetails = require('./account-and-transaction-details')
-const Settings = require('./components/pages/settings')
-const log = require('loglevel')
-
-import UnlockScreen from './components/pages/unlock-page'
-
-module.exports = MainContainer
-
-inherits(MainContainer, Component)
-function MainContainer () {
- Component.call(this)
-}
-
-MainContainer.prototype.render = function () {
- // 3. summarize:
- // switch statement goes inside MainContainer,
- // or a method in renderPrimary
- // - pass resulting h() to MainContainer
- // - error checking in separate func
- // - router in separate func
- const contents = {
- component: AccountAndTransactionDetails,
- key: 'account-detail',
- style: {},
- }
-
- if (this.props.isUnlocked === false) {
- switch (this.props.currentViewName) {
- case 'config':
- log.debug('rendering config screen from unlock screen.')
- return h(Settings, {key: 'config'})
- default:
- log.debug('rendering locked screen')
- return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
- }
- }
-
- return h('div.main-container', {
- style: contents.style,
- }, [
- h(contents.component, {
- key: contents.key,
- }, []),
- ])
-}
-
diff --git a/ui/app/new-keychain.js b/ui/app/new-keychain.js
deleted file mode 100644
index cc9633166..000000000
--- a/ui/app/new-keychain.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-
-module.exports = connect(mapStateToProps)(NewKeychain)
-
-function mapStateToProps (state) {
- return {}
-}
-
-inherits(NewKeychain, Component)
-function NewKeychain () {
- Component.call(this)
-}
-
-NewKeychain.prototype.render = function () {
- // const props = this.props
-
- return (
- h('div', {
- style: {
- background: 'blue',
- },
- }, [
- h('h1', `Here's a list!!!!`),
- ])
- )
-}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index d86462275..1d5f4d4cb 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -1,6 +1,9 @@
-const valuesFor = require('./util').valuesFor
const abi = require('human-standard-token-abi')
+import {
+ transactionsSelector,
+} from './selectors/transactions'
+
const {
multiplyCurrencies,
} = require('./conversion-util')
@@ -101,22 +104,6 @@ function getCurrentAccountWithSendEtherInfo (state) {
return accounts.find(({ address }) => address === currentAddress)
}
-function transactionsSelector (state) {
- const { network, selectedTokenAddress } = state.metamask
- const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
- const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
- const transactions = state.metamask.selectedAddressTxList || []
- const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
-
- // console.log({txsToRender, selectedTokenAddress})
- return selectedTokenAddress
- ? txsToRender
- .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
- .sort((a, b) => b.time - a.time)
- : txsToRender
- .sort((a, b) => b.time - a.time)
-}
-
function getGasIsLoading (state) {
return state.appState.gasIsLoading
}
diff --git a/ui/app/selectors/tokens.js b/ui/app/selectors/tokens.js
new file mode 100644
index 000000000..47b6e0192
--- /dev/null
+++ b/ui/app/selectors/tokens.js
@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect'
+
+export const selectedTokenAddressSelector = state => state.metamask.selectedTokenAddress
+export const tokenSelector = state => state.metamask.tokens
+export const selectedTokenSelector = createSelector(
+ tokenSelector,
+ selectedTokenAddressSelector,
+ (tokens = [], selectedTokenAddress = '') => {
+ return tokens.find(({ address }) => address === selectedTokenAddress)
+ }
+)
diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js
new file mode 100644
index 000000000..3e9843722
--- /dev/null
+++ b/ui/app/selectors/transactions.js
@@ -0,0 +1,58 @@
+import { createSelector } from 'reselect'
+import { valuesFor } from '../util'
+import {
+ UNAPPROVED_STATUS,
+ APPROVED_STATUS,
+ SUBMITTED_STATUS,
+} from '../constants/transactions'
+
+import { selectedTokenAddressSelector } from './tokens'
+
+export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList
+export const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs
+export const selectedAddressTxListSelector = state => state.metamask.selectedAddressTxList
+
+const pendingStatusHash = {
+ [UNAPPROVED_STATUS]: true,
+ [APPROVED_STATUS]: true,
+ [SUBMITTED_STATUS]: true,
+}
+
+export const transactionsSelector = createSelector(
+ selectedTokenAddressSelector,
+ unapprovedMsgsSelector,
+ shapeShiftTxListSelector,
+ selectedAddressTxListSelector,
+ (selectedTokenAddress, unapprovedMsgs = {}, shapeShiftTxList = [], transactions = []) => {
+ const unapprovedMsgsList = valuesFor(unapprovedMsgs)
+ const txsToRender = transactions.concat(unapprovedMsgsList, shapeShiftTxList)
+
+ return selectedTokenAddress
+ ? txsToRender
+ .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
+ .sort((a, b) => b.time - a.time)
+ : txsToRender
+ .sort((a, b) => b.time - a.time)
+ }
+)
+
+export const pendingTransactionsSelector = createSelector(
+ transactionsSelector,
+ (transactions = []) => (
+ transactions.filter(transaction => transaction.status in pendingStatusHash)
+ )
+)
+
+export const submittedPendingTransactionsSelector = createSelector(
+ transactionsSelector,
+ (transactions = []) => (
+ transactions.filter(transaction => transaction.status === SUBMITTED_STATUS)
+ )
+)
+
+export const completedTransactionsSelector = createSelector(
+ transactionsSelector,
+ (transactions = []) => (
+ transactions.filter(transaction => !(transaction.status in pendingStatusHash))
+ )
+)
diff --git a/ui/app/token-util.js b/ui/app/token-util.js
index 8798ed266..3d61ad1ca 100644
--- a/ui/app/token-util.js
+++ b/ui/app/token-util.js
@@ -1,55 +1,113 @@
const log = require('loglevel')
const util = require('./util')
const BigNumber = require('bignumber.js')
+import contractMap from 'eth-contract-metadata'
-function tokenInfoGetter () {
- const tokens = {}
+const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
+ return {
+ ...acc,
+ [base.toLowerCase()]: contractMap[base],
+ }
+}, {})
- return async (address) => {
- if (tokens[address]) {
- return tokens[address]
+const DEFAULT_SYMBOL = ''
+const DEFAULT_DECIMALS = '0'
+
+async function getSymbolFromContract (tokenAddress) {
+ const token = util.getContractAtAddress(tokenAddress)
+
+ try {
+ const result = await token.symbol()
+ return result[0]
+ } catch (error) {
+ log.warn(`symbol() call for token at address ${tokenAddress} resulted in error:`, error)
+ }
+}
+
+async function getDecimalsFromContract (tokenAddress) {
+ const token = util.getContractAtAddress(tokenAddress)
+
+ try {
+ const result = await token.decimals()
+ const decimalsBN = result[0]
+ return decimalsBN && decimalsBN.toString()
+ } catch (error) {
+ log.warn(`decimals() call for token at address ${tokenAddress} resulted in error:`, error)
+ }
+}
+
+function getContractMetadata (tokenAddress) {
+ return tokenAddress && casedContractMap[tokenAddress.toLowerCase()]
+}
+
+async function getSymbol (tokenAddress) {
+ let symbol = await getSymbolFromContract(tokenAddress)
+
+ if (!symbol) {
+ const contractMetadataInfo = getContractMetadata(tokenAddress)
+
+ if (contractMetadataInfo) {
+ symbol = contractMetadataInfo.symbol
}
+ }
- tokens[address] = await getSymbolAndDecimals(address)
+ return symbol
+}
- return tokens[address]
+async function getDecimals (tokenAddress) {
+ let decimals = await getDecimalsFromContract(tokenAddress)
+
+ if (!decimals || decimals === '0') {
+ const contractMetadataInfo = getContractMetadata(tokenAddress)
+
+ if (contractMetadataInfo) {
+ decimals = contractMetadataInfo.decimals
+ }
}
+
+ return decimals
}
-async function getSymbolAndDecimals (tokenAddress, existingTokens = []) {
+export async function getSymbolAndDecimals (tokenAddress, existingTokens = []) {
const existingToken = existingTokens.find(({ address }) => tokenAddress === address)
+
if (existingToken) {
- return existingToken
+ return {
+ symbol: existingToken.symbol,
+ decimals: existingToken.decimals,
+ }
}
- let result = []
+ let symbol, decimals
+
try {
- const token = util.getContractAtAddress(tokenAddress)
+ symbol = await getSymbol(tokenAddress)
+ decimals = await getDecimals(tokenAddress)
+ } catch (error) {
+ log.warn(`symbol() and decimal() calls for token at address ${tokenAddress} resulted in error:`, error)
+ }
- result = await Promise.all([
- token.symbol(),
- token.decimals(),
- ])
- } catch (err) {
- log.warn(`symbol() and decimal() calls for token at address ${tokenAddress} resulted in error:`, err)
+ return {
+ symbol: symbol || DEFAULT_SYMBOL,
+ decimals: decimals || DEFAULT_DECIMALS,
}
+}
+
+export function tokenInfoGetter () {
+ const tokens = {}
- const [ symbol = [], decimals = [] ] = result
+ return async (address) => {
+ if (tokens[address]) {
+ return tokens[address]
+ }
- return {
- symbol: symbol[0] || null,
- decimals: decimals[0] && decimals[0].toString() || null,
+ tokens[address] = await getSymbolAndDecimals(address)
+
+ return tokens[address]
}
}
-function calcTokenAmount (value, decimals) {
+export function calcTokenAmount (value, decimals) {
const multiplier = Math.pow(10, Number(decimals || 0))
return new BigNumber(String(value)).div(multiplier).toNumber()
}
-
-
-module.exports = {
- tokenInfoGetter,
- calcTokenAmount,
- getSymbolAndDecimals,
-}
diff --git a/ui/app/util.js b/ui/app/util.js
index ade4fec8a..37c0fb698 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -9,7 +9,7 @@ const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
// formatData :: ( date: <Unix Timestamp> ) -> String
function formatDate (date) {
- return vreme.format(new Date(date), 'March 16 2014 14:30')
+ return vreme.format(new Date(date), '3/16/2014 at 14:30')
}
var valueTable = {