[Issue-44] Update some screens (transfer confirmation, history...)

packages/extension-koni-ui/src/Popup/Confirmations/parts/ConfirmationHeader.tsx

@@ -6,6 +6,7 @@ import { Icon, SwSubHeader } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { CaretRight } from 'phosphor-react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 interface Props extends ThemeProps {
@@ -17,6 +18,8 @@ interface Props extends ThemeProps {
 }
 
 function Component ({ className, index, numberOfConfirmations, onClickNext, onClickPrev, title }: Props) {
+  const { t } = useTranslation();
+
   return (
     <SwSubHeader
       background='transparent'
@@ -40,13 +43,35 @@ function Component ({ className, index, numberOfConfirmations, onClickNext, onCl
           }
         ]}
       showBackButton={index > 0}
-      title={title}
+      title={
+        <div className={'__title-wrapper'}>
+          <div>{t(title || '')}</div>
+          <div className={'__beta-version'}>Beta version</div>
+        </div>
+      }
     />
   );
 }
 
-const ConfirmationHeader = styled(Component)<Props>(({ theme }: ThemeProps) => {
-  return {};
+const ConfirmationHeader = styled(Component)<Props>(({ theme: { token } }: ThemeProps) => {
+  return {
+    '.__beta-version': {
+      color: token.colorTextTertiary,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      fontWeight: token.bodyFontWeight,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+
+    '.__title-wrapper': {
+      fontSize: token.fontSizeXL,
+      lineHeight: token.lineHeightHeading4,
+      fontWeight: token.fontWeightStrong
+
+    }
+  };
 });
 
 export default ConfirmationHeader;

packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx

@@ -240,6 +240,7 @@ const Component: React.FC<Props> = (props: Props) => {
   return (
     <div className={CN(className, 'confirmation-footer')}>
       <Button
+        className={'__cancel-button'}
         disabled={loading}
         icon={(
           <Icon
@@ -253,6 +254,7 @@ const Component: React.FC<Props> = (props: Props) => {
         {t('Cancel')}
       </Button>
       <Button
+        className={'__ok-button'}
         disabled={!canSign}
         icon={(
           <Icon
@@ -282,7 +284,11 @@ const Component: React.FC<Props> = (props: Props) => {
 };
 
 const EvmSignArea = styled(Component)<Props>(({ theme: { token } }: Props) => {
-  return {};
+  return {
+    '.__ok-button, .__cancel-button': {
+      fontWeight: token.fontWeightStrong
+    }
+  };
 });
 
 export default EvmSignArea;

packages/extension-koni-ui/src/Popup/Confirmations/variants/EvmTransactionConfirmation.tsx

@@ -129,6 +129,10 @@ const EvmTransactionConfirmation = styled(Component)<Props>(({ theme: { token }
     }
   },
 
+  '.network-box': {
+    marginTop: token.margin
+  },
+
   '.to-account': {
     marginTop: token.margin - 2
   },

packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx

@@ -160,7 +160,7 @@ const TransactionConfirmation = styled(Component)<Props>(({ theme: { token } }:
     marginTop: token.marginXS,
 
     '.network-box': {
-      marginTop: token.marginSM
+      marginTop: token.margin
     },
 
     '.-to-right': {

packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/TransferBlock.tsx

@@ -46,7 +46,7 @@ const Component: React.FC<Props> = ({ className, transaction }: Props) => {
       <MetaInfo hasBackgroundWrapper>
         <MetaInfo.Account
           address={data.from}
-          label={t('Send from')}
+          label={t('From')}
           networkPrefix={senderPrefix}
         />
 
@@ -62,7 +62,7 @@ const Component: React.FC<Props> = ({ className, transaction }: Props) => {
 
         <MetaInfo.Account
           address={data.to}
-          label={t('Send to')}
+          label={t('To')}
           networkPrefix={receiverPrefix}
         />
 

packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx

@@ -69,6 +69,7 @@ function Component ({ className = '', data, onCancel }: Props): React.ReactEleme
     return (
       <Button
         block
+        className={'explorer-button'}
         disabled={!link}
         icon={
           <Icon
@@ -89,7 +90,12 @@ function Component ({ className = '', data, onCancel }: Props): React.ReactEleme
       footer={modalFooter}
       id={HISTORY_DETAIL_MODAL}
       onCancel={onCancel}
-      title={data?.displayData?.title || ''}
+      title={
+        <div className={'__title-wrapper'}>
+          <div>{t(data?.displayData?.title || '')}</div>
+          <div className={'__beta-version'}>Beta version</div>
+        </div>
+      }
     >
       <div className={'__layout-container'}>
         {data && <HistoryDetailLayout data={data} />}
@@ -104,6 +110,31 @@ export const HistoryDetailModal = styled(Component)<Props>(({ theme: { token } }
       marginBottom: 0
     },
 
+    '.__beta-version': {
+      color: token.colorTextTertiary,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      fontWeight: token.bodyFontWeight,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+
+    '.__title-wrapper': {
+      fontSize: token.fontSizeXL,
+      lineHeight: token.lineHeightHeading4,
+      fontWeight: token.fontWeightStrong
+
+    },
+
+    '.ant-sw-modal-header': {
+      borderBottomColor: token.colorBgSecondary
+    },
+
+    '.explorer-button': {
+      fontWeight: token.fontWeightStrong
+    },
+
     '.ant-sw-modal-footer': {
       border: 0
     }

packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Header.tsx

@@ -71,14 +71,17 @@ const Component: React.FC<Props> = (props: Props) => {
             />
           )
           : (
-            <MetaInfo.Transfer
-              recipientAddress={data.to}
-              recipientName={data.toName}
-              recipientProxyId={data.toProxyId}
-              senderAddress={data.from}
-              senderName={data.fromName}
-              senderProxyId={data.fromProxyId}
-            />
+            <>
+              <MetaInfo.Account
+                address={data.from}
+                label={t('From')}
+              />
+
+              <MetaInfo.Account
+                address={data.to}
+                label={t('To')}
+              />
+            </>
           )
       }
     </>

packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx

@@ -29,7 +29,10 @@ const Component: React.FC<Props> = (props: Props) => {
   const isValidExtrinsicHash = data.extrinsicHash && data.extrinsicHash !== '' && !data.extrinsicHash.startsWith('internal.');
 
   return (
-    <MetaInfo className={CN(className)}>
+    <MetaInfo
+      className={CN(className)}
+      spaceSize={'sm'}
+    >
       <MetaInfo.DisplayType
         label={t('Transaction type')}
         typeName={t(TxTypeNameMap[data.type])}
@@ -41,7 +44,7 @@ const Component: React.FC<Props> = (props: Props) => {
         statusName={t(HistoryStatusMap[data.status].name)}
         valueColorSchema={HistoryStatusMap[data.status].schema}
       />
-      {isValidExtrinsicHash && <MetaInfo.Default label={t('Transaction id')}>{toShort(data.extrinsicHash, 8, 9)}</MetaInfo.Default>}
+      {isValidExtrinsicHash && <MetaInfo.Default label={t('Transaction hash')}>{toShort(data.extrinsicHash, 8, 9)}</MetaInfo.Default>}
       {
         !!data.time && (
           <MetaInfo.Default label={t('Transaction time')}>{formatHistoryDate(data.time, language, 'detail')}</MetaInfo.Default>

packages/extension-koni-ui/src/Popup/TransactionDone.tsx

@@ -104,6 +104,10 @@ const TransactionDone = styled(Component)<Props>(({ theme: { token } }: Props) =
       textAlign: 'center'
     },
 
+    '.ant-btn-content-wrapper': {
+      fontWeight: token.fontWeightStrong
+    },
+
     '.and-more': {
       fontSize: token.fontSizeHeading5,
       lineHeight: token.lineHeightHeading5,

packages/extension-koni-ui/src/components/MetaInfo/MetaInfo.tsx

@@ -41,7 +41,7 @@ const Component: React.FC<Props> = ({ children, className = '',
 const _MetaInfo = styled(Component)<Props>(({ theme: { token } }: Props) => {
   return ({
     '& + .meta-info-block': {
-      marginTop: token.marginSM
+      marginTop: token.margin
     },
 
     '.ant-number .ant-typography': {

packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx

@@ -47,24 +47,11 @@ const Component: React.FC<AccountInfoItem> = (props: AccountInfoItem) => {
     return reformatAddress(accountAddress, addPrefix);
   }, [account, accountAddress, addressPrefix, chainInfoMap]);
 
-  const name = useMemo(() => {
-    const name = accountName || account?.name;
-
-    return (
-      <>
-        <div className={'__account-wrapper'}>
-          <div className={'__account-name'}>{name}&nbsp;</div>
-          <span>({toShort(address)})</span>
-        </div>
-      </>
-    );
-  }, [account?.name, accountName, address]);
-
   const isAll = useMemo(() => isAccountAll(address), [address]);
 
   return (
     <div className={CN(className, '__row -type-account')}>
-      {!!label && <div className={'__col __label-col'}>
+      {!!label && <div className={CN('__col __label-col', { '-is-account-name': (accountName || account?.name) })}>
         <div className={'__label'}>
           {label}
         </div>
@@ -86,13 +73,16 @@ const Component: React.FC<AccountInfoItem> = (props: AccountInfoItem) => {
               )
               : (
                 <>
-                  <AccountProxyAvatar
-                    className={'__account-avatar'}
-                    size={24}
-                    value={account?.proxyId}
-                  />
-                  <div className={'__account-name ml-xs'}>
-                    {name || toShort(address)}
+                  <div className={CN('__account-transfer-wrapper', { '-is-not-name': !(accountName || account?.name) })}>
+                    <div className={'__account-transfer-name'}>
+                      <AccountProxyAvatar
+                        className={'__account-avatar'}
+                        size={24}
+                        value={account?.proxyId}
+                      />
+                      <span className={'__name'}>{accountName || account?.name}</span>
+                    </div>
+                    <span className={'__short-address'}>{toShort(address, 9, 9)}</span>
                   </div>
                 </>
               )
@@ -112,6 +102,35 @@ const AccountItem = styled(Component)<AccountInfoItem>(({ theme: { token } }: Ac
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
+    },
+    '.__account-transfer-name': {
+      display: 'flex',
+      gap: 8,
+      justifyContent: 'flex-end'
+    },
+    '.-is-not-name': {
+      display: 'flex',
+      alignItems: 'center'
+
+    },
+    '.-is-account-name.__label-col': {
+      display: 'flow'
+    },
+    '.__account-transfer-wrapper': {
+      overflow: 'hidden',
+      maxWidth: 204
+    },
+    '.__name': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      color: token.colorTextLight2,
+      fontSize: token.fontSize,
+      fontWeight: token.fontWeightStrong
+    },
+    '.__short-address': {
+      display: 'flex',
+      justifyContent: 'flex-end'
     }
   };
 });

packages/extension-koni-ui/src/components/MetaInfo/parts/TransferItem.tsx

@@ -109,15 +109,15 @@ const Component: React.FC<TransferInfoItem> = (props: TransferInfoItem) => {
   }
 
   return (
-    <div className={CN(className, '__row -type-transfer')}>
+    <div className={CN(className, '__row')}>
       <div className={'__col'}>
-        <div className={'__label'}>{senderLabel || t('Sender')}</div>
+        <div className={'__label'}>{senderLabel || t('From')}</div>
 
         {genAccountBlock(senderAddress, senderProxyId, senderName)}
         {!!originChain && genChainBlock(originChain)}
       </div>
       <div className={'__col'}>
-        <div className={'__label'}>{recipientLabel || t('Recipient')}</div>
+        <div className={'__label'}>{recipientLabel || t('To')}</div>
 
         {genAccountBlock(recipientAddress, recipientProxyId, recipientName)}
         {!!destinationChain && genChainBlock(destinationChain)}