antd#Icon JavaScript Examples

action = (
  <Fragment>
    <ButtonGroup>
      <Button>操作</Button>
      <Button>操作</Button>
      <Dropdown overlay={menu} placement="bottomRight">
        <Button>
          <Icon type="ellipsis" />
        </Button>
      </Dropdown>
    </ButtonGroup>
    <Button type="primary">主操作</Button>
  </Fragment>
)

Footer = () => {
  return (
    <div className='Footer'>
      <div className='iconFlex' data-testid='mainFooterWrapper'>
        <Icon type='home' className='icons' />
        <p>Home</p>
      </div>

      <div className='iconFlex'>
        <Icon type='shop' className='icons' />
        <p>Store</p>
      </div>

      <Icon
        type='plus-circle'
        theme='filled'
        style={{ color: '#ff6663' }}
        className='icons'
        id='addStore'
      />

      <div className='iconFlex'>
        <Icon type='wallet' className='icons' />
        <p>Account</p>
      </div>

      <div className='iconFlex'>
        <Icon type='profile' className='icons' />
        <p>Profile</p>
      </div>
    </div>
  );
}

function UploadProgress({ isUploading, uploadProgress }) {
	function openUploadStartNotification() {
		notification.open({
			message: "Upload Started!",
			description:
				"You can continue using the app like normal while the upload happens in the background. However, do not refresh or close the app until it completes!",
			icon: <Icon type="loading" style={{ fontSize: 24 }} spin />,
			duration: 8,
			key: "upload-start",
		});
	}

	function openUploadFinishNotification() {
		notification["success"]({
			message: "Upload Complete!",
			description: "Video upload has finished successfully.",
		});
	}

	function closeUploadStartNotification() {
		notification.close("upload-start");
	}

	useEffect(() => {
		if (isUploading && uploadProgress === 0) {
			openUploadStartNotification();
		}
		if (uploadProgress === 100) {
			openUploadFinishNotification();
			closeUploadStartNotification();
		}
	}, [uploadProgress, isUploading]);

	return <></>;
}

ExportTabSwitcher = ({ changeTab }) => {
  const [current, setCurrent] = useState("json");

  const handleClick = (e) => {
    changeTab(e.key);
    setCurrent(e.key);
  };

  return (
    <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
      <Menu.Item key="json">
        <Icon type="code" />
        JSON Values
      </Menu.Item>
    </Menu>
  );
}

FullScreen = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const change = () => {
    setIsFullscreen(screenfull.isFullscreen);
  };

  useEffect(() => {
    screenfull.isEnabled && screenfull.on("change", change);
    return () => {
      screenfull.isEnabled && screenfull.off("change", change);
    };
  }, []);

  const title = isFullscreen ? "取消全屏" : "全屏";
  const type = isFullscreen ? "fullscreen-exit" : "fullscreen";
  return (
    <div className="fullScreen-container">
      <Tooltip placement="bottom" title={title}>
        <Icon type={type} onClick={click} />
      </Tooltip>
    </div>
  );
}

render() {
    const { collapsed, isMobile, logo } = this.props;
    return (
      <div className={styles.header}>
        {isMobile && (
          <Link to="/" className={styles.logo} key="logo">
            <img src={logo} alt="logo" width="32" />
          </Link>
        )}
        <span className={styles.trigger} onClick={this.toggle}>
          <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
        </span>
        <RightContent {...this.props} />
      </div>
    );
  }

ColorPicker = (props) => {
  const { minder, action, icon, button, onChange } = props;
  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const [color, setColor] = useState('');

  useEffect(() => {
    setColor(minder.queryCommandState(action) !== -1 ? minder.queryCommandValue(action) : '');
  }, [minder.getSelectedNode()]);

  const handleColorChange = (newColor) => {
    setColor(newColor.hex);
    onChange(newColor.hex);
    setDisplayColorPicker(false);
  };

  return (
    <div className="color-wrapper">
      <Button {...button} onClick={() => setDisplayColorPicker(!displayColorPicker)}>
        <Icon type={icon} style={{ color, backgroundColor: color === '#ffffff' ? '#ccc' : '' }} />
      </Button>
      {displayColorPicker && (
        <div style={popover}>
          <div style={cover} onClick={() => setDisplayColorPicker(false)} />
          <CompactPicker color={color} onChange={handleColorChange} />
        </div>
      )}
    </div>
  );
}

