antd#Slider JavaScript Examples

StyledSlider = styled(Slider)`
  .ant-slider-track {
    background: #929293;
    height: 3px;
  }
  .ant-slider-rail {
    background: #29292c;
    height: 3px;
  }
  .ant-slider-handle {
    background: #929293;
    width: 12px;
    height: 12px;
    border: none;
  }
  .ant-slider-handle-active {
    background: #929293;
    width: 12px;
    height: 12px;
    border: none;
  }
  .ant-slider-dot {
    border: 1.5px solid #29292c;
    border-radius: 1px;
    background: #29292c;
    width: 2px;
    height: 10px;
  }
  .ant-slider-dot-active {
    border: 1.5px solid #929293;
    border-radius: 1px;
    background: #929293;
    width: 2px;
    height: 10px;
  }
  .ant-slider-with-marks {
      margin-bottom: 50px;
  }
`

render() {
    const { disabled } = this.state;
    return (
      <>
        <Slider defaultValue={30} disabled={disabled} />
        <Slider range defaultValue={[20, 50]} disabled={disabled} />
        Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
      </>
    );
  }

function Index() {
  const [radius, setRadius] = useState(defaultValue);
  const module = cornerstoneTools.getModule('segmentation');

  const handleChangeValue = useCallback(value => {
    setRadius(value);
    module.setters.radius(value);
  }, []);

  useEffect(() => {
    module.setters.radius(defaultValue);
  }, []);

  return (
    <div style={styles.wrapper}>
      <i style={styles.radius}>Radius</i>
      <Slider
        defaultValue={radius}
        tooltipVisible
        onChange={handleChangeValue}
        style={styles.slider}
        max={50}
      />
    </div>
  );
}

storiesOf('antd/slider', module).add('event', () => 
  <>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The <code>onChange</code> callback function will fire when the user changes the slider's value. The <code>onAfterChange</code> callback function will fire when <code>onmouseup</code> fired.</p></>) } });

DisplayLabels = (props) => {
  const {
    config, onUpdate, min, max,
  } = props;
  const [newConfig, handleChange] = useUpdateThrottled(onUpdate, config);

  return (
    <Space direction='vertical' style={{ width: '80%' }}>
      <Form
        size='small'
        labelCol={{ span: 12 }}
        wrapperCol={{ span: 12 }}
      >
        <p><strong>Display Gene Labels Above (-log10 pvalue)</strong></p>

        <Form.Item
          label='Min. -log10 pvalue'
        >
          <>  </>
          <Slider
            value={newConfig.textThresholdValue}
            min={min}
            max={max}
            onChange={(value) => {
              handleChange({ textThresholdValue: value });
            }}
          />
        </Form.Item>
      </Form>
    </Space>
  );
}

render() {
    const { disabled } = this.state
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Slider defaultValue={30} disabled={disabled} />
          <Slider range defaultValue={[20, 50]} disabled={disabled} />
          <br />
          <Switch
            unCheckedChildren="enabled"
            checkedChildren="disabled"
            checked={disabled}
            onChange={this.handleDisabledChange}
          />
        </div>
      </div>
    )
  }

function SpaceCustomizeSize() {
  const [size, setSize] = useState(8);

  return (
    <>
      <Slider value={size} onChange={value => setSize(value)} />
      <br />
      <br />
      <Space size={size}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Space>
    </>
  );
}

StyledSlider = styled(Slider)`
  .ant-slider-track {
    background: ${({ theme }) => theme.darksecondary};
  }

  .ant-slider-handle,
  .ant-slider-dot {
    background: ${({ theme }) => theme.darksecondary};
    border-color: ${({ theme }) => theme.primary};
  }
`

render() {
        const {id, disabled, readonly, options, autofocus} = this.props;
        let {value} = this.props;

        if (typeof value === 'undefined' || value === '') {
            value = [];
        }

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


        return (
            <div className={classnames({
                'ant-form-item-control': true,
                'xform-custom-widget': true,
                'xform-custom-slider-range': true,
                'has-error': _errorType !== ''
            })}>
                <Slider
                    range
                    id={id}
                    autoFocus={autofocus}
                    disabled={disabled}
                    readOnly={readonly}
                    value={value}
                    onChange={this.handleSliderChange}
                    onAfterChange={this.handleSliderChange}
                    {...options}
                />
                <div className="ant-form-explain">{validateMessage}</div>
            </div>
        );
    }

render() {
    const { rows } = this.state;
    const article =
      "To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
    return (
      <>
        <Slider value={rows} min={1} max={10} onChange={this.onChange} />
        <Paragraph
          ellipsis={{
            rows,
            expandable: true,
            suffix: '--William Shakespeare',
            onEllipsis: ellipsis => {
              console.log('Ellipsis changed:', ellipsis);
            },
          }}
          title={`${article}--William Shakespeare`}
        >
          {article}
        </Paragraph>
      </>
    );
  }

PointDesign = (props) => {
  const { onUpdate, config } = props;
  const [newConfig, handleChange] = useUpdateThrottled(onUpdate, config);

  return (
    <Space direction='vertical' style={{ width: '80%' }}>
      <Form
        size='small'
        labelCol={{ span: 12 }}
        wrapperCol={{ span: 12 }}
      >
        <p><strong>Point Style</strong></p>
        <Form.Item
          label='Point Size'
        >
          <Slider
            value={newConfig.marker.size}
            min={1}
            max={100}
            onChange={(value) => {
              handleChange({ marker: { size: value } });
            }}
            marks={{ 1: 1, 100: 100 }}
          />
        </Form.Item>

        {config.marker.showOpacity ? (
          <Form.Item
            label='Point Fill Opacity'
          >
            <Slider
              value={newConfig.marker.opacity}
              min={1}
              max={10}
              onChange={(value) => {
                handleChange({ marker: { opacity: value } });
              }}
              marks={{ 1: 1, 10: 10 }}
            />
          </Form.Item>
        ) : <></>}

        <p><strong>Point Shape</strong></p>
        <Form.Item>
          <Radio.Group onChange={(e) => onUpdate({ marker: { shape: e.target.value } })} value={config.marker.shape}>
            <Radio value='circle'>Circle</Radio>
            <Radio value='diamond'>Diamond</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Space>
  );
}

render() {
    const { gutterKey, vgutterKey, colCountKey } = this.state;
    const cols = [];
    const colCount = colCounts[colCountKey];
    let colCode = '';
    for (let i = 0; i < colCount; i++) {
      cols.push(
        <Col key={i.toString()} span={24 / colCount}>
          <div>Column</div>
        </Col>,
      );
      colCode += `  <Col span={${24 / colCount}} />\n`;
    }
    return (
      <>
        <span>Horizontal Gutter (px): </span>
        <div style={{ width: '50%' }}>
          <Slider
            min={0}
            max={Object.keys(gutters).length - 1}
            value={gutterKey}
            onChange={this.onGutterChange}
            marks={gutters}
            step={null}
            tipFormatter={value => gutters[value]}
          />
        </div>
        <span>Vertical Gutter (px): </span>
        <div style={{ width: '50%' }}>
          <Slider
            min={0}
            max={Object.keys(vgutters).length - 1}
            value={vgutterKey}
            onChange={this.onVGutterChange}
            marks={vgutters}
            step={null}
            tipFormatter={value => vgutters[value]}
          />
        </div>
        <span>Column Count:</span>
        <div style={{ width: '50%', marginBottom: 48 }}>
          <Slider
            min={0}
            max={Object.keys(colCounts).length - 1}
            value={colCountKey}
            onChange={this.onColCountChange}
            marks={colCounts}
            step={null}
            tipFormatter={value => colCounts[value]}
          />
        </div>
        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
          {cols}
          {cols}
        </Row>
        Another Row:
        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
      </>
    );
  }

