calldata hyperlink (#7507)

* try to autofil calldata from url

* Kind help from a friend.

* fixing warnings

* space rearranging.

* Jarco awesomeness

packages/page-extrinsics/src/Decoder.tsx

@@ -3,9 +3,11 @@
 
 import type { SubmittableExtrinsic, SubmittableExtrinsicFunction } from '@polkadot/api/types';
 import type { Call } from '@polkadot/types/interfaces';
+import type { HexString } from '@polkadot/util/types';
 import type { DecodedExtrinsic } from './types';
 
 import React, { useCallback, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Button, Call as CallDisplay, Input, InputAddress, InputExtrinsic, MarkError, TxButton } from '@polkadot/react-components';
@@ -18,6 +20,7 @@ import { useTranslation } from './translate';
 
 interface Props {
   className?: string;
+  defaultValue?: HexString | null;
   setLast: (value: DecodedExtrinsic | null) => void;
 }
 
@@ -39,7 +42,9 @@ const DEFAULT_INFO: ExtrinsicInfo = {
   extrinsicHex: null
 };
 
-function Decoder ({ className, setLast }: Props): React.ReactElement<Props> {
+function Decoder ({ className, defaultValue, setLast }: Props): React.ReactElement<Props> {
+  const { value: encoded } = useParams<{ value: string }>();
+  const [initialValue] = useState(() => defaultValue || encoded);
   const { t } = useTranslation();
   const { api } = useApi();
   const [{ decoded, extrinsic, extrinsicCall, extrinsicError, extrinsicFn }, setExtrinsicInfo] = useState<ExtrinsicInfo>(DEFAULT_INFO);
@@ -70,7 +75,7 @@ function Decoder ({ className, setLast }: Props): React.ReactElement<Props> {
         }
 
         setExtrinsicInfo({ ...DEFAULT_INFO, decoded, extrinsic, extrinsicCall, extrinsicFn, extrinsicHex });
-        setLast({ call: extrinsicCall, fn: extrinsicFn });
+        setLast({ call: extrinsicCall, fn: extrinsicFn, hex: extrinsicHex });
       } catch (e) {
         setExtrinsicInfo({ ...DEFAULT_INFO, extrinsicError: (e as Error).message });
         setLast(null);
@@ -82,6 +87,7 @@ function Decoder ({ className, setLast }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Input
+        defaultValue={initialValue}
         isError={!extrinsicFn}
         label={t<string>('hex-encoded call')}
         onChange={_setExtrinsicHex}

packages/page-extrinsics/src/index.tsx

@@ -24,6 +24,7 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
       text: t<string>('Submission')
     },
     {
+      hasParams: true,
       name: 'decode',
       text: t<string>('Decode')
     }
@@ -36,8 +37,11 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
         items={itemsRef.current}
       />
       <Switch>
-        <Route path={`${basePath}/decode`}>
-          <Decoder setLast={setDecoded} />
+        <Route path={[`${basePath}/decode/:value`, `${basePath}/decode`]}>
+          <Decoder
+            defaultValue={decoded && decoded.hex}
+            setLast={setDecoded}
+          />
         </Route>
         <Route>
           <Submission defaultValue={decoded} />

packages/page-extrinsics/src/types.ts

@@ -3,8 +3,10 @@
 
 import type { SubmittableExtrinsicFunction } from '@polkadot/api/types';
 import type { Call } from '@polkadot/types/interfaces';
+import type { HexString } from '@polkadot/util/types';
 
 export interface DecodedExtrinsic {
   call: Call;
+  hex: HexString;
   fn: SubmittableExtrinsicFunction<'promise'>;
 }

packages/react-components/src/Input.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2022 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Input as SUIInput } from 'semantic-ui-react';
 
 import { isFunction, isUndefined } from '@polkadot/util';
@@ -94,6 +94,11 @@ let counter = 0;
 
 function Input ({ autoFocus = false, children, className, defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isInPlaceEditor = false, isReadOnly = false, isWarning = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
   const [stateName] = useState(() => `in_${counter++}_at_${Date.now()}`);
+  const [initialValue] = useState(() => defaultValue);
+
+  useEffect((): void => {
+    initialValue && onChange && onChange(initialValue);
+  }, [initialValue, onChange]);
 
   const _onBlur = useCallback(
     () => onBlur && onBlur(),