render() {
    const { source, operation, metadata, user_name } = this.props.data;
    let data = JSON.parse(metadata);
    if (!data) return '---';
    if (operation === 'devops_register' || operation === 'devops_unregister') {
      return this.renderRegisterEvent();
    }
    if (operation === 'devops_update') {
      return this.renderUpdateEvent();
    }
    if (operation === 'devops_deploy') {
      return this.renderDeployEvent();
    }
    if (operation === 'devops_rollback') {
      return this.renderRollbackEvent();
    }
    return (
      <span>
        <UserInfo name={user_name} />
        <span className={styles.eventInfo}>
          {data.commit_id ? (
            <Tag color="orange">
              <Icon type="number" /> {data.commit_id}
            </Tag>
          ) : (
            ''
          )}
        </span>
      </span>
    );
  }

render() {
    return (
      <Col span={6}>
        <h4 className='title'>
          {this.props.iconType ? (
            <Icon type={this.props.iconType} className='icon' />
          ) : (
            ''
          )}
          {this.props.title}
        </h4>
        {this.props.linkList.map(function (item, i) {
          return (
            <p key={i}>
              <a href={item.itemLink} className='link'>
                {item.itemTitle}
              </a>
            </p>
          )
        })}
      </Col>
    )
  }

MyIcon =Icon.createFromIconfontCN({
  scriptUrl: iconjs, // 在 iconfont.cn 上生成
})

CartHeader = ({
	logoPath,
	badgeCount = 0,
	currency = '',
	totalDue = 0,
	displayBack,
	displayTotal,
	top = false
}) => {
	const dispatch = useDispatch();
	const cartContents = useSelector((state) => state.cart);
	const storeDetails = useSelector((state) => state.user.user);

	const sign = useCurrency(storeDetails.currency);
	const totalPrice = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.price * item.quantity;
		}, 0);
	};
	const totalQuantity = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.quantity;
		}, 0);
	};
	const change = (e) => {
		dispatch(creators.setString(e.target.value));
	};
	return (
		<Row className={top ? 'color cart-header' : 'cart-header'} type="flex" justify="space-between" align="middle">
			<Col span={6} className="logo">
				{displayBack ? (
					<Icon onClick={history.goBack} type="left-circle" />
				) : (
					<img src={logoPath || NoLogo} alt="Store Logo" />
				)}
			</Col>
			<Col span={12} className="total">
				{displayTotal ? (
					`Total: ${sign}${totalPrice(cartContents).toFixed(2)}`
				) : (
					<Input onChange={change} placeholder="Search..." />
				)}
			</Col>
			<NavLink to="/review">
				<Col span={6} className="icon">
					<Badge style={{ backgroundColor: 'gold', color: 'black' }} count={totalQuantity(cartContents)}>
						<Icon type="shopping-cart" style={{ color: 'black' }} />
					</Badge>
				</Col>
			</NavLink>
		</Row>
	);
}

//* Satisfies the requirement for:
//* start / stop / pause / continue stream
//* Toggle live feed visibility

function StreamControls({ mediaRecorder, toggleFeedVisibility, visibleFeed, startCountdown, toggleStreamPlayback, isActive }) {
	const [recording, setRecording] = useState(false);
	const [paused, setPaused] = useState(false);

	function startRecording() {
		if (mediaRecorder && mediaRecorder.state === "inactive") {
			startCountdown()
			setTimeout(() => {
				setRecording(true);
				mediaRecorder.start();
			}, 3000)
		}
	}

	function stopRecording() {
		if ((mediaRecorder && mediaRecorder.state === "recording") || (mediaRecorder && mediaRecorder.state === "paused")) {
			setRecording(false);
			mediaRecorder.stop();
			toggleStreamPlayback();
		}
	}

	function pauseRecording() {
		if (mediaRecorder && mediaRecorder.state === "recording") {
			setPaused(true);
			mediaRecorder.pause();
		}
	}

	function resumeRecording() {
		if (mediaRecorder && mediaRecorder.state === "paused") {
			setPaused(false);
			mediaRecorder.resume();
		}
	}

	return (
		<>
			{recording && !paused ? <button className="Rec">Recording</button> : null}
			{recording ? 
			<Timer recording={recording} paused={paused}/> : null}
			<div className="record-stream-controls">
				<Button className="start-recording" onClick={startRecording} style={{display: recording === true ? "none" : "flex", margin: "8px"}} disabled={isActive && !recording ? true : null}>
					<Icon type="video-camera" theme="filled" />
					<span>Start Recording</span>
				</Button>
				<Button className="pause-recording" onClick={pauseRecording} style={{display: recording === true && paused === false ? "flex" : "none", margin: "8px"}}>
				<Icon type="pause-circle" theme="filled" />
				 <span>Pause Recording</span>
				</Button>
				<Button className="resume-recording" onClick={resumeRecording} style={{display: recording === true && paused === true ? "flex" : "none", margin: "8px"}}>
					<Icon type="play-circle" theme="filled" />
					<span>Resume Recording</span>
				</Button>
				<Button className="stop-recording" onClick={stopRecording} style={{display: recording === true ? "flex" : "none", margin: "8px"}}>
				<	Icon type="stop" theme="filled" />
					<span>End Recording</span>
				</Button>
				<Button className="live-feed" onClick={toggleFeedVisibility} style={{ margin: "8px" }}>
				{visibleFeed ? <Icon type="eye-invisible" theme="filled" /> : <Icon type="eye" theme="filled" />}
					<span>Toggle Live Feed</span>
				</Button>
			</div>
		</>
	);
}

