Oneclick login (#492)

* update react 18 and integrate keypom * fix destroy is not a function * update wallet icon alignment * disable keypom logout * fix useeffect return null * add near mobile wallet * add near mobile wallet * fix orderly issue for keypom wallet * Update sol icon * update sol token * disbaled tris for special wallet * update yarn.lock * Fix frax USDC ad * Update swiper ad announcement * remove log --------- Co-authored-by: yuho <[email protected]> Co-authored-by: xieqian <[email protected]> Co-authored-by: xieqian <[email protected]> Co-authored-by: lq0-github <[email protected]> Co-authored-by: xieqian <[email protected]> Co-authored-by: xieqian <[email protected]> Co-authored-by: xieqian <[email protected]> Co-authored-by: xieqian <[email protected]>
ref-finance · Mar 12, 2024 · 516af4e · 516af4e
1 parent 3779a02
commit 516af4e
Show file tree

Hide file tree

Showing 17 changed files with 1,825 additions and 161 deletions.
diff --git a/package.json b/package.json
@@ -89,15 +89,23 @@
     "@babel/plugin-proposal-optional-chaining": "^7.20.7",
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@craco/craco": "7.1.0",
+    "@keypom/selector": "^1.2.3",
     "@ledgerhq/devices": "^7.0.0",
     "@metamask/detect-provider": "^2.0.0",
+    "@near-js/accounts": "^1.0.2",
+    "@near-js/crypto": "^1.2.0",
+    "@near-js/keystores-browser": "^0.0.8",
+    "@near-js/transactions": "^1.1.0",
+    "@near-js/utils": "^0.0.5",
+    "@near-js/wallet-account": "^1.0.2",
     "@near-wallet-selector/core": "^8.9.1",
     "@near-wallet-selector/here-wallet": "^8.5.4",
     "@near-wallet-selector/ledger": "^8.9.1",
     "@near-wallet-selector/math-wallet": "^8.5.4",
     "@near-wallet-selector/meteor-wallet": "^8.5.4",
     "@near-wallet-selector/modal-ui": "^8.5.4",
     "@near-wallet-selector/my-near-wallet": "^8.5.4",
+    "@near-wallet-selector/near-mobile-wallet": "^8.9.5",
     "@near-wallet-selector/neth": "^7.9.1",
     "@near-wallet-selector/nightly": "^8.5.4",
     "@near-wallet-selector/sender": "^8.5.4",
@@ -144,14 +152,14 @@
     "path-browserify": "1.0.1",
     "postcss-cli": "^9.1.0",
     "postcss-preset-env": "^7.8.3",
-    "react": "^16 || ^17",
+    "react": "^18.2.0",
     "react-burger-menu": "^3.0.6",
     "react-circular-progressbar": "^2.1.0",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countdown": "^2.3.2",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^16.9.0 || ^17",
+    "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
     "react-icons": "^4.7.1",
     "react-infinite-scroll-component": "^6.1.0",

diff --git a/src/Content.tsx b/src/Content.tsx
@@ -73,7 +73,7 @@ export function Content() {
 
   const getAccount = useCallback(async (): Promise<Account | null> => {
     if (!accountId) {
-      return null;
+      return;
     }
 
     const provider = new providers.JsonRpcProvider({
@@ -94,7 +94,7 @@ export function Content() {
 
   useEffect(() => {
     if (!accountId) {
-      return null;
+      return;
     }
 
     getAccount()

diff --git a/src/components/forms/SlippageSelector.tsx b/src/components/forms/SlippageSelector.tsx
@@ -214,7 +214,15 @@ export default function SlippageSelector({
   }, [swapMode]);
 
   const [hoverSlider, setHoverSlider] = useState(false);
-
+  const selectedWalletId = window.selector?.store?.getState()?.selectedWalletId;
+  const trisDisbaled =
+    selectedWalletId === 'near-snap' ||
+    selectedWalletId === 'near-mobile-wallet';
+  useEffect(() => {
+    if (trisDisbaled) {
+      setEnableTri(false);
+    }
+  }, [trisDisbaled]);
   return (
     <div className="relative z-50 font-normal">
       <div
@@ -333,15 +341,26 @@ export default function SlippageSelector({
 
                 <div className="frcb w-full my-2 text-sm">
                   <div className="frcs">
-                    <TriAndAuroraLedger />
-
-                    <span className="ml-2 text-white text-sm">Trisolaris</span>
+                    <TriAndAuroraLedger
+                      className={`${trisDisbaled ? 'opacity-50' : ''}`}
+                    />
+
+                    <span
+                      className={`ml-2  text-sm ${
+                        trisDisbaled ? 'text-primaryText' : 'text-white'
+                      }`}
+                    >
+                      Trisolaris
+                    </span>
                   </div>
-
-                  <CustomSwitchSwap
-                    isOpen={enableTri}
-                    setIsOpen={setEnableTri}
-                  />
+                  {trisDisbaled ? (
+                    <CustomSwitchSwap isOpen={false} />
+                  ) : (
+                    <CustomSwitchSwap
+                      isOpen={enableTri}
+                      setIsOpen={setEnableTri}
+                    />
+                  )}
                 </div>
 
                 <div className="frcb w-full  text-sm">

diff --git a/src/components/icon/CrossSwapIcons.tsx b/src/components/icon/CrossSwapIcons.tsx
@@ -546,8 +546,8 @@ export const TriAndAurora = () => {
         stroke="#25323C"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M20.8652 18.4254C21.4605 17.379 23.1184 17.379 23.7136 18.4254L25.6633 21.8528C26.21 22.8139 25.4365 23.9564 24.2391 23.9564H20.3397C19.1424 23.9564 18.3688 22.8139 18.9155 21.8528L20.8652 18.4254ZM22.7642 18.865C22.5658 18.5162 22.0131 18.5162 21.8147 18.865L19.865 22.2924C19.6828 22.6128 19.9406 22.9936 20.3397 22.9936H24.2391C24.6382 22.9936 24.8961 22.6127 24.7139 22.2924L22.7642 18.865Z"
         fill="white"
       />
@@ -574,9 +574,10 @@ export const TriAndAurora = () => {
   );
 };
 
-export const TriAndAuroraLedger = () => {
+export const TriAndAuroraLedger = (props: any) => {
   return (
     <svg
+      {...props}
       width="30"
       height="29"
       viewBox="0 0 30 29"
@@ -609,8 +610,8 @@ export const TriAndAuroraLedger = () => {
         stroke="#25323C"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M20.8652 18.4254C21.4605 17.379 23.1184 17.379 23.7136 18.4254L25.6633 21.8528C26.21 22.8139 25.4365 23.9564 24.2391 23.9564H20.3397C19.1424 23.9564 18.3688 22.8139 18.9155 21.8528L20.8652 18.4254ZM22.7642 18.865C22.5658 18.5162 22.0131 18.5162 21.8147 18.865L19.865 22.2924C19.6828 22.6128 19.9406 22.9936 20.3397 22.9936H24.2391C24.6382 22.9936 24.8961 22.6127 24.7139 22.2924L22.7642 18.865Z"
         fill="white"
       />
@@ -704,8 +705,8 @@ export const Inch1IconAndAurora = () => {
       />
       <path
         opacity="0.3"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M7.84258 6.20397C8.43948 5.15467 10.102 5.15466 10.6989 6.20397L12.654 9.64088C13.2023 10.6046 12.4266 11.7503 11.2259 11.7503H7.31564C6.11494 11.7503 5.33925 10.6046 5.88747 9.64089L7.84258 6.20397ZM9.74681 6.64479C9.54784 6.29502 8.99366 6.29502 8.79469 6.64479L6.83959 10.0817C6.65685 10.4029 6.91541 10.7849 7.31564 10.7849H11.2259C11.6261 10.7849 11.8847 10.4029 11.7019 10.0817L9.74681 6.64479Z"
         fill="white"
       />
@@ -795,20 +796,20 @@ export const RefIconNew = () => {
         fill="#00C6A2"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M16.6554 15.7747C16.5759 15.7747 16.4968 15.7726 16.4182 15.7685V12.225L20.2723 8.64625C20.816 9.38792 21.137 10.303 21.137 11.2931C21.137 13.7682 19.1306 15.7747 16.6554 15.7747ZM19.2656 7.64968L16.4182 10.2937V6.81769C16.4968 6.8136 16.5759 6.81152 16.6554 6.81152C17.6293 6.81152 18.5306 7.12213 19.2656 7.64968Z"
         fill="white"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M15.9476 6.81348H11.7019V11.0026L13.6071 12.9078L15.9476 10.7344V6.81348ZM15.9476 12.6657L13.5707 14.8729L11.7019 13.0041V21.4376H15.9476V12.6657Z"
         fill="white"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.2311 6.81348H6.51367V12.8897L10.0518 9.35151L11.2311 10.5308V6.81348ZM11.2311 12.5322L10.0518 11.353L6.51367 14.8911V21.4376H11.2311V12.5322Z"
         fill="white"
       />

diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
@@ -170,9 +170,10 @@ export function AccountModel(props: any) {
   const [copyIconHover, setCopyIconHover] = useState<boolean>(false);
 
   const handleClick = (e: any) => {
-    if (!accountWrapRef.current.contains(e.target)) {
-      props.closeAccount();
-    }
+    // this not working anymore
+    // if (!accountWrapRef.current.contains(e.target)) {
+    //   props.closeAccount();
+    // }
   };
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -191,6 +192,9 @@ export function AccountModel(props: any) {
       setCopyButtonDisabled(false);
     }, 1000);
   }
+  const isDisableChangeWallet = ['keypom', 'Keypom Account'].includes(
+    currentWalletName
+  );
   return (
     <div
       className="fixed left-0 bottom-0 w-screen bg-black bg-opacity-70"
@@ -205,17 +209,15 @@ export function AccountModel(props: any) {
     >
       <div className="w-full bg-cardBg" ref={accountWrapRef}>
         <div className="mx-7 pt-4 flex justify-between items-start">
-          <div className="text-white text-lg text-left flex-col flex">
+          <div className="mb-accountId text-white text-lg text-left flex-col flex">
             <span>{getAccountName(wallet.getAccountId())}</span>
 
             <span className="flex items-center ">
-              <span className="mr-1">
-                {!currentWalletIcon ? (
-                  <div className="w-3 h-3"></div>
-                ) : (
+              {currentWalletIcon && (
+                <span className="mr-1">
                   <img src={currentWalletIcon} className="w-3 h-3" alt="" />
-                )}
-              </span>
+                </span>
+              )}
               <span className="text-xs text-primaryText">
                 {currentWalletName || '-'}
               </span>
@@ -263,7 +265,12 @@ export function AccountModel(props: any) {
 
         <div className="flex mx-7 my-3 items-center text-xs justify-center">
           <button
-            className="text-BTCColor mr-2 w-1/2 py-2.5 border rounded-lg hover:border-transparent hover:bg-BTCColor hover:bg-opacity-20 border-BTCColor border-opacity-30"
+            className={`mr-2 w-1/2 py-2.5 border rounded-lg border-opacity-30 ${
+              isDisableChangeWallet
+                ? 'border-gray-500 text-gray-500 cursor-default'
+                : 'text-BTCColor hover:border-transparent hover:bg-opacity-20 hover:bg-BTCColor border-BTCColor'
+            }`}
+            disabled={isDisableChangeWallet}
             onClick={() => {
               signOut();
             }}
@@ -272,10 +279,15 @@ export function AccountModel(props: any) {
           </button>
 
           <button
-            className="text-gradientFrom ml-2 w-1/2 py-2.5 border rounded-lg hover:border-transparent hover:bg-gradientFrom hover:bg-opacity-20 border-gradientFrom border-opacity-30"
+            className={`ml-2 w-1/2 py-2.5 border rounded-lg border-opacity-30 ${
+              isDisableChangeWallet
+                ? 'border-gray-500 text-gray-500 cursor-default'
+                : 'text-gradientFrom border-gradientFrom hover:border-transparent hover:bg-gradientFrom hover:bg-opacity-20'
+            }`}
             onClick={async () => {
               modal.show();
             }}
+            disabled={isDisableChangeWallet}
           >
             <FormattedMessage id="change" defaultMessage={'Change'} />
           </button>
@@ -649,7 +661,7 @@ export function MobileNavBar(props: any) {
                       setShowTip(false);
                     }}
                   >
-                    <div>{getAccountName(wallet.getAccountId())}</div>
+                    <span>{getAccountName(wallet.getAccountId())}</span>
 
                     {hasBalanceOnRefAccount ? (
                       <span className="ml-1.5">

diff --git a/src/components/layout/NavigationBar.tsx b/src/components/layout/NavigationBar.tsx
@@ -285,6 +285,9 @@ function AccountEntry({
   }
 
   const isMobile = useClientMobile();
+  const isDisableChangeWallet = ['keypom', 'Keypom Account'].includes(
+    currentWalletName
+  );
 
   return (
     <div
@@ -395,17 +398,15 @@ function AccountEntry({
                   <span>{getAccountName(wallet.getAccountId())}</span>
 
                   <span className="flex items-center ">
-                    <span className="mr-1">
-                      {!currentWalletIcon ? (
-                        <div className="w-3 h-3"></div>
-                      ) : (
+                    {currentWalletIcon && (
+                      <span className="mr-1">
                         <img
                           src={currentWalletIcon}
-                          className="w-3 h-3"
+                          className="w-3 h-3 mr-1"
                           alt=""
                         />
-                      )}
-                    </span>
+                      </span>
+                    )}
                     <span className="text-xs text-primaryText">
                       {currentWalletName || '-'}
                     </span>
@@ -465,10 +466,15 @@ function AccountEntry({
 
               <div className="flex mx-7 my-3 items-center text-xs justify-center">
                 <button
-                  className="text-BTCColor mr-2 w-1/2 py-1.5 border rounded-lg hover:border-transparent hover:bg-BTCColor hover:bg-opacity-20 border-BTCColor border-opacity-30"
+                  className={`mr-2 w-1/2 py-1.5 border rounded-lg border-opacity-30 ${
+                    isDisableChangeWallet
+                      ? 'border-gray-500 text-gray-500 cursor-default'
+                      : 'text-BTCColor hover:border-transparent hover:bg-opacity-20 hover:bg-BTCColor border-BTCColor'
+                  }`}
                   onClick={() => {
                     signOut();
                   }}
+                  disabled={isDisableChangeWallet}
                 >
                   <FormattedMessage
                     id="disconnect"
@@ -477,10 +483,15 @@ function AccountEntry({
                 </button>
 
                 <button
-                  className="text-gradientFrom ml-2 w-1/2 py-1.5 border rounded-lg hover:border-transparent hover:bg-gradientFrom hover:bg-opacity-20 border-gradientFrom border-opacity-30"
+                  className={`ml-2 w-1/2 py-1.5 border rounded-lg border-opacity-30 ${
+                    isDisableChangeWallet
+                      ? 'border-gray-500 text-gray-500 cursor-default'
+                      : 'text-gradientFrom border-gradientFrom hover:border-transparent hover:bg-gradientFrom hover:bg-opacity-20'
+                  }`}
                   onClick={async () => {
                     modal.show();
                   }}
+                  disabled={isDisableChangeWallet}
                 >
                   <FormattedMessage id="change" defaultMessage={'Change'} />
                 </button>