render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Ant design theming examples</h1>
        </header>
        <p className="App-intro">
          Trying out what{" "}
          <a href="https://ant.design/docs/react/customize-theme">the docs</a>{" "}
          tell us.
        </p>
        <p>
          <Select
            defaultValue="lucy"
            size="large"
            onChange={value => console.log(value)}
          >
            <Option value="jack">Jack</Option>

            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </p>
        <p>
          <Radio.Group defaultValue="a" buttonStyle="solid">
            <Radio.Button value="a">Hangzhou</Radio.Button>
            <Radio.Button value="b" disabled>
              Shanghai
            </Radio.Button>
            <Radio.Button value="c">Beijing</Radio.Button>
            <Radio.Button value="d">Chengdu</Radio.Button>
          </Radio.Group>
        </p>
        <p>
          <Slider defaultValue={30} />
        </p>
      </div>
    );
  }

export default function Map({ editabled = false, statusInfo: { gps } = {} }) {
  const [history, setHistory] = useState(store.get("gps history") || []);
  const [defaultLng, defaultLat] = history.length
    ? history[history.length - 1]
    : [117.2, 34.2];
  const { lat = defaultLat, lng = defaultLng } = gps || {};
  const center = [lng, lat];
  const [enabled, setEnabled] = useState(store.get("map enabled"));
  const [zoom, setZoom] = useState(store.get("map zoom") || 15);

  useEffect(() => {
    console.log("GPS", { lat, lng });
    console.log("history", history);
    const { length } = history;
    if (
      length === 0 ||
      lng !== history[length - 1][0] ||
      lat !== history[length - 1][1]
    ) {
      const newHistory = [...history, [lng, lat]]
        .filter(([lng, lat]) => lat !== undefined && lng !== undefined)
        .slice(0, 1000);
      console.log("newHistory", newHistory);
      setHistory(newHistory);
      store.set("gps history", newHistory);
    }
  }, [lat, lng, history]);

  useEffect(() => {
    store.set("map enabled", enabled);
  }, [enabled]);

  useEffect(() => {
    store.set("map zoom", zoom);
  }, [zoom]);

  return (
    <div className={styles.mapContainer}>
      {editabled ? (
        <div className={styles.editor}>
          <Space size="small" align="center" gutter={8}>
            <Switch onChange={setEnabled} checked={enabled} />
            <Button onClick={() => setHistory([])}>清空</Button>
          </Space>
        </div>
      ) : null}
      {enabled && (
        <>
          <Slider
            className={styles.zoom}
            min={2}
            max={20}
            value={zoom}
            onChange={(v) => setZoom(v)}
          />
          <Amap zoom={zoom} center={center}>
            <Marker
              position={center}
              label={{
                direction: "bottom",
              }}
              draggable
            />
            <Polyline path={history} />
          </Amap>
        </>
      )}
    </div>
  );
}

storiesOf('antd/slider', module).add('tip-formatter', () => 
  <>
    <Slider tipFormatter={formatter} />
    <Slider tipFormatter={null} />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use <code>tipFormatter</code> to format content of <code>Tooltip</code>. If <code>tipFormatter</code> is null, hide it.</p></>) } });

SliderWithInput = (props) => {
  const {
    min, max, value, onUpdate, disabled, step,
  } = props;

  const [, handleChange] = useUpdateThrottled(onUpdate, value);

  const [localValue, setLocalValue] = useState(value);

  const debouncedOnChange = useCallback(
    _.debounce((changedValue) => handleChange(changedValue), 1000), [],
  );

  useEffect(() => {
    setLocalValue(parseFloat(value));
  }, [value]);

  const stepToSet = step ?? max / 200;

  return (
    <div style={{ display: 'flex', whiteSpace: 'nowrap' }}>
      <Slider
        value={localValue}
        min={min}
        max={max}
        onChange={setLocalValue}
        onAfterChange={() => handleChange(localValue)}
        step={stepToSet}
        disabled={disabled}
        style={{ minWidth: 100, display: 'inline-block', flexGrow: 100 }}
      />

      <InputNumber
        value={localValue}
        min={min}
        max={max}
        onChange={(changedValue) => {
          if (changedValue === value) { return; }

          const changedValueWithinBounds = Math.min(Math.max(changedValue, min), max);

          setLocalValue(changedValueWithinBounds);

          debouncedOnChange(changedValueWithinBounds);
        }}
        onPressEnter={() => { handleChange(localValue); }}
        onStep={(newValue) => {
          handleChange(newValue);
        }}
        step={stepToSet}
        disabled={disabled}
        style={{ width: 80, display: 'inline-block' }}
      />
    </div>
  );
}

export default function UISetting({ saveServerConfig, serverConfig }) {
  const { channelList = [] } = serverConfig;
  return (
    <Form {...layout} onFinish={saveServerConfig} initialValues={serverConfig}>
      <Form.Item
        label="油门通道"
        name={["specialChannel", "speed"]}
        extra="自动刹车需要正确设置此通道"
      >
        <Select>
          {channelList
            .filter(({ type }) => type === "pwm")
            .map(({ id, name, pin }) => (
              <Option value={id} key={id}>
                {" "}
                {name}(GPIO:{pin}){" "}
              </Option>
            ))}
        </Select>
      </Form.Item>
      <Form.Item label="方向通道" name={["specialChannel", "direction"]}>
        <Select>
          {channelList
            .filter(({ type }) => type === "pwm")
            .map(({ id, name, pin }) => (
              <Option value={id} key={id}>
                {" "}
                {name}(GPIO:{pin}){" "}
              </Option>
            ))}
        </Select>
      </Form.Item>
      <Form.Item
        label="自动刹车延迟阀值"
        name="autoLockTime"
        extra="毫秒，网络延迟超过设定值时刹车"
      >
        <Slider max={3000} />
      </Form.Item>
      <Form.Item
        label="延迟刹车时长"
        name="brakeTime"
        extra="毫秒，设为 0 时仅复位通道"
      >
        <Slider max={1000} />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          保存
        </Button>
      </Form.Item>
    </Form>
  );
}

storiesOf('antd/slider', module).add('show-tooltip', () => <Slider defaultValue={30} tooltipVisible />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>When <code>tooltipVisible</code> is <code>true</code>, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.</p></>) } });

