1  import React from 'react';
  2  import classnames from 'classnames';
  3  
  4  import { WalletName } from 'config';
  5  import { translateRaw } from 'translations';
  6  import { NewTabLink, Tooltip } from 'components/ui';
  7  import './WalletButton.scss';
  8  
  9  interface OwnProps {
 10    name: string;
 11    description?: string;
 12    example?: string;
 13    icon?: string;
 14    helpLink: string;
 15    walletType: WalletName;
 16    isSecure?: boolean;
 17    isReadOnly?: boolean;
 18    isDisabled?: boolean;
 19    disableReason?: string;
 20    onClick(walletType: string): void;
 21  }
 22  
 23  interface StateProps {
 24    isFormatDisabled?: boolean;
 25  }
 26  
 27  interface Icon {
 28    icon: string;
 29    tooltip: string;
 30    href?: string;
 31    arialabel: string;
 32  }
 33  
 34  type Props = OwnProps & StateProps;
 35  
 36  export class WalletButton extends React.PureComponent<Props> {
 37    public render() {
 38      const {
 39        name,
 40        description,
 41        example,
 42        icon,
 43        helpLink,
 44        isSecure,
 45        isReadOnly,
 46        isDisabled,
 47        disableReason
 48      } = this.props;
 49  
 50      const icons: Icon[] = [];
 51      if (isReadOnly) {
 52        icons.push({
 53          icon: 'eye',
 54          tooltip: translateRaw('TOOLTIP_READ_ONLY_WALLET'),
 55          arialabel: 'Read Only'
 56        });
 57      } else {
 58        if (isSecure) {
 59          icons.push({
 60            icon: 'shield',
 61            tooltip: translateRaw('TOOLTIP_SECURE_WALLET_TYPE'),
 62            arialabel: 'Secure wallet type'
 63          });
 64        } else {
 65          icons.push({
 66            icon: 'exclamation-triangle',
 67            tooltip: translateRaw('TOOLTIP_INSECURE_WALLET_TYPE'),
 68            arialabel: 'Insecure wallet type'
 69          });
 70        }
 71      }
 72      if (helpLink) {
 73        icons.push({
 74          icon: 'question-circle',
 75          tooltip: translateRaw('TOOLTIP_MORE_INFO'),
 76          href: helpLink,
 77          arialabel: 'More info'
 78        });
 79      }
 80  
 81      return (
 82        <div
 83          className={classnames({
 84            WalletButton: true,
 85            'WalletButton--small': !isSecure,
 86            'is-disabled': isDisabled
 87          })}
 88          onClick={this.handleClick}
 89          tabIndex={isDisabled ? -1 : 0}
 90          aria-disabled={isDisabled}
 91        >
 92          <div className="WalletButton-inner">
 93            <div className="WalletButton-title">
 94              {icon && <img className="WalletButton-title-icon" src={icon} alt={name + ' logo'} />}
 95              <span>{name}</span>
 96            </div>
 97  
 98            {description && (
 99              <div className="WalletButton-description" aria-label="description">
100                {description}
101              </div>
102            )}
103            {example && (
104              <div className="WalletButton-example" aria-label="example" aria-hidden={true}>
105                {example}
106              </div>
107            )}
108  
109            <div className="WalletButton-icons">
110              {icons.map(i => (
111                <span className="WalletButton-icons-icon" key={i.icon} onClick={this.stopPropogation}>
112                  {i.href ? (
113                    <NewTabLink href={i.href} onClick={this.stopPropogation} aria-label={i.arialabel}>
114                      <i className={`fa fa-${i.icon}`} />
115                    </NewTabLink>
116                  ) : (
117                    <i className={`fa fa-${i.icon}`} aria-label={i.arialabel} />
118                  )}
119                  {!isDisabled && <Tooltip size="sm">{i.tooltip}</Tooltip>}
120                </span>
121              ))}
122            </div>
123          </div>
124  
125          {isDisabled && disableReason && <Tooltip>{disableReason}</Tooltip>}
126        </div>
127      );
128    }
129  
130    private handleClick = () => {
131      if (this.props.isDisabled || this.props.isFormatDisabled) {
132        return;
133      }
134  
135      this.props.onClick(this.props.walletType);
136    };
137  
138    private stopPropogation = (ev: React.FormEvent<HTMLAnchorElement | HTMLSpanElement>) => {
139      ev.stopPropagation();
140    };
141  }