12 | 
13 |
24 | );
25 |
26 | fourOFour.propTypes = {
27 | t: PropTypes.func,
28 | history: PropTypes.object
29 | };
30 |
31 | export default withRouter(withTranslation()(fourOFour));
32 |
--------------------------------------------------------------------------------
/src/js/components/ErrorInformation/index.scss:
--------------------------------------------------------------------------------
1 | .error-information {
2 | width: 100%;
3 | text-align: center;
4 | padding: 0 35px;
5 | }
6 |
--------------------------------------------------------------------------------
/src/js/components/Loading/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
4 | import {faCircleNotch} from "@fortawesome/free-solid-svg-icons";
5 | import {withTranslation} from "react-i18next";
6 | import TxHash from '../../ui/TxHash';
7 |
8 | import "./index.scss";
9 |
10 | const Loading = ({t, mining, initial, page, value, txHash}) => (
11 | 14 | {t('errorInformation.404.title')} 15 |
16 |17 | {t('errorInformation.404.tip')} 18 |
19 |20 | 21 | 22 |
23 |
12 |
21 | );
22 |
23 | Loading.propTypes = {
24 | t: PropTypes.func,
25 | mining: PropTypes.bool,
26 | initial: PropTypes.bool,
27 | page: PropTypes.bool,
28 | value: PropTypes.string,
29 | txHash: PropTypes.string
30 | };
31 |
32 | export default withTranslation()(Loading);
33 |
--------------------------------------------------------------------------------
/src/js/components/Loading/index.scss:
--------------------------------------------------------------------------------
1 | .loading {
2 | margin-top: 174px;
3 | }
--------------------------------------------------------------------------------
/src/js/components/Loading/index.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { shallow } from "enzyme";
3 |
4 | import Loading from ".";
5 |
6 | describe('Loading', () => {
7 | it('should render correctly when mining', () => {
8 | const component = shallow(13 | {value} 14 | {mining && t('loading.mining')} 15 | {initial && t('loading.initial')} 16 | {page && t('loading.page')} 17 |
18 |{t('transaction.hash')}:
9 |
13 | {name}
10 |{assets.join(', ')}
11 | 12 |
9 | {children}
10 |
11 | {!hideButton && }
12 |
9 |
21 | );
22 |
23 | NoLicense.defaultProps = {
24 | arbitratorPage: false
25 | };
26 |
27 | NoLicense.propTypes = {
28 | t: PropTypes.func,
29 | arbitratorPage: PropTypes.bool
30 | };
31 |
32 | export default withTranslation()(NoLicense);
33 |
--------------------------------------------------------------------------------
/src/js/components/NotificationManager/index.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import EscrowNotifications from './notifications/EscrowNotifications';
3 |
4 | import 'react-notifications/lib/notifications.css';
5 | import './index.scss';
6 |
7 | class NotificationManager extends Component {
8 | render() {
9 | return (
10 | 10 | {arbitratorPage && t('license.noArbiLicense')} 11 | {!arbitratorPage && t('license.noSellerLicense')} 12 |
13 | {arbitratorPage && 14 |{t('license.onceArbi')}
} 15 | {!arbitratorPage &&{t('license.onceSeller')}
} 16 |17 | {arbitratorPage && } 18 | {!arbitratorPage && } 19 |
20 |Trade details
8 |{(escrow.fiatAmount / 100).toFixed(2)} {escrow.offer.currency} for {escrow.tokenAmount} {escrow.token.symbol}
9 |{escrow.token.symbol} Price = {((escrow.fiatAmount / 100) / escrow.tokenAmount).toFixed(4)} {escrow.offer.currency}
10 |Took place on {escrow.createDate}
11 | 12 |
9 | 
10 |
11 |
12 | Read chat logs of this trade
14 | 15 |
13 |
14 |
18 |
19 |
24 | );
25 | }
26 | }
27 |
28 | LicenseInfo.propTypes = {
29 | t: PropTypes.func,
30 | price: PropTypes.oneOfType([
31 | PropTypes.string,
32 | PropTypes.number
33 | ])
34 | };
35 |
36 | export default withTranslation()(LicenseInfo);
37 |
--------------------------------------------------------------------------------
/src/js/pages/ArbitrationLicense/components/Info.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../css/variable-overrides.scss";
2 |
3 | .fee-card, .stake-card {
4 | font-size: 17px;
5 | }
6 |
7 | .fee-card {
8 | background-color: lighten($purple, 25%);
9 | color: $purple;
10 | }
11 |
12 | .stake-card {
13 | background-color: lighten($orange, 25%);
14 | color: $orange;
15 | }
16 |
--------------------------------------------------------------------------------
/src/js/pages/EditLocation/components/UpdateButton.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Row, Col, Button} from 'reactstrap';
3 | import PropTypes from 'prop-types';
4 | import {withTranslation} from 'react-i18next';
5 |
6 | class UpdateButton extends Component {
7 | render() {
8 | const t = this.props.t;
9 | return (
10 | {t('arbitration.title')}
16 | 17 |
20 | {t('arbitration.stake1', {price: this.props.price})}
21 | {t('arbitration.stake2', {price: this.props.price})} 22 |
23 | 21 | {t('arbitration.stake2', {price: this.props.price})} 22 |
{t('escrow.openDispute.open')}
18 |{t('escrow.openDispute.havingProblem')}
19 | 20 |{t('escrow.profile.title', {person: withBuyer ? t('general.buyer') : t('general.seller')})}
14 | 15 |{title}
11 |
12 | {children}
13 |
14 |
15 | );
16 |
17 | IconGroup.propTypes = {
18 | t: PropTypes.func,
19 | src: PropTypes.string,
20 | title: PropTypes.string,
21 | fullSize: PropTypes.bool,
22 | children: PropTypes.node,
23 | className: PropTypes.string,
24 | aos: PropTypes.string
25 | };
26 |
27 | export default withTranslation()(IconGroup);
28 |
--------------------------------------------------------------------------------
/src/js/pages/Home/components/landingHeader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Link} from "react-router-dom";
3 | import {Navbar, Nav, NavItem} from 'reactstrap';
4 | import PropTypes from "prop-types";
5 |
6 | import logo from "../../../../images/teller-logo-icon.svg";
7 | import logoText from "../../../../images/teller-logo-text.svg";
8 | import OpenDappBtn from "./openDappBtn";
9 |
10 | const LandingHeader = ({loading}) => (
11 | {t('yourSNTBalance.label')}
14 |
15 |
16 |
17 | {(this.props.value || this.props.value === 0) &&
13 |
14 |
18 |
19 |
27 | );
28 | }
29 | }
30 |
31 | LicenseInfo.propTypes = {
32 | t: PropTypes.func,
33 | price: PropTypes.oneOfType([
34 | PropTypes.string,
35 | PropTypes.number
36 | ])
37 | };
38 |
39 | export default withTranslation()(LicenseInfo);
40 |
--------------------------------------------------------------------------------
/src/js/pages/License/components/Info.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../css/variable-overrides.scss";
2 |
3 | .fee-card, .stake-card {
4 | font-size: 17px;
5 | }
6 |
7 | .fee-card {
8 | background-color: lighten($purple, 25%);
9 | color: $purple;
10 | }
11 |
12 | .stake-card {
13 | background-color: lighten($orange, 25%);
14 | color: $orange;
15 | }
16 |
--------------------------------------------------------------------------------
/src/js/pages/License/components/Info.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { shallow } from "enzyme";
3 |
4 | import LicenseInfo from "./Info";
5 |
6 | describe('LicenseInfo', () => {
7 | it('should render correctly', () => {
8 | const component = shallow({t('sellerLicenseInfo.title')}
16 | 17 |
20 | {t('sellerLicenseInfo.fee')}
{t('sellerLicenseInfo.fee2')} 21 |
22 |
23 | {t('sellerLicenseInfo.fee2')} 21 |
24 | {t('sellerLicenseInfo.stake', {price: this.props.price})}
{t('sellerLicenseInfo.stake2')} 25 |
26 | {t('sellerLicenseInfo.stake2')} 25 |
9 |
12 |
17 | 10
18 | SNT
19 |
20 |
7 |
19 |
37 |
48 | `;
49 |
--------------------------------------------------------------------------------
/src/js/pages/MyDisputes/index.scss:
--------------------------------------------------------------------------------
1 | .topCircle {
2 | z-index: 90;
3 | position: relative;
4 | }
5 |
6 | .bottomCircle {
7 | z-index: 80;
8 | position: relative;
9 | left: -10px;
10 | }
11 |
12 | .profile-button span,
13 | .profile-button h6 {
14 | font-size: 15px;
15 | }
16 |
--------------------------------------------------------------------------------
/src/js/pages/MyOffers/components/Offers.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { shallow } from "enzyme";
3 |
4 | import Offers from "./Offers";
5 |
6 | describe('Offers', () => {
7 | it('should render correctly', () => {
8 | const component = shallow(
40 |
41 |
42 | 41 |
45 |
46 |
47 | 46 |
7 |
8 |
9 | );
10 |
11 | Separator.propTypes = {
12 | className: PropTypes.string
13 | };
14 |
15 | export default Separator;
16 |
--------------------------------------------------------------------------------
/src/js/pages/MyProfile/index.scss:
--------------------------------------------------------------------------------
1 | @import "../../../css/variable-overrides";
2 |
3 | .topCircle {
4 | z-index: 90;
5 | position: relative;
6 | }
7 |
8 | .bottomCircle {
9 | z-index: 80;
10 | position: relative;
11 | left: -10px;
12 | }
13 |
14 | .profile-button {
15 | &:hover {
16 | text-decoration: none;
17 | }
18 |
19 | .profile-button-icon,
20 | .profile-button-title {
21 | font-size: 15px;
22 |
23 | &.line-height-40 {
24 | line-height: 40px;
25 | }
26 | }
27 | }
28 |
29 | .separator {
30 | display: block;
31 | width: 300px;
32 | border: 1px solid $secondary;
33 | margin: 15px auto;
34 | }
35 |
--------------------------------------------------------------------------------
/src/js/pages/MyTrades/components/Trades.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../css/variable-overrides";
2 |
3 | .state-filters {
4 | .form-control {
5 | height: 40px;
6 | }
7 | }
8 |
9 | .offer-card {
10 | position: relative;
11 | @media screen and (min-width: 500px) and (max-width: 765px) {
12 | .col-md-1:first-child {
13 | max-width: 65px;
14 | }
15 | }
16 | }
17 |
18 | .offer-card .label {
19 | position: absolute;
20 | top: 0;
21 | right: 10px;
22 | }
23 |
--------------------------------------------------------------------------------
/src/js/pages/MyTrades/components/Trades.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { shallow } from "enzyme";
3 |
4 | import Trades from "./Trades";
5 |
6 | /* eslint-disable-next-line no-unused-vars*/
7 | global.web3 = {
8 | utils: {
9 | toChecksumAddress: () => true
10 | }
11 | };
12 |
13 | describe('Trades', () => {
14 | it('should render correctly', () => {
15 | const component = shallow(
7 |
39 | `;
40 |
41 | exports[`Trades should render when empty 1`] = `
42 |
10 |
23 |
37 |
38 |
45 |
51 | `;
52 |
--------------------------------------------------------------------------------
/src/js/pages/OffersList/components/ClearButton.jsx:
--------------------------------------------------------------------------------
1 | import {Button} from "reactstrap";
2 | import PropTypes from "prop-types";
3 | import React from "react";
4 | import {withTranslation} from "react-i18next";
5 |
6 | const ClearButton = ({t, onClear, close}) => (
7 |
13 | );
14 |
15 | ClearButton.propTypes = {
16 | t: PropTypes.func,
17 | onClear: PropTypes.func,
18 | close: PropTypes.func
19 | };
20 |
21 | export default withTranslation()(ClearButton);
22 |
--------------------------------------------------------------------------------
/src/js/pages/OffersList/components/Modals/SortModal.jsx:
--------------------------------------------------------------------------------
1 | import {ButtonGroup, Modal, ModalBody} from "reactstrap";
2 | import React, {Fragment} from "react";
3 | import CheckButton from "../../../../ui/CheckButton";
4 | import Separator from "../../../MyProfile/components/Separator";
5 | import PropTypes from "prop-types";
6 |
7 | const SorterModal = ({onClose, sortTypes, setSortType, sortType}) => (
8 | {t('profileSettings.title')}
12 |{children}
8 | ); 9 | 10 | LogoCircle.propTypes = { 11 | children: PropTypes.string 12 | }; 13 | 14 | export default LogoCircle; 15 | -------------------------------------------------------------------------------- /src/js/ui/LogoCircle/index.scss: -------------------------------------------------------------------------------- 1 | $logo-size: 64px; 2 | .logo-circle { 3 | width: $logo-size; 4 | height: $logo-size; 5 | line-height: $logo-size; 6 | font-size: 28px; 7 | color: white; 8 | font-weight: bold; 9 | } 10 | -------------------------------------------------------------------------------- /src/js/ui/RatingIcon/index.jsx: -------------------------------------------------------------------------------- 1 | import React, {Fragment} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; 4 | import {faThumbsDown, faThumbsUp} from "@fortawesome/free-solid-svg-icons"; 5 | import classnames from 'classnames'; 6 | 7 | const RatingIcon = ({isPositiveRating, onClick, isRated, size, className}) => ( 8 |
8 | 
9 |
14 | );
15 |
16 | Success.propTypes = {
17 | onClick: PropTypes.func
18 | };
19 |
20 | export default Success;
21 |
--------------------------------------------------------------------------------
/src/js/wizards/Sell/7_Limits/index.scss:
--------------------------------------------------------------------------------
1 | .disabled-limits {
2 | opacity: 0.4;
3 | }
4 |
--------------------------------------------------------------------------------
/src/js/wizards/Sell/8_Summary/components/FinalModal.scss:
--------------------------------------------------------------------------------
1 | .final-step-modal {
2 | .modal-content {
3 | padding-top: 25px;
4 | padding-bottom: 25px;
5 |
6 | .bottom-details {
7 | .row {
8 | line-height: 33px;
9 | margin-top: 20px;
10 | }
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/js/wizards/Sell/8_Summary/components/SellSummary.scss:
--------------------------------------------------------------------------------
1 | .offer-summary {
2 | .line-title {
3 | font-size: 15px;
4 | }
5 |
6 | .line-text {
7 | font-weight: 500;
8 | }
9 |
10 | .token-img {
11 | width: 24px;
12 | height: 24px;
13 | }
14 |
15 | .line-text-asset {
16 | position: relative;
17 | top: 2px;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/js/wizards/hoc/withFooter.scss:
--------------------------------------------------------------------------------
1 | @import "../../../css/variable-overrides";
2 |
3 | $footer-btn-height: 44px;
4 | $footer-padding: 16px;
5 | $footer-height: $footer-btn-height + $footer-padding * 2;
6 |
7 | .container {
8 | position: relative;
9 | padding-bottom: $footer-height + 10px !important;
10 | min-height: 100%;
11 |
12 | .wizard-container {
13 | align-items: flex-start;
14 |
15 | .footer {
16 | right: 0;
17 | bottom: 0;
18 | left: 0;
19 | height: $footer-height;
20 | max-width: $content-width;
21 | margin: 0 auto;
22 | position: fixed;
23 | z-index: 1000;
24 | padding: $footer-padding;
25 |
26 | @media screen and (min-width: map-get($grid-breakpoints, "md")) {
27 | position: sticky;
28 | width: 100%;
29 | padding: $footer-padding 0;
30 | z-index: auto;
31 | }
32 |
33 | .btn {
34 | width: 100%;
35 | height: $footer-btn-height;
36 | }
37 |
38 | .footer-arrow {
39 | position: relative;
40 | bottom: 1px;
41 | }
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/stories/components/confirmDialog.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {storiesOf} from '@storybook/react';
4 | import {withInfo} from "@storybook/addon-info";
5 | import { withKnobs, text, boolean } from '@storybook/addon-knobs';
6 | import {action} from "@storybook/addon-actions";
7 |
8 | import ConfirmDialog from '../../src/js/components/ConfirmDialog';
9 |
10 | storiesOf('Components/ConfirmDialog', module)
11 | .addDecorator(withKnobs)
12 | .add(
13 | "Default",
14 | withInfo({inline: true})(() => (
15 | Your offer has been successfully published
10 |11 | 12 |
13 |