components#CompareApiLegend TypeScript Examples

The following examples show how to use components#CompareApiLegend. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CompareApiLegend.stories.tsx    From substrate-api-explorer with Apache License 2.0 5 votes vote down vote up 
storiesOf('COMPONENTS|CompareApiLegend', module).add('default', () => (
  <div style={{ padding: '24px' }}>
    <CompareApiLegend />
  </div>
))
Example #2
Source File: CompareApi.tsx    From substrate-api-explorer with Apache License 2.0 4 votes vote down vote up 
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>
  )
}