Merge pull request #611 from subquery/feat/update-wallet-component

feat(SQN-2106): update connect component

src/components/ConnectWallet/ConnectWallet.module.less

@@ -1,77 +1,24 @@
 .container {
   display: flex;
   flex-direction: column;
-
-  padding: 2rem 3rem;
+  align-items: center;
+  padding: 24px;
   background: white;
   margin: 1rem 0;
   border-radius: 8px;
+  max-width: 420px;
+
+  box-shadow: 0px 10px 20px 0px rgba(67, 136, 221, 0.06);
 }
 
 .subtitle {
   color: var(--gray700);
   margin: 1rem 0;
+  text-align: center;
 }
 
-.walletContainer {
-  border-radius: 8px !important;
-  margin: 1rem 0;
-}
-
-.walletContainer::before {
-  border-radius: 8px !important;
-}
-
-.walletContainer :is(p, i) {
-  background: unset;
-  -webkit-background-clip: unset;
-  -webkit-text-fill-color: unset;
-}
-
-.wallet {
-  width: 400px;
-  cursor: pointer;
-}
-
-.title {
-  font-size: 26px;
-  font-weight: 600;
-}
-
-.walletIcon {
-  width: 180px;
-  margin: 1rem 0;
-  padding-right: 12px;
-}
-
-.walletSubtitle {
-  color: var(--gray700);
-}
-
-.arrow {
-  font-size: 30px;
-  color: var(--gray900);
-}
-
-.connectButton {
-  will-change: transform;
-  font-weight: 700;
-  line-height: 1;
-  height: 44px;
-  transition-timing-function: ease;
-  transition-duration: .1s;
-  font-family: var(--sq-font-family);
-  padding: 0 24px;
-  border-radius: 9999px;
-  background: #fff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  gap: 8px;
-}
-
-.connectButton + .connectButton {
-  margin-top: 20px;
+.connectBtn {
+  &:hover {
+    transform: scale(1.03);
+  }
 }

src/components/ConnectWallet/ConnectWallet.tsx

@@ -4,7 +4,8 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
-import { Button, Typography } from '@subql/components';
+import { Typography } from '@subql/components';
+import { Button } from 'antd';
 import clsx from 'clsx';
 
 import styles from './ConnectWallet.module.less';
@@ -15,91 +16,39 @@ type Props = {
   className?: string;
 };
 
-export const SUPPORTED_NETWORKS = [
-  {
-    icon: '/static/metaMask.svg',
-    name: 'MetaMask',
-    desc: 'Connect with Metamask browser extension',
-  },
-  {
-    icon: '/static/walletConnect.svg',
-    name: 'WalletConnect',
-    desc: 'Connect with WalletConnect browser extension',
-  },
-  {
-    icon: '/static/talisman.png',
-    name: 'Talisman',
-    desc: 'Connect with Talisman browser extension',
-  },
-  {
-    icon: '/static/rainbow.svg',
-    name: 'Rainbow',
-    desc: 'Connect with Rainbow browser extension',
-  },
-];
-
-const Wallet: React.FC<{ description?: string; name: string; icon: string; onClick?: () => void }> = ({
-  icon,
-  name,
-  onClick,
-  description,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Button
-      type="secondary"
-      className={styles.walletContainer}
-      onClick={onClick}
-      leftItem={
-        <div className={styles.wallet}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <img src={icon} alt="wallet logo" style={{ width: 36, height: 36, marginRight: 10 }} />
-            <Typography variant="h4" style={{ color: '#000' }}>
-              {name}
-            </Typography>
-          </div>
-          <Typography variant="text" className={styles.walletSubtitle}>
-            {description ?? t('connectWallet.metamaskDesc')}
-          </Typography>
-          <i className={['bi-arrow-right', styles.arrow].join(' ')} role="img" aria-label="arrow right" />
-        </div>
-      }
-    />
-  );
-};
-
 export const ConnectWallet: React.FC<Props> = ({ title, subTitle, className }) => {
   const { t } = useTranslation();
 
   return (
     <div className={clsx(styles.container, className)}>
-      <Typography variant="h4" className={styles.title}>
+      <img
+        src="/public/static/connect.png"
+        alt="connect wallet"
+        width="238"
+        height="238"
+        style={{ objectFit: 'contain' }}
+      ></img>
+      <Typography variant="h4" className={styles.title} weight={600}>
         {title || t('connectWallet.title')}
       </Typography>
       <Typography variant="text" className={styles.subtitle}>
         {subTitle || t('connectWallet.subtitle')}
       </Typography>
 
-      {SUPPORTED_NETWORKS.map((supportConnector) => {
-        const { icon, name, desc } = supportConnector;
-        return (
-          <ConnectButton.Custom key={name}>
-            {({ openConnectModal }) => {
-              return (
-                <Wallet
-                  icon={icon}
-                  name={name}
-                  description={desc}
-                  onClick={() => {
-                    openConnectModal();
-                  }}
-                ></Wallet>
-              );
-            }}
-          </ConnectButton.Custom>
-        );
-      })}
+      <ConnectButton.Custom>
+        {({ openConnectModal }) => (
+          <Button
+            shape="round"
+            size="large"
+            onClick={() => openConnectModal()}
+            type="primary"
+            style={{ width: '100%', background: 'var(--sq-blue600)' }}
+            className={styles.connectBtn}
+          >
+            Connect Wallet
+          </Button>
+        )}
+      </ConnectButton.Custom>
     </div>
   );
 };

src/i18n/en/explorer.ts

@@ -209,8 +209,9 @@ const translation = {
     deploymentId: 'Deployment ID',
   },
   connectWallet: {
-    title: 'Connect wallet',
-    subtitle: 'To participate in our test network, please start by connecting your wallet first.',
+    title: 'Connect your wallet',
+    subtitle:
+      "To continue, please connect your wallet to the SubQuery Network. If you don't have a wallet, you can select a provider and create one now.",
     connectWith: 'Connect With:',
     metamaskDesc: 'Connect with Metamask browser extension',
     talismanDesc: 'Connect with Talisman browser extension',