render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div className="app-container">
        <Collapse defaultActiveKey={["1"]}>
          <Panel header="导出选项" key="1">
            <Form layout="inline">
              <Form.Item label="文件名:">
                <Input
                  style={{ width: "250px" }}
                  prefix={
                    <Icon type="file" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  placeholder="请输入文件名(默认excel-file)"
                  onChange={this.filenameChange}
                />
              </Form.Item>
              <Form.Item label="单元格宽度是否自适应:">
                <Radio.Group
                  onChange={this.autoWidthChange}
                  value={this.state.autoWidth}
                >
                  <Radio value={true}>是</Radio>
                  <Radio value={false}>否</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="文件类型:">
                <Select
                  defaultValue="xlsx"
                  style={{ width: 120 }}
                  onChange={this.bookTypeChange}
                >
                  <Select.Option value="xlsx">xlsx</Select.Option>
                  <Select.Option value="csv">csv</Select.Option>
                  <Select.Option value="txt">txt</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-excel"
                  onClick={this.handleDownload.bind(null, "all")}
                >
                  全部导出
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  icon="file-excel"
                  onClick={this.handleDownload.bind(null, "selected")}
                >
                  导出已选择项
                </Button>
              </Form.Item>
            </Form>
          </Panel>
        </Collapse>
        <br />
        <Table
          bordered
          columns={columns}
          rowKey={(record) => record.id}
          dataSource={this.state.list}
          pagination={false}
          rowSelection={rowSelection}
          loading={this.state.downloadLoading}
        />
      </div>
    );
  }

