[WC] Update modal UI

Koniverse · Nov 15, 2024 · bea3790 · bea3790
1 parent 4f83162
commit bea3790
Show file tree

Hide file tree

Showing 8 changed files with 289 additions and 107 deletions.
diff --git a/packages/extension-koni-ui/src/components/Layout/base/Home.tsx b/packages/extension-koni-ui/src/components/Layout/base/Home.tsx
@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { AccountJson } from '@subwallet/extension-base/background/types';
-import { Layout } from '@subwallet/extension-koni-ui/components';
+import { Layout, WalletConnect } from '@subwallet/extension-koni-ui/components';
 import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
 import { VISIT_INVITATION_SCREEN_FLAG } from '@subwallet/extension-koni-ui/constants';
 import { CUSTOMIZE_MODAL } from '@subwallet/extension-koni-ui/constants/modal';
 import { WalletConnectContext } from '@subwallet/extension-koni-ui/contexts/WalletConnectContext';
 import { useNotification, useSelector } from '@subwallet/extension-koni-ui/hooks';
 import { ButtonProps, Icon, ModalContext, Tooltip } from '@subwallet/react-ui';
-import { Export, FadersHorizontal, MagnifyingGlass, Wallet } from 'phosphor-react';
+import { Export, FadersHorizontal, MagnifyingGlass } from 'phosphor-react';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -143,10 +143,14 @@ const Component = (props: Props) => {
       icons.push({
         icon: (
           <Icon
+            customIcon={(
+              <WalletConnect
+                height='1em'
+                width='1em'
+              />
+            )}
             iconColor={wcAccount ? '#bf1616' : undefined}
-            phosphorIcon={Wallet}
-            size='md'
-            weight='fill'
+            type='customIcon'
           />
         ),
         onClick: wcAccount ? onDisconnectWallet(wcAccount) : onConnectWallet,

diff --git a/packages/extension-koni-ui/src/components/Modal/WalletConnect/ConnectWalletSuccessModal.tsx b/packages/extension-koni-ui/src/components/Modal/WalletConnect/ConnectWalletSuccessModal.tsx
@@ -1,14 +1,12 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ButtonProps } from '@subwallet/react-ui/es/button/button';
-
 import { CONNECT_WALLET_SUCCESS_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { toShort } from '@subwallet/extension-koni-ui/utils';
 import { Button, Field, Icon, ModalContext, PageIcon, SwModal } from '@subwallet/react-ui';
 import CN from 'classnames';
-import { ArrowCircleRight, CheckCircle, X } from 'phosphor-react';
+import { ArrowCircleRight, CheckCircle } from 'phosphor-react';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled, { useTheme } from 'styled-components';
@@ -33,17 +31,6 @@ function Component (props: Props): React.ReactElement<Props> {
     callback(address);
   }, [address, callback, inactiveModal]);
 
-  const rightButtonProps = useMemo((): ButtonProps => ({
-    icon: (
-      <Icon
-        phosphorIcon={X}
-        size={'small'}
-        weight={'fill'}
-      />
-    ),
-    onClick: onClose
-  }), [onClose]);
-
   const modalFooter = useMemo(() => {
     return (
       <>
@@ -66,17 +53,13 @@ function Component (props: Props): React.ReactElement<Props> {
     );
   }, [onClose, t]);
 
-  // TODO: Update UI
-
   return (
     <SwModal
-      className={CN(className, '-light-theme')}
-      closable={false}
+      className={CN(className, '-light-theme', 'modal-revert-header')}
       footer={modalFooter}
       id={modalId}
       maskClosable={true}
       onCancel={onClose}
-      rightIconProps={rightButtonProps}
       title={t('Success')}
     >
       <div className='__content-area'>

diff --git a/...ension-koni-ui/src/components/Modal/WalletConnect/DisconnectWalletConnectModalContent.tsx b/...ension-koni-ui/src/components/Modal/WalletConnect/DisconnectWalletConnectModalContent.tsx
@@ -0,0 +1,77 @@
+// Copyright 2019-2022 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { toShort } from '@subwallet/extension-koni-ui/utils';
+import { Field, Icon, PageIcon } from '@subwallet/react-ui';
+import CN from 'classnames';
+import { CheckCircle, Plugs } from 'phosphor-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled, { useTheme } from 'styled-components';
+
+interface Props extends ThemeProps {
+  address: string;
+}
+
+function Component (props: Props): React.ReactElement<Props> {
+  const { address, className = '' } = props;
+
+  const { t } = useTranslation();
+  const { token } = useTheme() as Theme;
+
+  return (
+    <div className={CN(className)}>
+      <div className='page-icon-overide'>
+        <PageIcon
+          color='#000'
+          iconProps={{
+            phosphorIcon: Plugs,
+            weight: 'fill'
+          }}
+        />
+      </div>
+      <div className='disconnect-text'>
+        {t('Do you want to disconnect from this account?')}
+      </div>
+      <Field
+        className={'address-field'}
+        content={toShort(address, 10, 16)}
+        suffix={(
+          <Icon
+            iconColor={token.colorSuccess}
+            phosphorIcon={CheckCircle}
+            size='sm'
+            weight='fill'
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+export const DisconnectWalletConnectModalContent = styled(Component)<Props>(({ theme: { token } }: Props) => {
+  return ({
+    background: 'linear-gradient(117deg, #FFD8E6 9.05%, #BCEBFF 91.43%)',
+    borderRadius: 24,
+    display: 'flex',
+    gap: token.size,
+    textAlign: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '24px 20px',
+
+    '.disconnect-text': {
+      fontSize: token.fontSizeSM,
+      fontWeight: token.bodyFontWeight,
+      lineHeight: token.lineHeightSM,
+      color: token.colorTextDark1
+    },
+
+    '.address-field': {
+      '.ant-field-content': {
+        color: `${token.colorTextTertiary} !important`
+      }
+    }
+  });
+});
diff --git a/...extension-koni-ui/src/components/Modal/WalletConnect/RequireConnectWalletModalContent.tsx b/...extension-koni-ui/src/components/Modal/WalletConnect/RequireConnectWalletModalContent.tsx
@@ -0,0 +1,70 @@
+// Copyright 2019-2022 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { WalletConnect } from '@subwallet/extension-koni-ui/components';
+import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { PageIcon } from '@subwallet/react-ui';
+import CN from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+type Props = ThemeProps
+
+function Component (props: Props): React.ReactElement<Props> {
+  const { className = '' } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div className={CN(className)}>
+      <div className='page-icon-overide'>
+        <PageIcon
+          color='#000'
+          iconProps={{
+            customIcon: (
+              <WalletConnect
+                height='1em'
+                width='1em'
+              />
+            ),
+            type: 'customIcon'
+          }}
+        />
+      </div>
+      <div className='require-text'>
+        {t('Wallet connection required')}
+      </div>
+      <div className='require-sub-text'>
+        {t('You need to connect your wallet to continue ')}
+      </div>
+    </div>
+  );
+}
+
+export const RequireConnectWalletModalContent = styled(Component)<Props>(({ theme: { token } }: Props) => {
+  return ({
+    background: 'linear-gradient(117deg, #FFD8E6 9.05%, #BCEBFF 91.43%)',
+    borderRadius: 24,
+    display: 'flex',
+    gap: token.size,
+    textAlign: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '24px 20px',
+
+    '.require-text': {
+      fontSize: token.fontSizeLG,
+      fontWeight: token.fontWeightStrong,
+      lineHeight: token.lineHeightLG,
+      color: token.colorTextDark1
+    },
+
+    '.require-sub-text': {
+      fontSize: token.fontSizeSM,
+      fontWeight: token.bodyFontWeight,
+      lineHeight: token.lineHeightSM,
+      color: token.colorTextDark1
+    }
+  });
+});
diff --git a/packages/extension-koni-ui/src/components/Modal/WalletConnect/index.ts b/packages/extension-koni-ui/src/components/Modal/WalletConnect/index.ts
@@ -2,4 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './ConnectWalletSuccessModal';
+export * from './DisconnectWalletConnectModalContent';
+export * from './RequireConnectWalletModalContent';
 export * from './WalletConnectWaitingSigningModal';
diff --git a/packages/extension-koni-ui/src/constants/modal.ts b/packages/extension-koni-ui/src/constants/modal.ts
@@ -67,5 +67,7 @@ export const ACCOUNT_INIT_POINT_MODAL = 'account-init-point-modal';
 export const ACCOUNT_ADD_POINT_MODAL = 'account-add-point-modal';
 
 /* Wallet */
+export const REQUIRE_CONNECT_WALLET_MODAL = 'require-connect-wallet-modal';
 export const CONNECT_WALLET_SUCCESS_MODAL = 'connect-wallet-success-modal';
+export const DISCONNECT_WALLET_CONNECT_MODAL = 'disconnect-wallet-connect-modal';
 export const WALLET_CONNECT_WAITING_SIGNING_MODAL = 'wallet-connect-waiting-signing-modal';