aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/track_token_confirmation.tsx
blob: 294fb85905bc8764b0aa716c19e6ee3a0001e18f (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Party } from 'ts/components/ui/party';
import { Token, TokenByAddress } from 'ts/types';
import { utils } from 'ts/utils/utils';

interface TrackTokenConfirmationProps {
    tokens: Token[];
    tokenByAddress: TokenByAddress;
    networkId: number;
    isAddingTokenToTracked: boolean;
}

interface TrackTokenConfirmationState {}

export class TrackTokenConfirmation extends React.Component<TrackTokenConfirmationProps, TrackTokenConfirmationState> {
    public render(): React.ReactNode {
        const isMultipleTokens = this.props.tokens.length > 1;
        const allTokens = _.values(this.props.tokenByAddress);
        return (
            <div style={{ color: colors.grey700 }}>
                {this.props.isAddingTokenToTracked ? (
                    <div className="py4 my4 center">
                        <span className="pr1">
                            <i className="zmdi zmdi-spinner zmdi-hc-spin" />
                        </span>
                        <span>Adding token{isMultipleTokens && 's'}...</span>
                    </div>
                ) : (
                    <div>
                        <div>You do not currently track the following token{isMultipleTokens && 's'}:</div>
                        <div className="py2 clearfix mx-auto center" style={{ width: 355 }}>
                            {_.map(this.props.tokens, (token: Token) => (
                                <div
                                    key={`token-profile-${token.name}`}
                                    className={`col col-${isMultipleTokens ? '6' : '12'} px2`}
                                >
                                    <Party
                                        label={token.name}
                                        address={token.address}
                                        networkId={this.props.networkId}
                                        alternativeImage={token.iconUrl}
                                        isInTokenRegistry={token.isRegistered}
                                        hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, token)}
                                    />
                                </div>
                            ))}
                        </div>
                        <div>
                            Tracking a token adds it to the balances section of 0x Portal and allows you to
                            generate/fill orders involving the token
                            {isMultipleTokens && 's'}. Would you like to start tracking{' '}
                            {isMultipleTokens ? 'these' : 'this'} token?
                        </div>
                    </div>
                )}
            </div>
        );
    }
}