render() {
        return (
            <div>
                <div id="player">

                    <div id="display">
                        <div className="notification-container">
                            <div className="seek-notification">
                            </div>
                        </div>
                    </div>

                    <Row justify="space-around" align="middle" style={{marginLeft: 7, marginRight: 7, marginTop: 3}}
                         gutter={[5, 5]}>
                        <Col flex="none">
                            <Tooltip title={this.state.playPauseIconTitle}>
                                <Button size='small' onClick={this.handlePlayPause} icon={this.state.playPauseIcon}/>
                            </Tooltip>
                        </Col>
                        <Col flex="auto">
                            <Slider value={this.state.percent} max={this.state.max} tooltipVisible={false}
                                    onChange={this.handleProgressChange}/>
                        </Col>
                        <Col flex='none'>
                            <Select size={'small'} defaultValue='1' value={this.state.speed} onChange={(value) => {
                                value = parseInt(value)
                                this.setState({
                                    'speed': value
                                });
                                if (value === 1) {
                                    this.stopSpeedUp();
                                } else {
                                    this.startSpeedUp();
                                }
                            }}>
                                <Select.Option key="1" value={1}>1x</Select.Option>
                                <Select.Option key="2" value={2}>2x</Select.Option>
                                <Select.Option key="5" value={5}>5x</Select.Option>
                            </Select>
                        </Col>
                        <Col flex='none'>
                            <Text>{this.state.position}</Text>/ <Text>{this.state.duration}</Text>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }

VolcanoDimensionsRangeEditor = (props) => {
  const {
    config, onUpdate, yMax, xMax,
  } = props;
  const [newConfig, handleChange] = useUpdateThrottled(onUpdate, config);

  const rangeFormatter = (value) => (value === 0 ? 'Auto' : value.toString());

  // yMin has to be set to reasonable value to avoid plot blowing up
  // when yMin is too small and the max data value is too high
  const yMin = Math.round(0.3 * yMax);

  return (
    <Space direction='vertical' style={{ width: '80%' }}>
      <DimensionsRangeEditor
        config={config}
        onUpdate={onUpdate}
      />
      <Form.Item
        label='Y-Axis Range'
      >
        <Checkbox
          onChange={() => {
            onUpdate({ yAxisAuto: !config.yAxisAuto });
          }}
          defaultChecked
          checked={config.yAxisAuto}
        >
          Auto
        </Checkbox>
        <Slider
          value={newConfig.maxNegativeLogpValueDomain}
          min={yMin}
          max={yMax}
          onChange={(value) => {
            handleChange({ maxNegativeLogpValueDomain: value });
          }}
          disabled={config.yAxisAuto}
        />
      </Form.Item>
      <Form.Item
        label='X-Axis Range'
      >
        <Checkbox
          onChange={() => {
            onUpdate({ xAxisAuto: !config.xAxisAuto });
          }}
          checked={config.xAxisAuto}
          defaultChecked
        >
          Auto
        </Checkbox>
        <Slider
          value={newConfig.logFoldChangeDomain}
          min={1}
          max={xMax}
          tipFormatter={rangeFormatter}
          onChange={(value) => {
            handleChange({ logFoldChangeDomain: value });
          }}
          disabled={config.xAxisAuto}
        />
      </Form.Item>

    </Space>
  );
}

TestEffectTable = (props) => {
  const { t } = useTranslation();
  const getMaxLevel = (rarity) => {
    switch (rarity) {
      case 1:
        return 40;
      case 2:
        return 45;
      case 3:
        return 50;
      default:
        return 1;
    }
  };
  const maxLevel = getMaxLevel(props.rarity);
  const [selectingLevel, setSelectingLevel] = React.useState(maxLevel);
  const calc = (data, input) => {
    let nodes = [];
    let output = 0;
    let prevNode = { level: 0, value: 0 };
    for (let i = 0; i < data.length; i += 1) {
      if (data[i] !== -1) {
        let level = i * 5;
        if (level === 0) {
          level = 1;
        }
        nodes.push({ level: level, value: data[i] });
        prevNode = { level: level, value: data[i] };
      }
      if (i === data.length - 1 && data[i] === -1) {
        nodes.push({ level: maxLevel, value: prevNode.value });
      }
    }
    nodes.push({ level: 999, value: prevNode.value }); // 以后万一出SSSR？确保一定能找到区间。

    const level = Math.floor(input);
    let upperNode = { level: 0, value: 0 };
    let lowerNode = { level: 0, value: 0 };
    if (level < 0 || level > maxLevel) {
      output = 0;
    } else if (level < nodes[0].level) {
      output = 0;
    } else {
      for (let i = 0; i < nodes.length; i += 1) {
        if (level >= nodes[i].level && level < nodes[i + 1].level) {
          lowerNode = nodes[i];
          upperNode = nodes[i + 1] || nodes[i];
          break;
        }
      }
      output = Math.floor(
        ((upperNode.value - lowerNode.value) / (upperNode.level - lowerNode.level)) *
          (level - lowerNode.level) +
          lowerNode.value
      );
    }

    return output;
  };
  const db = useDB();
  if (!db) return null;
  const effects = db.get("effects").value();
  return (
    <div>
      {props.unique_effect && (
        <>
          <div className="flex w-full items-center justify-between p-2">
            <div>{t("固有效果")}</div>
            <div>{`${t("激活等级")}:${props.unique_effect.lv}`}</div>
          </div>
          <div className="w-full grid grid-cols-2 gap-2">
            {["0", "1"].map((index) =>
              props.unique_effect[`type_${index}`] ? (
                <div
                  key={index}
                  className="col-span-1 flex items-center rounded-xl border border-solid bg-green-300 border-green-500"
                >
                  <div
                    className="flex-auto truncate pl-2"
                    data-tip={`<div><p>${
                      effects[props.unique_effect[`type_${index}`]]?.name
                    }</p><p>${t(effects[props.unique_effect[`type_${index}`]]?.name)}</p><p>${
                      effects[props.unique_effect[`type_${index}`]]?.description
                    }</p><p>${t(
                      effects[props.unique_effect[`type_${index}`]]?.description
                    )}</p></div>`}
                  >
                    {t(effects[props.unique_effect[`type_${index}`]]?.name)}
                  </div>
                  <div className="bg-white h-full w-10 md:w-24 rounded-r-xl pl-2 flex items-center flex-shrink-0">
                    {props.unique_effect[`value_${index}`]}
                  </div>
                </div>
              ) : null
            )}
          </div>
        </>
      )}
      <div className="w-full flex items-center">
        <div className="mr-2">{t("设置等级")}</div>
        <Slider
          className="flex-auto"
          min={1}
          max={maxLevel}
          value={selectingLevel}
          onChange={(value) => {
            setSelectingLevel(value);
          }}
          marks={getEffectMark(maxLevel)}
        />
      </div>
      <div className="w-full grid grid-cols-2 gap-2 ">
        {props.effects?.map((item, index) => {
          const data = [
            item.init,
            item.limit_lv5,
            item.limit_lv10,
            item.limit_lv15,
            item.limit_lv20,
            item.limit_lv25,
            item.limit_lv30,
            item.limit_lv35,
            item.limit_lv40,
            item.limit_lv45,
            item.limit_lv50,
          ].filter((item) => item);
          return (
            <div
              key={item.type}
              className="col-span-1 flex items-center rounded-xl border border-solid bg-green-300 border-green-500"
            >
              <div
                className="flex-auto truncate pl-2"
                data-tip={`<div><p>${effects[item.type].name}</p><p>${t(
                  effects[item.type].name
                )}</p><p>${effects[item.type].description}</p><p>${t(
                  effects[item.type].description
                )}</p></div>`}
              >
                {t(effects[item.type].name)}
              </div>
              <div className="bg-white h-full w-10 md:w-24 rounded-r-xl pl-2 flex items-center flex-shrink-0">
                {calc(data, selectingLevel)}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

OptionComponent = props => {

  const {
    mode,
    setMode,
    volume,
    setVolume,
    percentage,
    setPercentage,
  } = props

  const {
    account,
    library,
    chainId,
  } = useConstantLoader(props);

  const optionMode = ['Buy', 'Sell']
  const modeSelect = mode => {
    setMode(mode)
  }

  const [leverageOption, setLeverageOption] = useLocalStorageSerializeKey([chainId, "Option-leverage-value"], "2");
  const leverageMarks = {
    1: {
      style: { color: '#b5b6b6', },
      label: '1x'
    },
    5: {
      style: { color: '#b5b6b6', },
      label: '5x'
    },
    10: {
      style: { color: '#b5b6b6', },
      label: '10x'
    },
    15: {
      style: { color: '#b5b6b6', },
      label: '15x'
    },
    20: {
      style: { color: '#b5b6b6', },
      label: '20x'
    },
    25: {
      style: { color: '#b5b6b6', },
      label: '25x'
    },
    30: {
      style: { color: '#b5b6b6', },
      label: '30x'
    }
  };
  const StyledSlider = styled(Slider)`
  .ant-slider-track {
    background: #929293;
    height: 3px;
  }
  .ant-slider-rail {
    background: #29292c;
    height: 3px;
  }
  .ant-slider-handle {
    background: #929293;
    width: 12px;
    height: 12px;
    border: none;
  }
  .ant-slider-handle-active {
    background: #929293;
    width: 12px;
    height: 12px;
    border: none;
  }
  .ant-slider-dot {
    border: 1.5px solid #29292c;
    border-radius: 1px;
    background: #29292c;
    width: 2px;
    height: 10px;
  }
  .ant-slider-dot-active {
    border: 1.5px solid #929293;
    border-radius: 1px;
    background: #929293;
    width: 2px;
    height: 10px;
  }
  .ant-slider-with-marks {
      margin-bottom: 50px;
  }
`;

  const getPercentageButton = value => {
    if (percentage != value) {
      return (
        <button
          className={styles.percentageButton}
          onClick={() => { setPercentage(value) }}>
          {value}
        </button>
      )
    } else {
      return (
        <button
          className={styles.percentageButtonActive}
          onClick={() => { setPercentage(value) }}>
          {value}
        </button>
      )
    }
  }

  const getPrimaryText = () => {
    if (mode == 'Buy') {
      return 'Buy / Long'
    } else {
      return 'Sell / Short'
    }
  }

  const onClickPrimary = () => {

  }

  return (
    <div className={styles.main}>
      <AcyPerpetualCard style={{ backgroundColor: 'transparent', border: 'none', margin: '-8px' }}>
        <div className={styles.modeSelector}>
          <PerpetualTabs
            option={mode}
            options={optionMode}
            onChange={modeSelect}
          />
        </div>

        <div className={styles.rowFlexContainer}>
          <span className={styles.title}>Set Volume</span>

          <div className={styles.inputContainer}>
            <input
              type="number"
              min="0"
              placeholder="0.0"
              className={styles.optionInput}
              value={volume}
              onChange={e => { setVolume(e.target.value) }}
            />
            <span className={styles.inputLabel}>USD</span>
          </div>

          <AcyDescriptions>
            <div className={styles.leverageContainer}>
              <div className={styles.slippageContainer}>
                <div className={styles.leverageLabel}>
                  <span>Leverage</span>
                  <div className={styles.leverageInputContainer}>
                    <button
                      className={styles.leverageButton}
                      onClick={() => {
                        if (leverageOption > 0.1) {
                          setLeverageOption((parseFloat(leverageOption) - 0.1).toFixed(1))
                        }
                      }}
                    >
                      <span> - </span>
                    </button>
                    <input
                      type="number"
                      min={0.1}
                      max={30.5}
                      value={leverageOption}
                      onChange={e => {
                        let val = parseFloat(e.target.value.replace(/^(-)*(\d+)\.(\d).*$/, '$1$2.$3')).toFixed(1)
                        if (val >= 0.1 && val <= 30.5) {
                          setLeverageOption(val)
                        }
                      }}
                      className={styles.leverageInput}
                    />
                    <button
                      className={styles.leverageButton}
                      onClick={() => {
                        if (leverageOption < 30.5) {
                          setLeverageOption((parseFloat(leverageOption) + 0.1).toFixed(1))
                        }
                      }}
                    >
                      <span> + </span>
                    </button>
                  </div>
                </div>
              </div>
              <StyledSlider
                min={0.1}
                max={30.5}
                step={0.1}
                marks={leverageMarks}
                value={leverageOption}
                onChange={value => setLeverageOption(value)}
                defaultValue={leverageOption}
              />
            </div>
          </AcyDescriptions>

          <div className={styles.buttonContainer}>
            {getPercentageButton('25%')}
            {getPercentageButton('50%')}
            {getPercentageButton('75%')}
            {getPercentageButton('100%')}
          </div>
          <AcyPerpetualButton
            style={{ margin: '25px 0 0 0', width: '100%' }}
            onClick={onClickPrimary}
          >
            {getPrimaryText()}
          </AcyPerpetualButton>

        </div>
      </AcyPerpetualCard>
    </div>
  );
}

export default function ExampleUI({
  purpose,
  setPurposeEvents,
  address,
  mainnetProvider,
  userProvider,
  localProvider,
  yourLocalBalance,
  price,
  tx,
  readContracts,
  writeContracts,
}) {
  const [newPurpose, setNewPurpose] = useState("loading...");

  return (
    <div>
      {/*
        ⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
      */}
      <div style={{ border: "1px solid #cccccc", padding: 16, width: 400, margin: "auto", marginTop: 64 }}>
        <h2>Example UI:</h2>
        <h4>purpose: {purpose}</h4>
        <Divider />
        <div style={{ margin: 8 }}>
          <Input
            onChange={e => {
              setNewPurpose(e.target.value);
            }}
          />
          <Button
            onClick={() => {
              console.log("newPurpose", newPurpose);
              /* look how you call setPurpose on your contract: */
              tx(writeContracts.YourContract.setPurpose(newPurpose));
            }}
          >
            Set Purpose
          </Button>
        </div>
        <Divider />
        Your Address:
        <Address address={address} ensProvider={mainnetProvider} fontSize={16} />
        <Divider />
        ENS Address Example:
        <Address
          address="0x34aA3F359A9D614239015126635CE7732c18fDF3" /* this will show as austingriffith.eth */
          ensProvider={mainnetProvider}
          fontSize={16}
        />
        <Divider />
        {/* use formatEther to display a BigNumber: */}
        <h2>Your Balance: {yourLocalBalance ? formatEther(yourLocalBalance) : "..."}</h2>
        <div>OR</div>
        <Balance address={address} provider={localProvider} price={price} />
        <Divider />
        <div>? Example Whale Balance:</div>
        <Balance balance={parseEther("1000")} provider={localProvider} price={price} />
        <Divider />
        {/* use formatEther to display a BigNumber: */}
        <h2>Your Balance: {yourLocalBalance ? formatEther(yourLocalBalance) : "..."}</h2>
        <Divider />
        Your Contract Address:
        <Address
          address={readContracts ? readContracts.YourContract.address : readContracts}
          ensProvider={mainnetProvider}
          fontSize={16}
        />
        <Divider />
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /* look how you call setPurpose on your contract: */
              tx(writeContracts.YourContract.setPurpose("? Cheers"));
            }}
          >
            Set Purpose to &quot;? Cheers&quot;
          </Button>
        </div>
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /*
              you can also just craft a transaction and send it to the tx() transactor
              here we are sending value straight to the contract's address:
            */
              tx({
                to: writeContracts.YourContract.address,
                value: parseEther("0.001"),
              });
              /* this should throw an error about "no fallback nor receive function" until you add it */
            }}
          >
            Send Value
          </Button>
        </div>
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /* look how we call setPurpose AND send some value along */
              tx(
                writeContracts.YourContract.setPurpose("? Paying for this one!", {
                  value: parseEther("0.001"),
                }),
              );
              /* this will fail until you make the setPurpose function payable */
            }}
          >
            Set Purpose With Value
          </Button>
        </div>
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /* you can also just craft a transaction and send it to the tx() transactor */
              tx({
                to: writeContracts.YourContract.address,
                value: parseEther("0.001"),
                data: writeContracts.YourContract.interface.encodeFunctionData("setPurpose(string)", [
                  "? Whoa so 1337!",
                ]),
              });
              /* this should throw an error about "no fallback nor receive function" until you add it */
            }}
          >
            Another Example
          </Button>
        </div>
      </div>

      {/*
        ? Maybe display a list of events?
          (uncomment the event and emit line in YourContract.sol! )
      */}
      <div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
        <h2>Events:</h2>
        <List
          bordered
          dataSource={setPurposeEvents}
          renderItem={item => {
            return (
              <List.Item key={item.blockNumber + "_" + item.sender + "_" + item.purpose}>
                <Address address={item[0]} ensProvider={mainnetProvider} fontSize={16} /> =&gt
                {item[1]}
              </List.Item>
            );
          }}
        />
      </div>

      <div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 256 }}>
        <Card>
          Check out all the{" "}
          <a
            href="https://github.com/austintgriffith/scaffold-eth/tree/master/packages/react-app/src/components"
            target="_blank"
            rel="noopener noreferrer"
          >
            ? components
          </a>
        </Card>

        <Card style={{ marginTop: 32 }}>
          <div>
            There are tons of generic components included from{" "}
            <a href="https://ant.design/components/overview/" target="_blank" rel="noopener noreferrer">
              ? ant.design
            </a>{" "}
            too!
          </div>

          <div style={{ marginTop: 8 }}>
            <Button type="primary">Buttons</Button>
          </div>

          <div style={{ marginTop: 8 }}>
            <SyncOutlined spin /> Icons
          </div>

          <div style={{ marginTop: 8 }}>
            Date Pickers?
            <div style={{ marginTop: 2 }}>
              <DatePicker onChange={() => {}} />
            </div>
          </div>

          <div style={{ marginTop: 32 }}>
            <Slider range defaultValue={[20, 50]} onChange={() => {}} />
          </div>

          <div style={{ marginTop: 32 }}>
            <Switch defaultChecked onChange={() => {}} />
          </div>

          <div style={{ marginTop: 32 }}>
            <Progress percent={50} status="active" />
          </div>

          <div style={{ marginTop: 32 }}>
            <Spin />
          </div>
        </Card>
      </div>
    </div>
  );
}

