Merge branch 'main' into develop

HeliSwap · Jan 11, 2024 · 11eb043 · 11eb043
2 parents 1a296de + 6c1bec7
commit 11eb043
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,15 +1,20 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { hethers } from '@hashgraph/hethers';
 import { GlobalContext } from '../providers/Global';
 import { Md5 } from 'ts-md5/dist/md5';
+import Tippy from '@tippyjs/react';
+import axios from 'axios';
 
 import Button from './Button';
 import Modal from './Modal';
+import Icon from './Icon';
 import ConnectModalContent from './Modals/ConnectModalContent';
 import UserAccountModalContent from './Modals/UserAccountModalContent';
 
 import { formatHBARStringToPrice, formatStringETHtoPriceFormatted } from '../utils/numberUtils';
 
+import { KeyType } from '../interfaces/common';
+
 import { BALLANCE_FETCH_INTERVAL, useQueryOptionsProvideSwapRemove } from '../constants';
 import usePoolsByTokensList from '../hooks/usePoolsByTokensList';
 
@@ -58,6 +63,7 @@ const Header = () => {
 
   const [showUserAccountModal, setShowUserAccountModal] = useState(false);
   const [userBalance, setUserBalance] = useState('0.0');
+  const [keyType, setKeyType] = useState<KeyType>();
 
   const handleConnectButtonClick = () => {
     setShowConnectModal(true);
@@ -91,6 +97,21 @@ const Header = () => {
     };
   }, [getUserTokensData]);
 
+  useEffect(() => {
+    const getUserAccountType = async (userId: string) => {
+      const url = `${process.env.REACT_APP_MIRROR_NODE_URL}/api/v1/accounts/${userId}`;
+      try {
+        const { data } = await axios(url);
+        setKeyType(data.key._type);
+      } catch (e) {
+        console.error(e);
+        return 0;
+      }
+    };
+
+    userId && getUserAccountType(userId);
+  }, [userId]);
+
   return (
     <div className="container-header p-3 p-md-5">
       <div className="d-flex justify-content-between justify-content-md-end align-items-center">
@@ -162,7 +183,20 @@ const Header = () => {
                 className="container-address mt-2 mt-sm-0"
                 onClick={() => setShowUserAccountModal(true)}
               >
-                <div className="text-small">{userId}</div>
+                <div
+                  className={`text-small ${
+                    keyType === KeyType.ECDSA_SECP256K1 ? 'text-danger' : ''
+                  }`}
+                >
+                  {userId}
+                </div>
+                {keyType === KeyType.ECDSA_SECP256K1 ? (
+                  <Tippy content="ECDSA created wallets, or wallets created within Metamask, are currently not supported on the HeliSwap App.">
+                    <span className="ms-2">
+                      <Icon size="small" color="danger" name="warning" />
+                    </span>
+                  </Tippy>
+                ) : null}
                 <img
                   className="img-profile ms-3"
                   src={`https://www.gravatar.com/avatar/${Md5.hashStr(userId)}/?d=identicon`}

diff --git a/src/interfaces/common.ts b/src/interfaces/common.ts
@@ -145,3 +145,8 @@ export interface IClaimdropData {
   claimdropTitle?: string;
   claimdropDescription?: string;
 }
+
+export enum KeyType {
+  ED25519 = 'ED25519',
+  ECDSA_SECP256K1 = 'ECDSA_SECP256K1',
+}