types#UiOptionType TypeScript Examples

CompareApi = ({ onSetApi, onDisconnectApi, match }: Props) => {
  const history = useHistory()
  const dispatch = useDispatch()
  const api = useSelector(apiSelector)

  const [apiDiff, setApiDiff] = useState<ApiDiffInterface>({
    added: {},
    deleted: {},
    updated: {},
  })

  const options = [
    'wss://kusama-rpc.polkadot.io/',
    'wss://testnet5.edgewa.re',
    'wss://testnet.plasmnet.io',
    'wss://substrate-rpc.parity.io/',
    'ws://127.0.0.1:9944',
    'custom',
  ]

  const currentApiComputedUrl = api.current.url
    ? options.includes(api.current.url)
      ? api.current.url
      : 'custom'
    : options[0]
  const [currentApiUrl, setCurrentApiUrl] = useState<UiOptionType>(
    currentApiComputedUrl
  )
  const [customCurrentApiUrl, setCustomCurrentApiUrl] = useState<string>(
    currentApiComputedUrl === 'custom' ? api.current.url : 'wss://'
  )

  const [customCurrentApiTypes, setCustomCurrentApiTypes] = useState<string>('')

  const [compareApiUrl, setCompareApiUrl] = useState<UiOptionType>(options[0])
  const [customCompareApiUrl, setCustomCompareApiUrl] = useState<string>(
    'wss://'
  )

  const [customCompareApiTypes, setCustomCompareApiTypes] = useState<string>('')

  const handleResetCompareApi = () => {
    dispatch(resetCompareApiAction())
    onDisconnectApi('compare', false, false)
    history.push('/compare-api')
  }

  useDidMount(handleResetCompareApi)

  const handleSubmitCurrentApi = () => {
    const currentApiIsCustom = currentApiUrl === 'custom'
    let customTypes = ''
    let url = currentApiUrl as string
    if (currentApiIsCustom) {
      url = customCurrentApiUrl
      customTypes = customCurrentApiTypes
    }

    handleResetCompareApi()
    onSetApi(url, customTypes, 'current', '')
  }

  const handleSubmitCompareApi = () => {
    const compareApiIsCustom = compareApiUrl === 'custom'
    let customTypes = ''
    let url = compareApiUrl as string
    if (compareApiIsCustom) {
      url = customCompareApiUrl
      customTypes = customCompareApiTypes
    }

    onSetApi(url, customTypes, 'compare', '')
  }

  useDidUpdate(() => {
    const diff = detailedDiff(
      api.current.description,
      api.compare.description
    ) as ApiDiffInterface

    setApiDiff(diff)
  }, [api.compare.description])

  return (
    <S.Wrapper>
      {api.compare.loaded ? (
        <>
          <S.Title>
            <S.ApiName>
              <small>Main API:</small>
              {api.current.url}
            </S.ApiName>
            <S.ApiName>
              <small>Comparison API:</small>
              {api.compare.url}
            </S.ApiName>
          </S.Title>
          <S.Legend>
            <CompareApiLegend />
            <Button
              theme="outline"
              text="< Compare other API"
              onClick={handleResetCompareApi}
            />
          </S.Legend>
          <Switch>
            <Route
              path={match.path}
              exact
              render={(props) => (
                <Main api={api} apiDiff={apiDiff} {...props} />
              )}
            />
            <Route
              path={`${match.path}/:category`}
              exact
              render={(props) => (
                <Category api={api} apiDiff={apiDiff} {...props} />
              )}
            />
            <Route
              path={`${match.path}/:category/:subcategory`}
              exact
              render={(props) => (
                <Subcategory api={api} apiDiff={apiDiff} {...props} />
              )}
            />
          </Switch>
        </>
      ) : (
        <S.Form>
          <div>
            <RadioGroup
              id="selectApi1RadioGroup"
              label="Current Node"
              value={currentApiUrl}
              onChange={setCurrentApiUrl}
              options={options}
            />
            <Dropdown isOpen={currentApiUrl === 'custom'}>
              <S.FormInput
                type="text"
                placeholder="Custom Node URL"
                value={customCurrentApiUrl}
                onChange={(e) => setCustomCurrentApiUrl(e.target.value)}
                style={{ margin: '24px 0 0' }}
              />
              <S.FormInput
                type="text"
                placeholder="Custom Types"
                value={customCurrentApiTypes}
                onChange={(e) => setCustomCurrentApiTypes(e.target.value)}
              />
            </Dropdown>
            <Button
              fluid
              condensed
              text="Switch Node"
              disabled={currentApiUrl === api.current.url}
              onClick={handleSubmitCurrentApi}
            />
          </div>
          <div>
            <RadioGroup
              id="selectApi2RadioGroup"
              label="Node to compare"
              value={compareApiUrl}
              onChange={setCompareApiUrl}
              options={options}
            />
            <Dropdown isOpen={compareApiUrl === 'custom'}>
              <S.FormInput
                type="text"
                placeholder="Custom Node URL"
                value={customCompareApiUrl}
                onChange={(e) => setCustomCompareApiUrl(e.target.value)}
              />
              <S.FormInput
                type="text"
                placeholder="Custom Types"
                value={customCompareApiTypes}
                onChange={(e) => setCustomCompareApiTypes(e.target.value)}
              />
            </Dropdown>
            <Button
              fluid
              condensed
              text="Compare"
              disabled={currentApiUrl === compareApiUrl}
              onClick={handleSubmitCompareApi}
            />
          </div>
        </S.Form>
      )}
    </S.Wrapper>
  )
}