render() {
    const self = this;

    const speeds = ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"];

    return (
      <div>
        <div id="wave" ref={this.setWaveformRef} className={styles.wave} />

        <div id="timeline" />

        {this.props.zoom && (
          <Row gutter={16} style={{ marginTop: "1em" }}>
            <Col flex={8} style={{ textAlign: "right", marginTop: "6px" }}>
              <div style={{ display: "flex" }}>
                <div style={{ marginTop: "6px", marginRight: "5px" }}>
                  <Tooltip placement="topLeft" title="Horizontal zoom out">
                    <ZoomOutOutlined onClick={this.onZoomMinus} className={globalStyles.link} />
                  </Tooltip>
                </div>
                <div style={{ width: "100%" }}>
                  <Slider
                    min={0}
                    step={10}
                    max={500}
                    value={typeof this.state.zoom === "number" ? this.state.zoom : 0}
                    onChange={value => {
                      this.onChangeZoom(value);
                    }}
                  />
                </div>
                <div style={{ marginTop: "6px", marginLeft: "5px" }}>
                  <Tooltip placement="topLeft" title="Horizontal zoom in">
                    <ZoomInOutlined onClick={this.onZoomPlus} className={globalStyles.link} />
                  </Tooltip>
                </div>
              </div>
            </Col>
            <Col flex={4} style={{ textAlign: "right", marginTop: "6px" }}>
              <div style={{ display: "flex" }}>
                <div style={{ marginTop: "6px", marginRight: "5px" }}>
                  <Tooltip placement="topLeft" title="Vertical zoom out">
                    <ZoomOutOutlined onClick={this.onZoomYMinus} className={globalStyles.link} />
                  </Tooltip>
                </div>
                <div style={{ width: "100%" }}>
                  <Slider
                    min={MIN_ZOOM_Y}
                    step={.1}
                    max={MAX_ZOOM_Y}
                    value={typeof this.state.zoomY === "number" ? this.state.zoomY : MIN_ZOOM_Y}
                    onChange={value => {
                      this.onChangeZoomY(value);
                    }}
                  />
                </div>
                <div style={{ marginTop: "6px", marginLeft: "5px" }}>
                  <Tooltip placement="topLeft" title="Vertical zoom in">
                    <ZoomInOutlined onClick={this.onZoomYPlus} className={globalStyles.link} />
                  </Tooltip>
                </div>
              </div>
            </Col>
            <Col flex={3}>
              {this.props.volume && (
                <div style={{ display: "flex", marginTop: "6.5px" }}>
                  <div style={{ width: "100%" }}>
                    <Slider
                      min={0}
                      max={1}
                      step={0.1}
                      value={typeof this.state.volume === "number" ? this.state.volume : 1}
                      onChange={value => {
                        this.onChangeVolume(value);
                      }}
                    />
                  </div>
                  <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                    <SoundOutlined />
                  </div>
                </div>
              )}
            </Col>
            <Col flex={1} style={{ marginTop: "6px" }}>
              {this.props.speed && (
                <Select
                  placeholder="Speed"
                  style={{ width: "100%" }}
                  defaultValue={this.state.speed}
                  onChange={self.onChangeSpeed}
                >
                  {speeds.map(speed => (
                    <Select.Option value={+speed} key={speed}>
                      Speed {speed}
                    </Select.Option>
                  ))}
                </Select>
              )}
            </Col>
          </Row>
        )}
      </div>
    );
  }

