components#ListLogo TypeScript Examples

ListRow = memo(function ListRow({
  listUrl,
  onBack,
}: {
  listUrl: string;
  onBack: () => void;
}) {
  const classes = useStyles();
  const listsByUrl = useSelector<AppState, AppState['lists']['byUrl']>(
    (state) => state.lists.byUrl,
  );
  const selectedListUrl = useSelectedListUrl();
  const dispatch = useDispatch<AppDispatch>();
  const { current: list, pendingUpdate: pending } = listsByUrl[listUrl];
  const [anchorEl, setAnchorEl] = useState<any>(null);

  const isSelected = listUrl === selectedListUrl;

  const selectThisList = useCallback(() => {
    if (isSelected) return;
    ReactGA.event({
      category: 'Lists',
      action: 'Select List',
      label: listUrl,
    });

    dispatch(selectList(listUrl));
    onBack();
  }, [dispatch, isSelected, listUrl, onBack]);

  const handleAcceptListUpdate = useCallback(() => {
    if (!pending) return;
    ReactGA.event({
      category: 'Lists',
      action: 'Update List from List Select',
      label: listUrl,
    });
    dispatch(acceptListUpdate(listUrl));
  }, [dispatch, listUrl, pending]);

  const handleRemoveList = useCallback(() => {
    ReactGA.event({
      category: 'Lists',
      action: 'Start Remove List',
      label: listUrl,
    });
    if (
      window.prompt(
        `Please confirm you would like to remove this list by typing REMOVE`,
      ) === `REMOVE`
    ) {
      ReactGA.event({
        category: 'Lists',
        action: 'Confirm Remove List',
        label: listUrl,
      });
      dispatch(removeList(listUrl));
    }
  }, [dispatch, listUrl]);

  if (!list) return null;

  return (
    <Box
      className={classes.listRow}
      key={listUrl}
      id={listUrlRowHTMLId(listUrl)}
    >
      {list.logoURI ? (
        <ListLogo logoURI={list.logoURI} alt={`${list.name} list logo`} />
      ) : (
        <div style={{ width: '24px', height: '24px', marginRight: '1rem' }} />
      )}
      <Box className='listname'>
        <Typography>{list.name}</Typography>
        <Box className={classes.styledListUrlText} title={listUrl}>
          <ListOrigin listUrl={listUrl} />
        </Box>
      </Box>
      <div className={classes.styledMenu}>
        <Box
          onClick={(evt) => {
            setAnchorEl(evt.currentTarget);
          }}
        >
          <DropDown />
        </Box>

        <Popover
          open={Boolean(anchorEl)}
          onClose={() => setAnchorEl(null)}
          anchorEl={anchorEl}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          transformOrigin={{ vertical: 'top', horizontal: 'center' }}
        >
          <Box className={classes.popoverWrapper}>
            <Typography>{list && listVersionLabel(list.version)}</Typography>
            <Divider />
            <Box>
              <a
                href={`https://tokenlists.org/token-list?url=${listUrl}`}
                target='_blank'
                rel='noopener noreferrer'
              >
                View list
              </a>
              <Button
                onClick={handleRemoveList}
                disabled={Object.keys(listsByUrl).length === 1}
              >
                Remove list
              </Button>
              {pending && (
                <Button onClick={handleAcceptListUpdate}>Update list</Button>
              )}
            </Box>
          </Box>
        </Popover>
      </div>
      {isSelected ? (
        <Button
          disabled={true}
          className='select-button'
          style={{
            width: '5rem',
            minWidth: '5rem',
            padding: '0.5rem .35rem',
            borderRadius: '12px',
            fontSize: '14px',
          }}
        >
          Selected
        </Button>
      ) : (
        <Button onClick={selectThisList}>Select</Button>
      )}
    </Box>
  );
})