Merge pull request #615 from subquery/feat/updates

Feat/updates

.env.testnet

@@ -9,6 +9,6 @@ VITE_STABLE_TOKEN_ADDRESS=0x7E65A71046170A5b1AaB5C5cC64242EDF95CaBEA
 VITE_NETWORK=testnet
 VITE_FLEXPLAN_ENABLED=true
 VITE_GQL_PROXY=https://gql-proxy.thechaindata.com
-VITE_AUTH_URL=https://kepler-auth.thechaindata.com
+VITE_AUTH_URL=https://dev-auth.thechaindata.com
 VITE_NETWORK_DEPLOYMENT_ID=QmQDQa6id3QP1Tiznu7gE4ZjNw4urQnS6R9mgfvzANWgqb
 VITE_AIRDROP_DOMAIN=https://sq-airdrop-backend.thechaindata.com

package.json

@@ -33,6 +33,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18",
+    "@web3-name-sdk/core": "^0.1.5",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.9",

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="/static/connectWallet.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/components/IndexerDetails/IndexerName.tsx

@@ -7,7 +7,7 @@ import { limitQueue } from '@utils/limitation';
 import { toSvg } from 'jdenticon';
 
 import { useIndexerMetadata } from '../../hooks';
-import { useENS } from '../../hooks/useEns';
+import { useWeb3Name } from '../../hooks/useSpaceId';
 import { truncateAddress } from '../../utils';
 import Copy from '../Copy';
 import IPFSImage from '../IPFSImage';
@@ -38,38 +38,38 @@ export const IndexerName: React.FC<Props> = ({
   onClick,
   onAddressClick,
 }) => {
-  const { fetchEnsNameOnce, fetchEnsFromCache } = useENS(address);
-  const [ensName, setEnsName] = useState<string>();
+  const { fetchWeb3NameOnce, fetchWeb3NameFromCache } = useWeb3Name(address);
+  const [web3Name, setWeb3Name] = useState<string>();
 
   const sortedName = useMemo(() => {
-    return ensName || name || `${address.slice(0, 6)}...${address.slice(address.length - 4, address.length)}`;
-  }, [name, ensName]);
+    return web3Name || name || `${address.slice(0, 6)}...${address.slice(address.length - 4, address.length)}`;
+  }, [name, web3Name]);
 
-  const fetchEns = async () => {
-    const fetchedEns = await limitQueue.add(() => fetchEnsNameOnce());
-    if (fetchedEns) {
-      setEnsName(fetchedEns);
+  const fetchWeb3 = async () => {
+    const fetchedWeb3 = await limitQueue.add(() => fetchWeb3NameOnce());
+    if (fetchedWeb3) {
+      setWeb3Name(fetchedWeb3);
     }
   };
 
-  const initEns = async () => {
-    const cachedName = await fetchEnsFromCache();
+  const initWeb3 = async () => {
+    const cachedName = await fetchWeb3NameFromCache();
     if (cachedName) {
-      setEnsName(cachedName);
+      setWeb3Name(cachedName);
       return;
     }
 
-    fetchEns();
+    fetchWeb3();
   };
 
   useEffect(() => {
-    initEns();
+    initWeb3();
   }, []);
 
   return (
     <div
       className={styles.indexer}
-      onMouseEnter={fetchEns}
+      onMouseEnter={fetchWeb3}
       onClick={() => {
         onClick?.(address);
       }}