function InfoHeader(props) {
    const [isFold, setIsFold] = useState(false)
    const [timeRange, setTimeRange] = useState(8)
    const [displayList, setDisplayList] = useState([])
    const [selectedId, setSelectedId] = useState('')
    const [dataSource, setDataSource] = useState('weibo')
    const [types, setTypes] = useState([])

    useEffect(() => {
        if (props.bounds == null) return

        const list = props.list.filter(e => props.bounds.containsPoint(e.location))
        setDisplayList(list)
    }, [props.list, props.bounds])

    const onLeftFold = useCallback((e) => {
        e.stopPropagation();
        setIsFold(!isFold);
    }, [isFold])
    

    const handleSliderChange = (value) => {
        setTimeRange(value)
        props.notifySliderChange(value)
    }

    const handleItemClicked = (item) => {
        setSelectedId(item.id)
        props.handleItemClick(item)
    }

    let handleSouceSwitched = (event) => {
        setDataSource(event.target.value)
        props.notifyDataSourceSwitch(event.target.value)
    }

    let souceSwitch = () => {
        return <Row className="source-switch" justify="center">
            <Col style={{ marginTop: 5 }}>信息来源：</Col>
            <Col>
                <Radio.Group defaultValue="weibo" buttonStyle="solid" onChange={handleSouceSwitched}>
                <Radio.Button value="weibo">微博</Radio.Button>
                <Radio.Button value="sheet">在线表格</Radio.Button>
            </Radio.Group></Col>
        </Row>
    }

    let headerText = () => {
        if (dataSource === 'weibo') {
            return <label>本网站仅聚合新浪微博上发布的
                有关2021年7月河南暴雨的求助信息，请大家注意辨别信息真伪。
                点击标记点可以看到更多信息及原微博地址。</label>
        } else {
            return <label>在线表格信息来源于志愿者们手工整理有关2021年7月河南暴雨的求助信息, 跳转到
                <a href="https://u9u37118bj.feishu.cn/sheets/shtcnemn0sOgZ5Y9Cvp027wHWYd?from=from_copylink" target="_blank" rel="noreferrer">文档地址</a>
                (由于有的信息地址不全，地图上的位置可能会有出入) </label>
        }
    }

    const handleCategoryChange = (value) => {
        setTypes(CATEGORY_MAP[value] || [])
        props.notifyCategoryChange(value)
    }

    const categories = Object.keys(CATEGORY_MAP)

    let slider = () => {
        if (dataSource === 'sheet') {
            return null
        }

        let labelText = "最近" + timeRange + "小时";
        if (timeRange === 12) {
            labelText = "全部记录"
        }
        return <div className="slider-container">
            <Row justify="center" align="middle">
                <Col span={12}>
                    <Slider defaultValue={8} step={2} min={2} max={12} onAfterChange={handleSliderChange}/>
                </Col>
                <Col className="label-col" span={6}>
                    <label>{labelText}</label>
                </Col>
            </Row>
            <div className="info-button-list">
                <Button type="primary" href="https://u9u37118bj.feishu.cn/docs/doccn3QzzbeQLPQwNSb4Hcl2X1g" target="_blank">关于我们</Button>
                <Button type="primary" href="https://u9u37118bj.feishu.cn/sheets/shtcnh4177SPTo2N8NglZHCirDe" target="_blank">实时数据表格</Button>
                <Button type="primary" href="https://www.wjx.cn/vj/PZb53C6.aspx" target="_blank">需求反馈</Button>
            </div>
        </div>
    }

    return (
            <div className="info-container" data-fold={isFold}>
                <div className="info" data-fold={isFold}>
                    {souceSwitch()}
                    <div>{headerText()}</div>
                    <br />
                    {slider()}
                </div>
            <div className="info-list-header">
                <Input placeholder="搜索"
                       className="info-list-search"
                       value={props.keyword}
                       onChange={ e => props.notifyKeywordChange(e.target.value) }
                       allowClear
                       prefix={<SearchOutlined className="info-list-search-icon"/>}
                       style={{ }}
                />
                <Select defaultValue='' className="info-list-category" style={{}} onChange={handleCategoryChange}>
                    <Option value={''}>全选</Option>
                    { categories.map(category => <Option value={category} key={category}>{category}</Option>) }
                </Select>
                <Select mode="multiple"
                        className="info-list-types"
                        value={props.selectedTypes}
                        defaultValue={[]}
                        showSearch={false}
                        allowClear
                        style={{ }}
                        disabled={types.length === 0}
                        onChange={value => props.notifyTypesChange(value)}>
                    {types.map(type => (
                      <Option key={type}>{type}</Option>
                    ))}
                </Select>
            </div>
            <List
                className="info-list"
                itemLayout="horizontal"
                bordered
                dataSource={displayList}
                locale={ { emptyText: props.defaultText } }
                renderItem={item => (
                    <List.Item key={item.id} className={item.id === selectedId ? "selected-item" : ''} onClick={ () => { handleItemClicked(item) } }>
                        <InfoItem info={item} handleCorrection={props.handleCorrection}/>
                    </List.Item>
                )}
                />
                <div className="left-fold" data-fold={isFold} onClick={onLeftFold}>{LEFT_FOLD}</div>
            </div>
    )
}