SelectApi = ({ onSetApi }: Props) => {
  const api = useSelector(apiSelector)

  const options = [
    'wss://kusama-rpc.polkadot.io/',
    'wss://mainnet2.edgewa.re',
    'wss://testnet.plasmnet.io',
    'wss://substrate-rpc.parity.io/',
    'ws://127.0.0.1:9944',
    'custom',
  ]

  const computedApiUrl = api.current.url
    ? options.includes(api.current.url)
      ? api.current.url
      : 'custom'
    : options[0]

  const [apiUrl, setApiUrl] = useState<UiOptionType>(computedApiUrl)
  const [customApiUrl, setCustomApiUrl] = useState<string>(
    computedApiUrl === 'custom' ? api.current.url : 'wss://'
  )

  const [customApiTypes, setCustomApiTypes] = useState<string>('')

  const handleSubmit = () => {
    const isCustomUrl = apiUrl === 'custom'
    let customTypes = ''
    let url = apiUrl as string
    if (isCustomUrl) {
      url = customApiUrl
      customTypes = customApiTypes
    }

    onSetApi(url, customTypes, 'current', '/explore-api')
  }

  const handleKeyUp = (e) => {
    if (e.keyCode === 13) handleSubmit()
  }

  return (
    <S.Wrapper onKeyUp={handleKeyUp}>
      <S.Inner>
        <S.Form>
          <RadioGroup
            id="selectApiRadioGroup"
            value={apiUrl}
            onChange={setApiUrl}
            options={options}
          />
          <Dropdown isOpen={apiUrl === 'custom'}>
            <Input
              type="text"
              placeholder="Custom Node URL"
              value={customApiUrl}
              onChange={(e) => setCustomApiUrl(e.target.value)}
              style={{ margin: '24px 0 0' }}
            />
            <Input
              type="text"
              placeholder="Custom Types"
              value={customApiTypes}
              onChange={(e) => setCustomApiTypes(e.target.value)}
            />
          </Dropdown>
        </S.Form>
        <Button
          fluid
          text="connect"
          disabled={apiUrl === api.current.url}
          onClick={handleSubmit}
          style={{ marginBottom: '24px' }}
        />
      </S.Inner>
      <S.Version>
        API Version:{' '}
        {packageJSON.dependencies['@polkadot/api'].replace('^', '')}
      </S.Version>
    </S.Wrapper>
  )
}