// addLabel = (e) => {
    //   const { labels } = this.state
    //   const last = labels.length - 1
    //   const nextKeys = labels.concat(last + 1)
    //   this.setState({
    //     labels: nextKeys,
    //   })
    // }
    // removeLabel = (k) => {
    //   const { labels } = this.state
    //   if (labels.length === 1) { return }
    //   this.setState({
    //     labels: labels.filter(key => key !== k),
    //   })
    // }
    render() {
        const { getFieldDecorator } = this.props.form
        const { id, visiable } = this.state
        return (
            <Modal
                title={id ? '编辑报警组' : '修改登录密码'}
                visible={visiable}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                maskClosable={false}
            >
                <Form {...formItemLayout} layout="horizontal">
                    <Form.Item label="原密码">
                        {getFieldDecorator('oldpassword', {
                            rules: [
                                { required: true, message: '请输入原密码' },
                            ],
                        })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password" />)}
                    </Form.Item>
                    <Form.Item label="新密码">
                        {getFieldDecorator('newpassword', {
                            rules: [
                                { required: true, message: '请输入新密码' },
                            ],
                        })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password" />)}
                    </Form.Item>
                    <Form.Item label="确认新密码">
                        {getFieldDecorator('confirmnewpassword', {
                            rules: [
                                { required: true, message: '请输入确认新密码' },
                            ],
                        })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password" />)}
                    </Form.Item>
                </Form>
            </Modal>
        )
    }

Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}

copyright = (
  <Fragment>
    Copyright <Icon type="copyright" /> 2019 阿里妈妈技术质量部
  </Fragment>
)

render() {
        const props = this.props;
        const {uiSchema} = props;

        const options = uiSchema['ui:options'] || {};

        //解析schema中约定的_errorType字段，用来标识是validate中哪种类型校验不通过
        let validateMessage = '';
        let _errorType = options._errorType || '';
        if (_errorType !== '' && typeof options.validate !== 'undefined') {
            validateMessage = this._getValidateMessage(_errorType, options.validate);
        }

        return (
            <div className={props.className + ' xform-array-field'}>
                <div className={classnames({
                    'ant-form-item-control': true,
                    'xform-custom-widget': true,
                    'xform-custom-array': true,
                    'has-error': _errorType !== ''
                })}>
                    {props.items && props.items.map(element => (
                        <div className="xform-array-field-item" key={element.key || element.index}>
                            <div>{element.children}</div>
                            <div className="xform-array-buttons">
                                {element.hasMoveDown && (
                                    <Button size="small" type="default" onClick={element.onReorderClick(element.index, element.index + 1)}>
                                        <Icon type="arrow-down" />
                                    </Button>
                                )}
                                {element.hasMoveUp && (
                                    <Button size="small" type="default" onClick={element.onReorderClick(element.index, element.index - 1)}>
                                        <Icon type="arrow-up" />
                                    </Button>
                                )}
                                <If condition={props.items.length > 1}>
                                    <Then>
                                        <Button size="small" type="default" onClick={element.onDropIndexClick(element.index)}>
                                            <Icon type="close" />
                                        </Button>
                                    </Then>
                                </If>
                            </div>
                        </div>
                    ))}

                    {props.canAdd && (
                        <div className="xform-array-bottom">
                            <Button size="small" type="primary" onClick={props.onAddClick}>
                                <Icon type="plus" />
                            </Button>
                        </div>
                    )}
                    <div className="ant-form-explain">{validateMessage}</div>
                </div>
            </div>
        );
    }

function NavBar() {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  return (
    <nav className="menu" style={{ position: "fixed", zIndex: 5, width: "100%" }}>
      <div className="menu__logo">
        <a href="/">
          <span>?</span>
        </a>
      </div>
      <div className="menu__container">
        <div className="menu_left">
          <LeftMenu mode="horizontal" />
        </div>
        <Button className="menu__mobile-button" type="primary" onClick={showDrawer}>
          <Icon type="align-right" />
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          className="menu_drawer"
          closable={false}
          onClose={onClose}
          visible={visible}
        >
          <LeftMenu mode="inline" />
          <RightMenu mode="inline" />
        </Drawer>
      </div>
    </nav>
  );
}

render() {
    const { type, disabled, style } = this.props;
    const btnMap = {
      addChild: () => {
        return addChild(disabled, style);
      },
      addSibling: () => {
        return addSibling(disabled, style);
      },
      addParent: () => {
        return addParent(disabled, style);
      },
      block: () => {
        return block(disabled, style);
      },
      fail: () => {
        return fail(disabled, style);
      },
      checked: () => {
        return checked(disabled, style);
      },
      skip: () => {
        return skip(disabled, style);
      },
      clear: () => {
        return clear(disabled, style);
      },
      stylePaste: () => {
        return stylePaste(disabled, style);
      },
      selectedAll: () => {
        return selectedAll(disabled, style);
      },
      zoomIn: () => {
        return zoomIn(disabled, style);
      },
      zoomOut: () => {
        return zoomOut(disabled, style);
      },
      target: () => {
        return target(disabled, style);
      },
    };
    return <Icon component={btnMap[type]} {...this.props} />;
  }

renderPipeline() {
    const { metadata, app_name } = this.props.data;
    let data = JSON.parse(metadata);
    if (!data) return '';
    const {
      user = { name, avatar_url },
      commit = { id, messag, url },
      object_attributes = { status, duration, created_at, finished_at },
      project,
    } = data;

    return (
      <span>
        <UserInfo avatar={user.avatar_url} name={user.name} /> 的提交{' '}
        <a href={commit.url} target="_blank">
          <Icon type="number" />
          {commit.id.substr(0, 8)}
        </a>{' '}
        触发了 Git Pipeline{' '}
        {object_attributes.status ? (
          <Popover
            content={`耗时: ${object_attributes.duration}s | 开始: ${object_attributes.created_at} | 结束: ${object_attributes.finished_at}`}
          >
            {object_attributes.status === 'success' ? (
              <Tag color="green">success</Tag>
            ) : (
              <Tag color="red">{object_attributes.status}</Tag>
            )}
          </Popover>
        ) : (
          ''
        )}
        <div className={styles.cmLine}>
          <span>
            <Popover content={commit.message}>
              {commit.message.substr(0, CommitMessageLen)}
              {commit.message.length > CommitMessageLen ? '...' : ''}
            </Popover>
          </span>
        </div>
      </span>
    );
  }

render() {
    return (
      <Collapse
        style={{
          margin: 0,
          marginBottom: '16px'
        }}
        onChange={this.callback}
        // activeKey={this.state.activeKey}
        activeKey={this.props.collapseKey}
      >
        <Panel
          header={
            <span>
              {' '}
              选择测试用例环境
              <Tooltip title="默认使用测试用例选择的环境">
                {' '}
                <Icon type="question-circle-o" />{' '}
              </Tooltip>
            </span>
          }
          key="1"
        >
          <div className="case-env">
            {this.props.envList.length > 0 && (
              <div>
                {this.props.envList.map(item => {
                  return (
                    <Row
                      key={item._id}
                      type="flex"
                      justify="space-around"
                      align="middle"
                      className="env-item"
                    >
                      <Col span={6} className="label">
                        <Tooltip title={item.name}>
                          <span className="label-name">{item.name}</span>
                        </Tooltip>
                      </Col>
                      <Col span={18}>
                        <Select
                          style={{
                            width: '100%'
                          }}
                          value={this.props.envValue[item._id] || ''}
                          defaultValue=""
                          onChange={val => this.props.currProjectEnvChange(val, item._id)}
                        >
                          <Option key="default" value="">
                            默认环境
                          </Option>

                          {item.env.map(key => {
                            return (
                              <Option value={key.name} key={key._id}>
                                {key.name + ': ' + key.domain}
                              </Option>
                            );
                          })}
                        </Select>
                      </Col>
                    </Row>
                  );
                })}
              </div>
            )}
          </div>
        </Panel>
      </Collapse>
    );
  }

render() {
    const {
      currentUser = { avatar: '',  nickname: '', },  menu } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <Icon type="user" />
            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <Icon type="setting" />
            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.nickname ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={styles.name}>{currentUser.nickname}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }

AcyCoinItem = ({
  data,
  selectToken = () => null,
  clickCallback,
  actionIcon,
  hideBalance = false,
  customIcon = true,
  isFav = false,
  constBal,
  ...rest
}) => {
  const [balance, setBal] = useState(0);
  const { account, chainId, library } = useConstantLoader();
  const [showActionButton, setShowActionButton] = useState(false);
  useEffect(() => {
    if (clickCallback !== undefined) setShowActionButton(true);
    else setShowActionButton(false);
  }, [clickCallback])

  // loading balance if constBal is not given
  // request balance multiple time have a high cost
  useEffect(
    () => {
      if (hideBalance) return;
      if (!library || !account || !chainId) return;

      if (!constBal) {
        const { address, symbol, decimals } = data; 
        getUserTokenBalance(
          { address, symbol, decimals },
          chainId,
          account,
          library
        ).then((bal) => {
          setBal(processString(bal));
          console.log('made request', data, bal);
        }).catch(err => {
          console.log("Failed to load balance, error param: ", address, symbol, decimals, err);
        })
      }
    },
    [library, account, chainId]
  );
  return (
    // row container that contains the token icon, symbol, name, balance amount, and star icon.
    <div className={styles.tokenRowContainer} {...rest}>
      {/* token icon container. */}
      {/* display default ethereum icon if customIcon is true, else display the relative token icon. */}
      <div className={styles.tokenRowContent} onClick={() => selectToken(data)}>
        <div style={{ width: "13%" }}>
          {customIcon ? (
            <AcyIcon name="eth" />
          ) : (
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                width: '24px',
              }}
            >
              <img
                src={data.logoURI || placeholder}
                alt={data.symbol}
                style={{ maxHeight: '24px', maxWidth: '24px' }}
              />
            </div>
          )}
        </div>

        {/* token symbol container. */}
        <div style={{ width: "17%", color: 'white', fontWeight: '500' }}>{data.symbol}</div>

        <div style={{ width: "70%", display: "flex", justifyContent: "space-between" }}>
          {/* token name container. */}
          <div style={{ minWidth: "20%", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>{data.name}</div>

          {/* token balance container. */}
          <div hidden={hideBalance} style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>{constBal ? constBal : balance}</div>
        </div>
      </div>

      {/* star button for user to set token as favourite. */}
      {/* star jsx is retrieved from heroicons.com. */}
      <div hidden={!showActionButton} className={styles.favButtonContainer} onClick={showActionButton ? clickCallback : null}>
        {actionIcon ? <Icon type={actionIcon} />
          :
          <svg
            xmlns="http://www.w3.org/2000/svg"
            style={{ height: '1.25rem' }}
            className={styles.favButton}
            viewBox="0 0 20 20"
            fill={isFav ? "#EB5C20" : "currentColor"}
          >
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
          </svg>
        }

      </div>
    </div>
  );
}