SubscriptionCard = (props) =>  {

  const {
    errors,
    subscription: {
      stateId,
      districtId,
      vaccine,
      ageGroup,
      districts,
      districtLoader,
      pincodeDistance,
      pincode,
      dose,
    }
  } = props;
  return (
    <Card className='margin--bottom border-round' bodyStyle={{paddingLeft: '12px', paddingRight: '12px'}}>
      <CloseCircleFilled
        className='f18'
        style={{position: 'absolute', top: '-3%', right: '-2%', color: '#8B0000' }}
        onClick={() => props.onRemoveSubscription()}
      />
      <>
      <div className='label'> Vaccination Type: </div>
      <Radio.Group className='width-100' value={vaccine} onChange={(e) => props.onChangeSubscriptionField({'vaccine': e.target.value })}>
          <Radio.Button style={{width: '22%' }} className='f10 margin-half--right center' value="covaxin">Covaxin</Radio.Button>
          <Radio.Button style={{width: '22%' }} className='f10 margin-half--right center' value="covishield">Covishield</Radio.Button>
          <Radio.Button style={{width: '22%' }} className='f10 margin-half--right center' value="sputnik v">SputnikV</Radio.Button>
          <Radio.Button style={{width: '22%' }} className='f10 center' value="both">All</Radio.Button>
        </Radio.Group>
        <div className='label'> Age Group: </div>
        <Radio.Group className='width-100' value={ageGroup} onChange={(e) => props.onChangeSubscriptionField({'ageGroup': e.target.value })}>
          <Radio.Button style={{width: '29.8%' }}  className='f10 margin-half--right center' value="above_18">18-45</Radio.Button>
          <Radio.Button style={{width: '29.8%' }} className='f10 margin-half--right center' value="above_45">Above-45</Radio.Button>
          <Radio.Button style={{width: '29.8%' }} className='f10 center' value="both">Both</Radio.Button>
        </Radio.Group>
        <div className='label'> Dose: </div>
        <Radio.Group className='width-100' value={dose} onChange={(e) => props.onChangeSubscriptionField({'dose': e.target.value })}>
          <Radio.Button style={{width: '45.5%' }}  className='f10 margin-half--right center' value="dose_1">Dose-1</Radio.Button>
          <Radio.Button style={{width: '45.5%' }} className='f10 margin-half--right center' value="dose_2">Dose-2</Radio.Button>
        </Radio.Group>
      </>
      <div className='label'> Select a type of subscription: </div>
      <Tabs onChange={(value) => props.onChangeSubscriptionField({ type: value })} type="card">
        <TabPane tab="Pincode Based" key="pincode">
          <div className='padding-double--sides'>
            <div className='label'>Pincode:</div>
            <ErrorMessage message={errors.pincode} />
            <Input autoComplete='off' name='pincode' block='true' value={pincode} onChange={(e) => props.onChangeSubscriptionField({'pincode': e.target.value})} />
            <div className='label'> Distance Radius from Pincode (in Km): </div>
            <Slider
              marks={distanceSliderMarks}
              step={null}
              defaultValue={5}
              value={pincodeDistance}
              max={50}
              min={5}
              onChange={(value) => props.onChangeSubscriptionField({'pincodeDistance': value})}
            />
          </div>
        </TabPane>
        <TabPane tab="District Based" key="district">
          <div className='padding-double--sides'>
            <Row>
              <Col span={12}>
                <div className='label'> State: </div>
                <Select value={stateId} style={{ width: '90%' }} onChange={(value) => {
                  props.onChangeSubscriptionField({'stateId': value});
                  props.fetchDistricts(value);
                }}>
                  {
                    props.states.length === 0 ?
                    <Option key={-99999}> <Loader />  </Option> :
                    props.states.map((state, index) => {
                      return (
                        <Option key={index} value={state.stateId}> {state.stateName} </Option>
                      )
                    })
                  }
                </Select>
                <ErrorMessage message={errors.stateId} />
              </Col>
              <Col span={12}>
                <div className='label'> District: </div>
                <Select value={districtId} style={{ width: '90%' }} onChange={(value) => {
                  props.onChangeSubscriptionField({'districtId': value});
                }}>
                  {
                    districtLoader ?
                    <Option key={-99999}> <Loader />  </Option> :
                    districts.map((district, index) => {
                      return (
                        <Option key={index} value={district.districtId}> {district.districtName} </Option>
                      )
                    })
                  }
                </Select>
                <ErrorMessage message={errors.districtId} />
              </Col>
            </Row>
          </div>
        </TabPane>
      </Tabs>
    </Card>
  );
}

