diff --git a/packages/page-preimages/src/Preimages/Add.tsx b/packages/page-preimages/src/Preimages/Add.tsx
deleted file mode 100644
index 80a1964103..0000000000
--- a/packages/page-preimages/src/Preimages/Add.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { SubmittableExtrinsic } from '@polkadot/api/types';
-
-import React, { useEffect, useState } from 'react';
-
-import { Button, Extrinsic, InputAddress, InputBalance, Modal, Static, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
-import { Available } from '@polkadot/react-query';
-import { BN, BN_ZERO } from '@polkadot/util';
-import { blake2AsHex } from '@polkadot/util-crypto';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  imageHash?: string;
-}
-
-interface HashState {
-  encodedHash: string;
-  encodedLength: number;
-  encodedProposal: string;
-  storageFee: BN;
-}
-
-const ZERO_HASH = blake2AsHex('');
-
-function Add ({ className, imageHash }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api, apiDefaultTxSudo } = useApi();
-  const [isAddOpen, toggleAdd] = useToggle();
-  const [accountId, setAccountId] = useState<string | null>(null);
-  const [{ encodedHash, encodedLength, encodedProposal, storageFee }, setHash] = useState<HashState>({ encodedHash: ZERO_HASH, encodedLength: 0, encodedProposal: '', storageFee: BN_ZERO });
-  const [proposal, setProposal] = useState<SubmittableExtrinsic<'promise'>>();
-
-  useEffect((): void => {
-    // get the proposal in hex format, i.e. we don't want the length prefix
-    const encodedProposal = (proposal as SubmittableExtrinsic<'promise'>)?.method.toHex() || '';
-
-    // we are dealing with hex values here, so subtrack the prefix (+ 2 chars per byte)
-    const encodedLength = Math.max(0, Math.round((encodedProposal.length - 2) / 2));
-
-    // we currently don't have a constant exposed, or rather, maybe somewhere else...
-    // const storageFee = api.consts.democracy.preimageByteDeposit.mul(
-    //   encodedProposal
-    //     ? new BN((encodedProposal.length - 2) / 2)
-    //     : BN_ZERO
-    // );
-
-    setHash({ encodedHash: blake2AsHex(encodedProposal), encodedLength, encodedProposal, storageFee: BN_ZERO });
-  }, [api, proposal]);
-
-  const isMatched = imageHash
-    ? imageHash === encodedHash
-    : true;
-
-  return (
-    <>
-      {isAddOpen && (
-        <Modal
-          className={className}
-          header={t<string>('Submit preimage')}
-          onClose={toggleAdd}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns hint={t<string>('This account will pay the fees for the preimage, based on the size thereof.')}>
-              <InputAddress
-                help={t<string>('The account you want to register the preimage from')}
-                label={t<string>('send from account')}
-                labelExtra={
-                  <Available
-                    label={<span className='label'>{t<string>('transferrable')}</span>}
-                    params={accountId}
-                  />
-                }
-                onChange={setAccountId}
-                type='account'
-              />
-            </Modal.Columns>
-            <Modal.Columns hint={
-              <>
-                <p>{t<string>('The image (proposal) will be stored on-chain against the hash of the contents.')}</p>
-                <p>{t<string>('When submitting a proposal the hash needs to be known. Proposals can be submitted with hash-only, but upon dispatch the preimage needs to be available.')}</p>
-              </>
-            }
-            >
-              <Extrinsic
-                defaultValue={apiDefaultTxSudo}
-                label={t<string>('propose')}
-                onChange={setProposal}
-              />
-              <Static
-                help={t<string>('The hash of the selected proposal, use it for submitting the proposal')}
-                label={t<string>('preimage hash')}
-                value={encodedHash}
-                withCopy
-              />
-              <Static
-                help={t<string>('The encoded length of the selected proposal, as available on-chain')}
-                label={t<string>('preimage length')}
-                value={encodedLength.toString()}
-                withCopy
-              />
-            </Modal.Columns>
-            {!storageFee.isZero() && (
-              <Modal.Columns hint={t<string>('The calculated storage costs based on the size and the per-bytes fee.')}>
-                <InputBalance
-                  defaultValue={storageFee}
-                  help={t<string>('The amount reserved to store this image')}
-                  isDisabled
-                  label={t<string>('calculated storage fee')}
-                />
-              </Modal.Columns>
-            )}
-          </Modal.Content>
-          <Modal.Actions>
-            <TxButton
-              accountId={accountId}
-              icon='plus'
-              isDisabled={!proposal || !accountId || !isMatched || !encodedProposal}
-              label={t<string>('Submit preimage')}
-              onStart={toggleAdd}
-              params={[encodedProposal]}
-              tx={api.tx.preimage.notePreimage}
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-      <Button
-        icon='plus'
-        label={t<string>('Add preimage')}
-        onClick={toggleAdd}
-      />
-    </>
-  );
-}
-
-export default React.memo(Add);
diff --git a/packages/page-preimages/src/Preimages/Add/Partial.tsx b/packages/page-preimages/src/Preimages/Add/Partial.tsx
new file mode 100644
index 0000000000..7933147d2a
--- /dev/null
+++ b/packages/page-preimages/src/Preimages/Add/Partial.tsx
@@ -0,0 +1,127 @@
+// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ApiPromise } from '@polkadot/api';
+import type { SubmittableExtrinsic } from '@polkadot/api/types';
+import type { BN } from '@polkadot/util';
+import type { HexString } from '@polkadot/util/types';
+import type { HashState } from './types';
+
+import React, { useCallback, useState } from 'react';
+
+import { Extrinsic, InputBalance, Modal, Static } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
+import { BN_ZERO } from '@polkadot/util';
+import { blake2AsHex } from '@polkadot/util-crypto';
+
+import { useTranslation } from '../../translate';
+
+interface Props {
+  className?: string;
+  onChange: (state: HashState) => void;
+}
+
+const EMPTY_HASH = blake2AsHex('');
+
+export const EMPTY_PROPOSAL: HashState = {
+  encodedHash: EMPTY_HASH,
+  encodedLength: 0,
+  encodedProposal: null,
+  notePreimageTx: null,
+  storageFee: BN_ZERO
+};
+
+function getState (api: ApiPromise, proposal?: SubmittableExtrinsic<'promise'>): HashState {
+  let encodedHash = EMPTY_HASH;
+  let encodedProposal: HexString | null = null;
+  let encodedLength = 0;
+  let notePreimageTx: SubmittableExtrinsic<'promise'> | null = null;
+  let storageFee = BN_ZERO;
+
+  if (proposal) {
+    encodedProposal = proposal.method.toHex();
+    encodedLength = Math.ceil((encodedProposal.length - 2) / 2);
+    encodedHash = blake2AsHex(encodedProposal);
+    notePreimageTx = api.tx.preimage.notePreimage(encodedProposal);
+
+    // we currently don't have a constant exposed, however match to Substrate
+    storageFee = ((api.consts.preimage?.baseDeposit || BN_ZERO) as unknown as BN).add(
+      ((api.consts.preimage?.byteDeposit || BN_ZERO) as unknown as BN).muln(encodedLength)
+    );
+  }
+
+  return {
+    encodedHash,
+    encodedLength,
+    encodedProposal,
+    notePreimageTx,
+    storageFee
+  };
+}
+
+function Partial ({ className, onChange }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api, apiDefaultTxSudo } = useApi();
+  const [{ encodedHash, encodedLength, storageFee }, setState] = useState<HashState>(EMPTY_PROPOSAL);
+
+  const changeState = useCallback(
+    (state: HashState): void => {
+      setState(state);
+      onChange(state);
+    },
+    [onChange]
+  );
+
+  const setProposal = useCallback(
+    (proposal?: SubmittableExtrinsic<'promise'>) =>
+      changeState(getState(api, proposal)),
+    [api, changeState]
+  );
+
+  return (
+    <>
+      <Modal.Columns
+        className={className}
+        hint={
+          <>
+            <p>{t<string>('The image (proposal) will be stored on-chain against the hash of the contents.')}</p>
+            <p>{t<string>('When submitting a proposal the hash needs to be known. Proposals can be submitted with hash-only, but upon dispatch the preimage needs to be available.')}</p>
+          </>
+        }
+      >
+        <Extrinsic
+          defaultValue={apiDefaultTxSudo}
+          label={t<string>('propose')}
+          onChange={setProposal}
+        />
+        <Static
+          help={t<string>('The hash of the selected proposal, use it for submitting the proposal')}
+          label={t<string>('preimage hash')}
+          value={encodedHash}
+          withCopy
+        />
+        <Static
+          help={t<string>('The encoded length of the selected proposal, as available on-chain')}
+          label={t<string>('preimage length')}
+          value={encodedLength || '0'}
+          withCopy
+        />
+      </Modal.Columns>
+      {!storageFee.isZero() && (
+        <Modal.Columns
+          className={className}
+          hint={t<string>('The calculated storage costs based on the base and the per-bytes fee.')}
+        >
+          <InputBalance
+            defaultValue={storageFee}
+            help={t<string>('The amount reserved to store this image')}
+            isDisabled
+            label={t<string>('calculated storage fee')}
+          />
+        </Modal.Columns>
+      )}
+    </>
+  );
+}
+
+export default React.memo(Partial);
diff --git a/packages/page-preimages/src/Preimages/Add/index.tsx b/packages/page-preimages/src/Preimages/Add/index.tsx
new file mode 100644
index 0000000000..fb58f018d8
--- /dev/null
+++ b/packages/page-preimages/src/Preimages/Add/index.tsx
@@ -0,0 +1,75 @@
+// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HashState } from './types';
+
+import React, { useState } from 'react';
+
+import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
+import { Available } from '@polkadot/react-query';
+
+import { useTranslation } from '../../translate';
+import Proposal, { EMPTY_PROPOSAL } from './Partial';
+
+interface Props {
+  className?: string;
+  imageHash?: string;
+}
+
+function Add ({ className, imageHash }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const [isAddOpen, toggleAdd] = useToggle();
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [{ encodedHash, notePreimageTx }, setProposal] = useState<HashState>(EMPTY_PROPOSAL);
+
+  const isMatched = !imageHash || imageHash === encodedHash;
+
+  return (
+    <>
+      {isAddOpen && (
+        <Modal
+          className={className}
+          header={t<string>('Submit preimage')}
+          onClose={toggleAdd}
+          size='large'
+        >
+          <Modal.Content>
+            <Modal.Columns hint={t<string>('This account will pay the fees for the preimage, based on the size thereof.')}>
+              <InputAddress
+                help={t<string>('The account you want to register the preimage from')}
+                label={t<string>('send from account')}
+                labelExtra={
+                  <Available
+                    label={<span className='label'>{t<string>('transferrable')}</span>}
+                    params={accountId}
+                  />
+                }
+                onChange={setAccountId}
+                type='account'
+              />
+            </Modal.Columns>
+            <Proposal onChange={setProposal} />
+          </Modal.Content>
+          <Modal.Actions>
+            <TxButton
+              accountId={accountId}
+              extrinsic={notePreimageTx}
+              icon='plus'
+              isDisabled={!accountId || !isMatched || !notePreimageTx}
+              label={t<string>('Submit preimage')}
+              onStart={toggleAdd}
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Button
+        icon='plus'
+        label={t<string>('Add preimage')}
+        onClick={toggleAdd}
+      />
+    </>
+  );
+}
+
+export default React.memo(Add);
diff --git a/packages/page-preimages/src/Preimages/Add/types.ts b/packages/page-preimages/src/Preimages/Add/types.ts
new file mode 100644
index 0000000000..a8146c23a3
--- /dev/null
+++ b/packages/page-preimages/src/Preimages/Add/types.ts
@@ -0,0 +1,14 @@
+// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SubmittableExtrinsic } from '@polkadot/api/types';
+import type { BN } from '@polkadot/util';
+import type { HexString } from '@polkadot/util/types';
+
+export interface HashState {
+  encodedHash: HexString;
+  encodedLength: number;
+  encodedProposal?: HexString | null;
+  notePreimageTx?: SubmittableExtrinsic<'promise'> | null;
+  storageFee: BN;
+}