diff --git a/.env.example b/.env.local.example similarity index 52% rename from .env.example rename to .env.local.example index be2aa2fe26..f2103acece 100644 --- a/.env.example +++ b/.env.local.example @@ -1,3 +1,2 @@ REACT_APP_NETWORK_ID="1" REACT_APP_NETWORK_URL="" -REACT_APP_NETWORK_NAME="Main Ethereum Network" \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 0bcc9a4a8f..d8f43b012d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,4 +11,3 @@ install: yarn script: - yarn check:all - yarn build - - yarn test diff --git a/README.md b/README.md index 096dd2947f..53cb53abe8 100644 --- a/README.md +++ b/README.md @@ -24,17 +24,15 @@ yarn ### Configure Environment -Rename `.env.example` to `.env` and fill in the appropriate variables. +Rename `.env.local.example` to `.env.local` and fill in the appropriate variables. ### Run ```bash yarn start -# or -yarn start:rinkeby ``` -More robust support for other testnets is in the works! +To run on a testnet, simply update the `.env.local` file appropriately. ## Contributions diff --git a/package.json b/package.json index e30473c525..7ed1fb15ad 100644 --- a/package.json +++ b/package.json @@ -5,32 +5,35 @@ "homepage": ".", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.18", + "@fortawesome/free-brands-svg-icons": "^5.8.2", + "@fortawesome/free-regular-svg-icons": "^5.8.2", + "@fortawesome/free-solid-svg-icons": "^5.8.2", + "@fortawesome/react-fontawesome": "^0.1.4", + "@reach/dialog": "^0.2.8", "@reach/tooltip": "^0.2.0", - "classnames": "^2.2.6", + "copy-to-clipboard": "^3.2.0", "escape-string-regexp": "^2.0.0", "ethers": "^4.0.27", "i18next": "^15.0.9", "i18next-browser-languagedetector": "^3.0.1", "i18next-xhr-backend": "^2.0.1", "jazzicon": "^1.5.0", - "node-sass": "^4.11.0", + "polished": "^3.3.2", "react": "^16.8.6", - "react-aria-modal": "^4.0.0", + "react-device-detect": "^1.6.2", "react-dom": "^16.8.6", "react-ga": "^2.5.7", "react-i18next": "^10.7.0", "react-router-dom": "^5.0.0", "react-scripts": "^3.0.1", - "react-transition-group": "1.x", + "react-spring": "^8.0.20", "styled-components": "^4.2.0", - "ua-parser-js": "^0.7.18", "web3-react": "^5.0.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "start:rinkeby": "REACT_APP_NETWORK_ID=4 REACT_APP_NETWORK_NAME='Rinkeby Test Network' yarn start", - "build:rinkeby": "REACT_APP_NETWORK_ID=4 REACT_APP_NETWORK_NAME='Rinkeby Test Network' yarn build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "lint:base": "yarn eslint './src/**/*.{js,jsx}'", diff --git a/public/favicon.ico b/public/favicon.ico index 2ec445d1df..1bdcb78758 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index ae746eee3e..2b4a87221f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,9 +1,9 @@ - +
- + + \ No newline at end of file diff --git a/src/assets/images/trust-wallet-logo.svg b/src/assets/images/trust-wallet-logo.svg deleted file mode 100644 index ded53c1932..0000000000 --- a/src/assets/images/trust-wallet-logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - diff --git a/src/components/AddressInputPanel/address-input-panel.scss b/src/components/AddressInputPanel/address-input-panel.scss deleted file mode 100644 index 6f3df3a7c3..0000000000 --- a/src/components/AddressInputPanel/address-input-panel.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import '../../variables.scss'; - -.address-input-panel { - @extend %col-nowrap; - - &__input { - font-size: 1rem; - outline: none; - border: none; - flex: 1 1 auto; - width: 0; - color: $royal-blue; - overflow: hidden; - text-overflow: ellipsis; - - &::placeholder { - color: $chalice-gray; - } - - &--error { - color: $salmon-red; - } - } - - &__recipient-row { - display: flex; - justify-content: center; - align-items: center; - } - - &__input-container { - flex: 1; - } - - &__qr-container { - padding: 10px; - background: $concrete-gray; - border: 1px solid $mercury-gray; - border-radius: 10px; - margin-right: 16px; - height: 21px; - - & > img { - height: 21px; - } - } -} diff --git a/src/components/AddressInputPanel/index.js b/src/components/AddressInputPanel/index.js index 65bbc659d5..d2d054aaa6 100644 --- a/src/components/AddressInputPanel/index.js +++ b/src/components/AddressInputPanel/index.js @@ -1,13 +1,73 @@ import React, { useState, useEffect } from 'react' -import classnames from 'classnames' +import styled from 'styled-components' import { useTranslation } from 'react-i18next' import { useWeb3Context } from 'web3-react' +import { lighten } from 'polished' import { isAddress } from '../../utils' import { useDebounce } from '../../hooks' -// import QrCode from '../QrCode' // commented out pending further review -import './address-input-panel.scss' +const InputPanel = styled.div` + ${({ theme }) => theme.flexColumnNoWrap} + box-shadow: 0 4px 8px 0 ${({ theme }) => lighten(0.9, theme.royalBlue)}; + position: relative; + border-radius: 1.25rem; + background-color: ${({ theme }) => theme.white}; + z-index: 1; +` + +const ContainerRow = styled.div` + display: flex; + justify-content: center; + align-items: center; + border-radius: 1.25rem; + box-shadow: 0 0 0 0.5px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)}; + background-color: ${({ theme }) => theme.white}; + transition: box-shadow 200ms ease-in-out; +` + +const InputContainer = styled.div` + flex: 1; +` + +const LabelRow = styled.div` + ${({ theme }) => theme.flexRowNoWrap} + align-items: center; + color: ${({ theme }) => theme.doveGray}; + font-size: 0.75rem; + line-height: 1rem; + padding: 0.75rem 1rem; +` + +const LabelContainer = styled.div` + flex: 1 1 auto; + width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +` + +const InputRow = styled.div` + ${({ theme }) => theme.flexRowNoWrap} + align-items: center; + padding: 0.25rem 0.85rem 0.75rem; +` + +const Input = styled.input` + font-size: 1rem; + outline: none; + border: none; + flex: 1 1 auto; + width: 0; + color: ${({ error, theme }) => (error ? theme.salmonRed : theme.royalBlue)}; + transition: color 200ms ease-in-out; + overflow: hidden; + text-overflow: ellipsis; + + ::placeholder { + color: ${({ theme }) => theme.chaliceGray}; + } +` export default function AddressInputPanel({ title, initialInput = '', onChange = () => {}, onError = () => {} }) { const { t } = useTranslation() @@ -82,40 +142,29 @@ export default function AddressInputPanel({ title, initialInput = '', onChange = } return ( -