export default function ExampleUI({
  purpose,
  setPurposeEvents,
  address,
  mainnetProvider,
  localProvider,
  yourLocalBalance,
  price,
  tx,
  readContracts,
  writeContracts,
}) {
  const [newPurpose, setNewPurpose] = useState("loading...");

  return (
    <div>
      {/*
        ⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
      */}
      <div style={{ border: "1px solid #cccccc", padding: 16, width: 400, margin: "auto", marginTop: 64 }}>
        <h2>Example UI:</h2>
        <h4>purpose: {purpose}</h4>
        <Divider />
        <div style={{ margin: 8 }}>
          <Input
            onChange={e => {
              setNewPurpose(e.target.value);
            }}
          />
          <Button
            style={{ marginTop: 8 }}
            onClick={async () => {
              /* look how you call setPurpose on your contract: */
              /* notice how you pass a call back for tx updates too */
              const result = tx(writeContracts.YourContract.setPurpose(newPurpose), update => {
                console.log("? Transaction Update:", update);
                if (update && (update.status === "confirmed" || update.status === 1)) {
                  console.log(" ? Transaction " + update.hash + " finished!");
                  console.log(
                    " ⛽️ " +
                      update.gasUsed +
                      "/" +
                      (update.gasLimit || update.gas) +
                      " @ " +
                      parseFloat(update.gasPrice) / 1000000000 +
                      " gwei",
                  );
                }
              });
              console.log("awaiting metamask/web3 confirm result...", result);
              console.log(await result);
            }}
          >
            Set Purpose!
          </Button>
        </div>
        <Divider />
        Your Address:
        <Address address={address} ensProvider={mainnetProvider} fontSize={16} />
        <Divider />
        ENS Address Example:
        <Address
          address="0x34aA3F359A9D614239015126635CE7732c18fDF3" /* this will show as austingriffith.eth */
          ensProvider={mainnetProvider}
          fontSize={16}
        />
        <Divider />
        {/* use utils.formatEther to display a BigNumber: */}
        <h2>Your Balance: {yourLocalBalance ? utils.formatEther(yourLocalBalance) : "..."}</h2>
        <div>OR</div>
        <Balance address={address} provider={localProvider} price={price} />
        <Divider />
        <div>? Example Whale Balance:</div>
        <Balance balance={utils.parseEther("1000")} provider={localProvider} price={price} />
        <Divider />
        {/* use utils.formatEther to display a BigNumber: */}
        <h2>Your Balance: {yourLocalBalance ? utils.formatEther(yourLocalBalance) : "..."}</h2>
        <Divider />
        Your Contract Address:
        <Address
          address={readContracts && readContracts.YourContract ? readContracts.YourContract.address : null}
          ensProvider={mainnetProvider}
          fontSize={16}
        />
        <Divider />
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /* look how you call setPurpose on your contract: */
              tx(writeContracts.YourContract.setPurpose("? Cheers"));
            }}
          >
            Set Purpose to &quot;? Cheers&quot;
          </Button>
        </div>
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /*
              you can also just craft a transaction and send it to the tx() transactor
              here we are sending value straight to the contract's address:
            */
              tx({
                to: writeContracts.YourContract.address,
                value: utils.parseEther("0.001"),
              });
              /* this should throw an error about "no fallback nor receive function" until you add it */
            }}
          >
            Send Value
          </Button>
        </div>
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /* look how we call setPurpose AND send some value along */
              tx(
                writeContracts.YourContract.setPurpose("? Paying for this one!", {
                  value: utils.parseEther("0.001"),
                }),
              );
              /* this will fail until you make the setPurpose function payable */
            }}
          >
            Set Purpose With Value
          </Button>
        </div>
        <div style={{ margin: 8 }}>
          <Button
            onClick={() => {
              /* you can also just craft a transaction and send it to the tx() transactor */
              tx({
                to: writeContracts.YourContract.address,
                value: utils.parseEther("0.001"),
                data: writeContracts.YourContract.interface.encodeFunctionData("setPurpose(string)", [
                  "? Whoa so 1337!",
                ]),
              });
              /* this should throw an error about "no fallback nor receive function" until you add it */
            }}
          >
            Another Example
          </Button>
        </div>
      </div>

      {/*
        ? Maybe display a list of events?
          (uncomment the event and emit line in YourContract.sol! )
      */}
      <div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
        <h2>Events:</h2>
        <List
          bordered
          dataSource={setPurposeEvents}
          renderItem={item => {
            return (
              <List.Item key={item.blockNumber + "_" + item.sender + "_" + item.purpose}>
                <Address address={item[0]} ensProvider={mainnetProvider} fontSize={16} />
                {item[1]}
              </List.Item>
            );
          }}
        />
      </div>

      <div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 256 }}>
        <Card>
          Check out all the{" "}
          <a
            href="https://github.com/austintgriffith/scaffold-eth/tree/master/packages/react-app/src/components"
            target="_blank"
            rel="noopener noreferrer"
          >
            ? components
          </a>
        </Card>

        <Card style={{ marginTop: 32 }}>
          <div>
            There are tons of generic components included from{" "}
            <a href="https://ant.design/components/overview/" target="_blank" rel="noopener noreferrer">
              ? ant.design
            </a>{" "}
            too!
          </div>

          <div style={{ marginTop: 8 }}>
            <Button type="primary">Buttons</Button>
          </div>

          <div style={{ marginTop: 8 }}>
            <SyncOutlined spin /> Icons
          </div>

          <div style={{ marginTop: 8 }}>
            Date Pickers?
            <div style={{ marginTop: 2 }}>
              <DatePicker onChange={() => {}} />
            </div>
          </div>

          <div style={{ marginTop: 32 }}>
            <Slider range defaultValue={[20, 50]} onChange={() => {}} />
          </div>

          <div style={{ marginTop: 32 }}>
            <Switch defaultChecked onChange={() => {}} />
          </div>

          <div style={{ marginTop: 32 }}>
            <Progress percent={50} status="active" />
          </div>

          <div style={{ marginTop: 32 }}>
            <Spin />
          </div>
        </Card>
      </div>
    </div>
  );
}

