feat(protocolselector): initial implementation

src/components/ProtocolSelector/index.tsx

@@ -0,0 +1,63 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { Button, IconWrapper, Symbol, DropDownList } from './style';
+import { IProps, IProtocol } from './interfaces';
+import { Icon, IconType } from '../common/Icon';
+
+export const ProtocolSelector: React.FC<IProps> = (props) => {
+  const [protocol, setProtocol] = useState<IProtocol>();
+  const [dropdownIsOpen, setDropdownIsOpen] = useState<boolean>(false);
+
+  useLayoutEffect(() => {
+    setProtocol(props.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.current]);
+
+  if (!protocol) {
+    return (
+      <Button disabled={props.disabled}>
+        Select a protocol
+        <Icon type={IconType.ArrowDown} style={{ width: '0.8em' }} disabled={props.disabled} />
+      </Button>
+    );
+  }
+
+  const _handleProtocolPick = (protocol: IProtocol) => (): void => {
+    if (typeof props.onChange === 'function') {
+      props.onChange(protocol);
+    }
+
+    setProtocol(protocol);
+    setDropdownIsOpen(false);
+  };
+
+  const fullLabel = `${protocol.name} - ${protocol.symbol}`;
+  return (
+    <>
+      <Button
+        title={fullLabel}
+        onClick={() => setDropdownIsOpen(!dropdownIsOpen)}
+        disabled={props.disabled}
+      >
+        <IconWrapper>
+          <img src={protocol.logoURI} title={fullLabel} />
+        </IconWrapper>
+        <Symbol>{protocol.symbol}</Symbol>
+        {props.list.length > 0 && (
+          <Icon type={IconType.ArrowDown} style={{ width: '0.8em' }} disabled={props.disabled} />
+        )}
+      </Button>
+
+      <DropDownList open={dropdownIsOpen}>
+        {props.list.map((protocol, i) => (
+          <li key={i} onClick={_handleProtocolPick(protocol)}>
+            <IconWrapper>
+              <img src={protocol.logoURI} title={fullLabel} />
+            </IconWrapper>
+            <div>{protocol.name}</div>
+            <div>{protocol.symbol}</div>
+          </li>
+        ))}
+      </DropDownList>
+    </>
+  );
+};

src/components/ProtocolSelector/interfaces.ts

@@ -0,0 +1,15 @@
+export interface IProtocol {
+  logoURI: string;
+  name: string;
+  decimals: number;
+  symbol: string;
+}
+
+export interface IProps {
+  disabled?: boolean;
+  current?: IProtocol;
+  list: IProtocol[];
+  allowCustom?: boolean;
+
+  onChange?: (newProtocol: IProtocol | null) => void;
+}

src/components/ProtocolSelector/style.ts

@@ -0,0 +1,105 @@
+import styled from 'styled-components';
+import _ from '../../providers/theme/styleFetcher';
+
+export interface IStyleProps {
+  open?: boolean;
+  src?: string;
+}
+
+interface SP extends IStyleProps {}
+
+export const Button = styled.button`
+  min-width: 6rem;
+  position: relative;
+  align-items: center;
+  height: 2.5em;
+  border-radius: 16px;
+  border: 1px solid red;
+  outline: none;
+  border: none;
+  transition: width 0.3s ease;
+
+  div:nth-child(1) {
+    margin: 0px 0.25rem 0px 0.75rem;
+  }
+
+  div:nth-child(2) {
+    margin: 0px 0.25rem 0px 0.35rem;
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  > * {
+    display: inline-block;
+  }
+`;
+
+export const IconWrapper = styled.div`
+  height: 20px;
+  width: 20px;
+  vertical-align: middle;
+  background-image: url('${(p: SP) => p.src}');
+  background-repeat: no-repeat;
+`;
+
+export const Symbol = styled.div`
+  font-size: 1.1em;
+  margin: 2px 0 0 5px;
+  vertical-align: middle;
+`;
+
+export const DropDownList = styled.ul`
+  margin: 0;
+  max-height: 0px;
+  max-width: 13rem;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  width: auto;
+  list-style: none;
+  transition: all 0.3s ease;
+
+  ${(p: SP) =>
+    p.open &&
+    `
+    max-height: 8rem;
+  `};
+
+  li {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    font-size: 0.8em;
+    padding: 5px;
+
+    :hover {
+      background-color: ${(p) => _(p.theme, 'disabled', 'color')};
+
+      div:nth-of-type(3) {
+        border-color: ${(p) => _(p.theme, 'messages', 'success')};
+        color: ${(p) => _(p.theme, 'messages', 'success')};
+      }
+    }
+
+    img {
+      margin-right: 5px;
+    }
+
+    div:nth-of-type(2) {
+      display: inline-block;
+      vertical-align: middle;
+      width: 100%;
+    }
+
+    div:nth-of-type(3) {
+      font-size: 0.7em;
+      border: 1px solid ${(p) => _(p.theme, 'disabled', 'color')};
+      color: ${(p) => _(p.theme, 'disabled', 'color')};
+      padding: 1px;
+    }
+  }
+`;