Add proper tx/sign texts and headers

packages/extension-ui/src/Popup/ImportQr.tsx

@@ -27,7 +27,7 @@ export default function ImportQr (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header showBackArrow />
+      <Header showBackArrow text='Scan Address Qr' />
       {!account && (
         <div>
           <QrScanAddress onScan={setAccount} />

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -23,12 +23,13 @@ interface Props {
   signId: string;
   url: string;
   isFirst?: boolean;
+  buttonText?: string;
 }
 
 // keep it global, we can and will re-use this across requests
 const registry = new TypeRegistry();
 
-export default function Request ({ account: { isExternal }, request, signId, url, isFirst }: Props): React.ReactElement<Props> | null {
+export default function Request ({ account: { isExternal }, request, signId, url, isFirst, buttonText }: Props): React.ReactElement<Props> | null {
   const onAction = useContext(ActionContext);
   const [hexBytes, setHexBytes] = useState<string | null>(null);
   const [extrinsic, setExtrinsic] = useState<ExtrinsicPayload | null>(null);
@@ -37,15 +38,17 @@ export default function Request ({ account: { isExternal }, request, signId, url
     const inner = request.inner;
     if ((inner as SignerPayloadRaw).data) {
       setHexBytes((inner as SignerPayloadRaw).data);
+      setExtrinsic(null);
     } else {
       setExtrinsic(createType(registry, 'ExtrinsicPayload', inner, { version: (inner as SignerPayloadJSON).version }));
+      setHexBytes(null);
     }
   }, [request]);
 
-  const _onCancel = (): Promise<void> =>
-    cancelSignRequest(signId)
-      .then((): void => onAction())
+  const _onCancel = (): Promise<void> => {
+    return cancelSignRequest(signId).then((): void => onAction())
       .catch((error: Error) => console.error(error));
+  };
   const _onSign = (password: string): Promise<void> =>
     approveSignPassword(signId, password)
       .then((): void => onAction())
@@ -80,7 +83,7 @@ export default function Request ({ account: { isExternal }, request, signId, url
           )
         }
         <SignArea>
-          {isFirst && !isExternal && <Unlock onSign={_onSign} />}
+          {isFirst && !isExternal && <Unlock onSign={_onSign} buttonText={buttonText} />}
           <CancelButton>
             <Link isDanger onClick={_onCancel}>Cancel</Link>
           </CancelButton>
@@ -95,7 +98,7 @@ export default function Request ({ account: { isExternal }, request, signId, url
         <Bytes bytes={payload.data} url={url} />
         <VerticalSpace />
         <SignArea>
-          {!isExternal && <Unlock onSign={_onSign} />}
+          {!isExternal && <Unlock onSign={_onSign} buttonText={buttonText} />}
           <CancelButton>
             <Link isDanger onClick={_onCancel}>Reject</Link>
           </CancelButton>

packages/extension-ui/src/Popup/Signing/Unlock.tsx

@@ -9,9 +9,10 @@ import { Button, InputWithLabel } from '../../components';
 interface Props {
   className?: string;
   onSign: (password: string) => Promise<void>;
+  buttonText?: string;
 }
 
-export default function Unlock ({ className, onSign }: Props): React.ReactElement<Props> {
+export default function Unlock ({ className, onSign, buttonText = 'Sign the transaction' }: Props): React.ReactElement<Props> {
   const [error, setError] = useState('');
   const [password, setPassword] = useState('');
 
@@ -34,7 +35,7 @@ export default function Unlock ({ className, onSign }: Props): React.ReactElemen
         onChange={setPassword}
         type='password'
       />
-      <Button onClick={_onClick}>Sign the transaction</Button>
+      <Button onClick={_onClick}>{buttonText}</Button>
     </div>
   );
 }

packages/extension-ui/src/Popup/Signing/index.tsx

@@ -7,19 +7,25 @@ import React, { useContext, useState, useEffect } from 'react';
 import { Header, Loading, SigningContext } from '../../components';
 import Request from './Request';
 import TransactionIndex from './TransactionIndex';
+import { SigningRequest } from '@polkadot/extension/background/types';
 
 export default function Signing (): React.ReactElement<{}> {
   const requests = useContext(SigningContext);
   const [requestIndex, setRequestIndex] = useState(0);
+
   useEffect(() => {
     if (requestIndex >= requests.length) {
       setRequestIndex(requests.length - 1);
     }
   }, [requests]);
 
+  function isTransaction (signingRequest: SigningRequest): boolean {
+    return 'blockNumber' in signingRequest.request.inner;
+  }
+
   return requests[requestIndex] ? (
     <>
-      <Header text='Transaction'>
+      <Header text={isTransaction(requests[requestIndex]) ? 'Transaction' : 'Sign message'}>
         {requests.length > 1 && (
           <TransactionIndex
             index={requestIndex}
@@ -35,6 +41,7 @@ export default function Signing (): React.ReactElement<{}> {
         request={requests[requestIndex].request}
         signId={requests[requestIndex].id}
         url={requests[requestIndex].url}
+        buttonText={isTransaction(requests[requestIndex]) ? 'Sign the transaction' : 'Sign the message'}
       />
     </>
   ) : <Loading />;

packages/extension-ui/src/components/themes.ts

@@ -71,8 +71,8 @@ export function chooseTheme (): AvailableThemes {
   if (preferredTheme) {
     return preferredTheme === 'dark' ? 'dark' : 'light';
   }
-  const isDarkColorSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  return isDarkColorSchemePreferred ? 'dark' : 'light';
+  const isLightColorSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
+  return isLightColorSchemePreferred ? 'light' : 'dark';
 }
 
 export declare type Theme = typeof darkTheme;