Submission = ({ onSubmit }) => {
    const [form] = Form.useForm();

    const onFinish = values => {
        onSubmit(values);
        form.resetFields();
    };

    return (
        <StyledForm
            requiredMark={false}
            form={form}
            onFinish={onFinish}>
            <Form.Item name="name" label={
                <span>
                    Name&nbsp;
                    <Tooltip title="What's your plan/goal?">
                        <QuestionCircleOutlined />
                    </Tooltip>
                </span>
            } hasFeedback rules={[{ required: true, message: 'Please input your plan/goal', whitespace: true }]}>
                <Input placeholder="My ultimate goal" />
            </Form.Item>
            <Form.Item name="start" label={
                <span>
                    Start&nbsp;
                    <Tooltip title="Goal's Start Date">
                        <QuestionCircleOutlined />
                    </Tooltip>
                </span>
            }
                initialValue={dayjs()}
                hasFeedback
                dependencies={['end']}
                rules={[
                    { type: 'object', required: true, message: 'Please select start time' },
                    ({ getFieldValue }) => ({
                        validator(rule, value) {
                            if (!value || getFieldValue('end') > value) {
                                return Promise.resolve();
                            }
                            return Promise.reject('The start date should be before end date');
                        },
                    })]}>
                <DatePicker initialValues={dayjs()} className="full-width" />
            </Form.Item>
            <Form.Item name="end" label={
                <span>
                    End&nbsp;
                    <Tooltip title="Goal's End Date">
                        <QuestionCircleOutlined />
                    </Tooltip>
                </span>
            }
                hasFeedback
                initialValue={dayjs().add(1, 'y')}
                dependencies={['start']}
                rules={[
                    { type: 'object', required: true, message: 'Please select end time' },
                    ({ getFieldValue }) => ({
                        validator(rule, value) {
                            if (!value || getFieldValue('start') < value) {
                                return Promise.resolve();
                            }
                            return Promise.reject('The end date should be after start date');
                        },
                    })]}>
                <DatePicker initialValues={dayjs().add(1, 'y')} className="full-width" />
            </Form.Item>
            <Form.Item name="priority" style={{ width: '100%' }} hasFeedback
                label={
                    <span>
                        Priority&nbsp;
                    <Tooltip title="Goal's Priority">
                            <QuestionCircleOutlined />
                        </Tooltip>
                    </span>
                }>
                <Slider style={{ width: '85%' }} defaultValue={0.5} max={1.0} min={0.0} marks={false} step={0.01} />
            </Form.Item>
            <Form.Item>
                <StyledButton size="large" icon={<UnorderedListOutlined />} shape="round" className="centered" type="primary"
                    htmlType="submit">
                    Add to List
                </StyledButton>
            </Form.Item>
        </StyledForm>
    );
}

export default function ExampleUI({purpose, setPurposeEvents, address, mainnetProvider, userProvider, localProvider, yourLocalBalance, price, tx, readContracts, writeContracts }) {

  const [newPurpose, setNewPurpose] = useState("loading...");

  return (
    <div>
      {/*
        ⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
      */}
      <div style={{border:"1px solid #cccccc", padding:16, width:400, margin:"auto",marginTop:64}}>
        <h2>Example UI:</h2>

        <h4>purpose: {purpose}</h4>

        <Divider/>

        <div style={{margin:8}}>
          <Input onChange={(e)=>{setNewPurpose(e.target.value)}} />
          <Button onClick={()=>{
            console.log("newPurpose",newPurpose)
            /* look how you call setPurpose on your contract: */
            tx( writeContracts.YourContract.setPurpose(newPurpose) )
          }}>Set Purpose</Button>
        </div>


        <Divider />

        Your Address:
        <Address
            address={address}
            ensProvider={mainnetProvider}
            fontSize={16}
        />

        <Divider />

        ENS Address Example:
        <Address
          address={"0x34aA3F359A9D614239015126635CE7732c18fDF3"} /* this will show as austingriffith.eth */
          ensProvider={mainnetProvider}
          fontSize={16}
        />

        <Divider/>

        {  /* use formatEther to display a BigNumber: */ }
        <h2>Your Balance: {yourLocalBalance?formatEther(yourLocalBalance):"..."}</h2>

        <div>OR</div>

        <Balance
          address={address}
          provider={localProvider}
          price={price}
        />

        <Divider/>

        <div>?  Example Whale Balance:</div>

        <Balance
          balance={parseEther("1000")}
          provider={localProvider}
          price={price}
        />

        <Divider/>


        {  /* use formatEther to display a BigNumber: */ }
        <h2>Your Balance: {yourLocalBalance?formatEther(yourLocalBalance):"..."}</h2>

        <Divider/>



        Your Contract Address:
        <Address
            address={readContracts?readContracts.YourContract.address:readContracts}
            ensProvider={mainnetProvider}
            fontSize={16}
        />

        <Divider />

        <div style={{margin:8}}>
          <Button onClick={()=>{
            /* look how you call setPurpose on your contract: */
            tx( writeContracts.YourContract.setPurpose("? Cheers") )
          }}>Set Purpose to "? Cheers"</Button>
        </div>

        <div style={{margin:8}}>
          <Button onClick={()=>{
            /*
              you can also just craft a transaction and send it to the tx() transactor
              here we are sending value straight to the contract's address:
            */
            tx({
              to: writeContracts.YourContract.address,
              value: parseEther("0.001")
            });
            /* this should throw an error about "no fallback nor receive function" until you add it */
          }}>Send Value</Button>
        </div>

        <div style={{margin:8}}>
          <Button onClick={()=>{
            /* look how we call setPurpose AND send some value along */
            tx( writeContracts.YourContract.setPurpose("? Paying for this one!",{
              value: parseEther("0.001")
            }))
            /* this will fail until you make the setPurpose function payable */
          }}>Set Purpose With Value</Button>
        </div>


        <div style={{margin:8}}>
          <Button onClick={()=>{
            /* you can also just craft a transaction and send it to the tx() transactor */
            tx({
              to: writeContracts.YourContract.address,
              value: parseEther("0.001"),
              data: writeContracts.YourContract.interface.encodeFunctionData("setPurpose(string)",["? Whoa so 1337!"])
            });
            /* this should throw an error about "no fallback nor receive function" until you add it */
          }}>Another Example</Button>
        </div>

      </div>

      {/*
        ? Maybe display a list of events?
          (uncomment the event and emit line in YourContract.sol! )
      */}
      <div style={{ width:600, margin: "auto", marginTop:32, paddingBottom:32 }}>
        <h2>Events:</h2>
        <List
          bordered
          dataSource={setPurposeEvents}
          renderItem={(item) => {
            return (
              <List.Item key={item.blockNumber+"_"+item.sender+"_"+item.purpose}>
                <Address
                    address={item[0]}
                    ensProvider={mainnetProvider}
                    fontSize={16}
                  /> =>
                {item[1]}
              </List.Item>
            )
          }}
        />
      </div>


      <div style={{ width:600, margin: "auto", marginTop:32, paddingBottom:256 }}>

        <Card>

          Check out all the <a href="https://github.com/austintgriffith/scaffold-eth/tree/master/packages/react-app/src/components" target="_blank" rel="noopener noreferrer">?  components</a>

        </Card>

        <Card style={{marginTop:32}}>

          <div>
            There are tons of generic components included from <a href="https://ant.design/components/overview/" target="_blank" rel="noopener noreferrer">?  ant.design</a> too!
          </div>

          <div style={{marginTop:8}}>
            <Button type="primary">
              Buttons
            </Button>
          </div>

          <div style={{marginTop:8}}>
            <SyncOutlined spin />  Icons
          </div>

          <div style={{marginTop:8}}>
            Date Pickers?
            <div style={{marginTop:2}}>
              <DatePicker onChange={()=>{}}/>
            </div>
          </div>

          <div style={{marginTop:32}}>
            <Slider range defaultValue={[20, 50]} onChange={()=>{}}/>
          </div>

          <div style={{marginTop:32}}>
            <Switch defaultChecked onChange={()=>{}} />
          </div>

          <div style={{marginTop:32}}>
            <Progress percent={50} status="active" />
          </div>

          <div style={{marginTop:32}}>
            <Spin />
          </div>


        </Card>




      </div>


    </div>
  );
}