Merge branch 'main' of https://github.com/TrustlessComputer/bvm-website…

… into feat/dynamic-drag # Conflicts: # src/modules/blockchains/Buy/hooks/useCheckNodes.ts
TrustlessComputer · Sep 4, 2024 · 55c2079 · 55c2079
2 parents 793c5bb + 279cbbf
commit 55c2079
Show file tree

Hide file tree

Showing 47 changed files with 1,962 additions and 96 deletions.
diff --git a/src/components/ContactUsModal/index.tsx b/src/components/ContactUsModal/index.tsx
@@ -1,7 +1,7 @@
 import { Flex, Text, Input, Textarea } from '@chakra-ui/react';
 import BaseModal from '../BaseModal';
 import s from './styles2.module.scss';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { isEmpty } from 'lodash';
 
 import { submitContact } from '@/services/api/l2services';
@@ -12,6 +12,7 @@ import { Select } from '@chakra-ui/react';
 import { useL2ServiceTracking } from '@/hooks/useL2ServiceTracking';
 import { DATA_BRAND } from '@/modules/landingV3/data-sections';
 import Image from 'next/image';
+import { throttle } from 'lodash';
 
 const SUBJECT_LIST = [
   `I'd like to build a Rollup on Bitcoin`,
@@ -106,8 +107,17 @@ const ContactUsModal = ({
     }
   };
 
-  const submitHandler = async () => {
+  const submitHandler = async (
+    methodInputStr: any,
+    methodContact: METHODS_CONTACT_ENUM,
+  ) => {
+    // console.log('submitHandler Params ', {
+    //   methodInputStr,
+    //   methodContact,
+    // });
+
     tracking('SUBMIT_CONTACT_US');
+
     try {
       let valid = true;
       // if (!valideYourXAcc(yourXAcc)) {
@@ -120,12 +130,12 @@ const ContactUsModal = ({
       //   valid = false;
       // }
 
-      if (!validateMethodContact(methodInput)) {
+      if (!validateMethodContact(methodInputStr)) {
         valid = false;
       }
 
-      // console.log('valid ', valid);
-      // console.log('methodContact ', methodContact);
+      // console.log('LOG valid ', valid);
+      // console.log('LOG methodContact ', methodContact);
 
       if (valid) {
         let submitParams: SubmitFormParams = {
@@ -144,21 +154,21 @@ const ContactUsModal = ({
         if (methodContact === METHODS_CONTACT_ENUM.Email) {
           submitParams = {
             ...submitParams,
-            email: methodInput,
+            email: methodInputStr,
           };
         }
 
         if (methodContact === METHODS_CONTACT_ENUM.Telegram) {
           submitParams = {
             ...submitParams,
-            telegram: methodInput,
+            telegram: methodInputStr,
           };
         }
 
         if (methodContact === METHODS_CONTACT_ENUM.Twitter) {
           submitParams = {
             ...submitParams,
-            twName: methodInput,
+            twName: methodInputStr,
           };
         }
 
@@ -176,6 +186,14 @@ const ContactUsModal = ({
     }
   };
 
+  const submitHanlderDebouce = useCallback(
+    throttle(submitHandler, 500, {
+      trailing: true,
+      leading: false,
+    }),
+    [],
+  );
+
   const renderXfield = () => {
     return (
       <Flex
@@ -636,7 +654,10 @@ const ContactUsModal = ({
             {/*  }}*/}
             {/*>*/}
             {/*</Flex>*/}
-            <div className={s.submitBtn} onClick={submitHandler}>
+            <div
+              className={s.submitBtn}
+              onClick={() => submitHanlderDebouce(methodInput, methodContact)}
+            >
               <p>Submit</p>
             </div>
           </Flex>

diff --git a/src/components/MagicIcon/index.tsx b/src/components/MagicIcon/index.tsx
@@ -0,0 +1,43 @@
+import { ReactElement } from 'react';
+
+export default function MagicIcon({
+  color,
+}: {
+  color: 'white' | 'black';
+}): ReactElement {
+  return (
+    <div>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_38364_48276)">
+          <path
+            d="M4.95164 2.74286L6.8564 3.80952L5.7897 1.90476L6.8564 0L4.95164 1.06667L3.04688 0L4.11354 1.90476L3.04688 3.80952L4.95164 2.74286Z"
+            fill={color}
+          />
+          <path
+            d="M14.0949 10.2073L12.1902 9.14062L13.2569 11.0454L12.1902 12.9501L14.0949 11.8835L15.9997 12.9501L14.933 11.0454L15.9997 9.14062L14.0949 10.2073Z"
+            fill={color}
+          />
+          <path
+            d="M15.9997 0L14.0949 1.06667L12.1902 0L13.2569 1.90476L12.1902 3.80952L14.0949 2.74286L15.9997 3.80952L14.933 1.90476L15.9997 0Z"
+            fill={color}
+          />
+          <path
+            d="M10.2096 4.03521C9.90479 3.73045 9.44765 3.73045 9.14289 4.03521L0.228571 12.9495C-0.0761905 13.2543 -0.0761905 13.7114 0.228571 14.0162L1.98095 15.7685C2.28571 16.0733 2.74286 16.0733 3.04762 15.7685L11.9619 6.85426C12.2667 6.5495 12.2667 6.09236 11.9619 5.78759L10.2096 4.03521ZM9.37146 8.22569L7.77146 6.62569L9.60003 4.79712L11.2 6.39712L9.37146 8.22569Z"
+            fill={color}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_38364_48276">
+            <rect width="16" height="16" fill={color} />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -8,13 +8,9 @@ const MULTIPLE_POINT_SYMBOL = 'SHARD';
 const BVM_TOKEN_SYMBOL = '$BVM';
 
 export {
-  MIN_DECIMAL,
-  MAX_DECIMAL,
-  NATIVE_ETH_ADDRESS,
-  METAMASK_DOWNLOAD_PAGE,
-  MULTIPLE_POINT_SYMBOL,
-  BVM_TOKEN_SYMBOL,
+  BVM_TOKEN_SYMBOL, MAX_DECIMAL, METAMASK_DOWNLOAD_PAGE, MIN_DECIMAL, MULTIPLE_POINT_SYMBOL, NATIVE_ETH_ADDRESS
 };
+
 
 export const ALLOWED_ATTRIBUTES = {
   '*': ['style'],

diff --git a/src/modules/blockchains/Buy/component4/Lego/index.tsx b/src/modules/blockchains/Buy/component4/Lego/index.tsx
@@ -1,16 +1,15 @@
-import React from 'react';
 import cn from 'classnames';
+import React from 'react';
 
 import SvgInset from '@/components/SvgInset';
 
 import { adjustBrightness } from '../../utils';
 
-import styles from './styles.module.scss';
-import { Box, Flex, Image, Tooltip } from '@chakra-ui/react';
-import { FieldModel } from '@/types/customize-model';
-import { legoDragging } from '@/modules/blockchains/dapp/ui-helper/LegoDragging';
-import { useCaptureStore } from '@/modules/blockchains/Buy/stores/index_v3';
 import { iconToolNames } from '@/modules/blockchains/Buy/Buy.data';
+import { useCaptureStore } from '@/modules/blockchains/Buy/stores/index_v3';
+import { FieldModel } from '@/types/customize-model';
+import { Flex, Image, Tooltip } from '@chakra-ui/react';
+import styles from './styles.module.scss';
 
 type Position =
   | {
@@ -50,6 +49,7 @@ type Props = {
   children?: React.ReactNode;
   preview?: boolean;
   checked?: boolean;
+  legoAI?: boolean;
   fields?: FieldModel[];
   infoLego?: {
     title: string;
@@ -64,6 +64,7 @@ const Lego = (props: Props) => {
     background = '#c4513a',
     icon,
     title,
+    legoAI,
     tooltip,
     titleInLeft = false,
     titleInRight = false,
@@ -117,7 +118,13 @@ const Lego = (props: Props) => {
       }}
       ref={legoRef}
     >
-      <div className={cn(styles.lego__piece, styles.lego__piece__top)}>
+      <div
+        className={cn(
+          styles.lego__piece,
+          styles.lego__piece__top,
+          legoAI && styles.lego__piece__top__ai,
+        )}
+      >
         <SvgInset svgUrl="/landingV3/svg/stud.svg" size={28} />
       </div>
 

diff --git a/src/modules/blockchains/Buy/component4/Lego/styles.module.scss b/src/modules/blockchains/Buy/component4/Lego/styles.module.scss
@@ -28,7 +28,7 @@
     left: 11px;
 
     &__top {
-      top: -1px;
+      top: -1.5px;
       svg path {
         fill: #ffffff !important;
       }
@@ -106,7 +106,7 @@
 
 .titleSingle {
   width: max-content;
-  padding-top: .15em;
+  padding-top: 0.15em;
   display: block;
   // font-size: 14px;
   // font-weight: 500;
@@ -122,3 +122,13 @@
     height: 100%;
   }
 }
+
+.lego__piece__top__ai {
+  top: -1px;
+  svg path {
+    fill: #ffeee8 !important;
+  }
+  &::after {
+    background-color: #ffeee8;
+  }
+}
diff --git a/src/modules/blockchains/Buy/components3/ComputerNameInput/index_v2.tsx b/src/modules/blockchains/Buy/components3/ComputerNameInput/index_v2.tsx
@@ -19,6 +19,7 @@ const ComputerNameInput = () => {
     useChainProvider();
   const {
     computerName,
+    isComputerNameFocused,
     setComputerName,
     setComputerNameFocused,
     setComputerNameErrMsg,
@@ -56,15 +57,19 @@ const ComputerNameInput = () => {
   };
 
   useEffect(() => {
-    let computerName;
+    let computerNameStr;
     if (isCreateChainFlow) {
-      computerName = `${PREFIX} ${chainID}`;
+      if (isComputerNameFocused) {
+        computerNameStr = `${computerName}`;
+      } else {
+        computerNameStr = `${PREFIX} ${chainID}`;
+      }
     } else {
-      computerName = order?.chainName || '';
+      computerNameStr = order?.chainName || '';
     }
-    setChainName(computerName);
-    setComputerName(computerName);
-  }, [isCreateChainFlow, order, chainID]);
+    setChainName(computerNameStr);
+    setComputerName(computerNameStr);
+  }, [isCreateChainFlow, order, chainID, isComputerNameFocused, computerName]);
 
   return (
     <div className={`${isCapture ? s.setLine : ''} ${s.wrapper_input}`}>
@@ -77,6 +82,7 @@ const ComputerNameInput = () => {
         onChange={(e: any) => {
           const text = e.target.value;
           onChangeHandler(text);
+          setComputerNameFocused(true);
         }}
         onBlur={(e: any) => {
           const text = e.target.value;

diff --git a/src/modules/blockchains/Buy/components3/NetworkDropdown/index.tsx b/src/modules/blockchains/Buy/components3/NetworkDropdown/index.tsx
@@ -78,6 +78,12 @@ const NetworkDropdown = ({}: Props) => {
     [currentValue?.icon],
   );
 
+  React.useEffect(() => {
+    if (field['network']?.value === null) {
+      setField('network', options[0].key, true);
+    }
+  }, [field['network']?.value]);
+
   return (
     <div
       className={cn(styles.dropdown, {

diff --git a/src/modules/blockchains/Buy/hooks/useCheckNodes.ts b/src/modules/blockchains/Buy/hooks/useCheckNodes.ts
@@ -22,6 +22,7 @@ import {
 import useDappsStore from '../stores/useDappStore';
 import { needReactFlowRenderSignal } from '../studio/ReactFlowRender';
 import { cloneDeep } from '../utils';
+import { IModelOption } from '@/types/customize-model';
 import useFormChain from './useFormChain';
 
 export default function useCheckNodes() {
@@ -182,7 +183,7 @@ export default function useCheckNodes() {
             title: thisDapp.title,
             dapp: thisDapp,
             baseIndex: 0,
-            categoryOption: {},
+            categoryOption: {} as IModelOption,
             ids: [],
             targetHandles: [`bridge_apps-t-${rootNode}`],
             sourceHandles: [],
@@ -276,7 +277,7 @@ export default function useCheckNodes() {
             title: thisDapp.title,
             dapp: thisDapp,
             baseIndex: 0,
-            categoryOption: {},
+            categoryOption: {} as IModelOption,
             ids: [],
             targetHandles: [`gaming_apps-t-${rootNode}`],
             sourceHandles: [],

diff --git a/src/modules/blockchains/Buy/hooks/useFetchingTemplate.ts b/src/modules/blockchains/Buy/hooks/useFetchingTemplate.ts
@@ -23,8 +23,15 @@ import { parseStakingPools } from '../../dapp/parseUtils/staking';
 import { useChainProvider } from '../../detail_v4/provider/ChainProvider.hook';
 import { parseDappModel } from '../../utils';
 import { nodeKey } from '../component4/YourNodes/node.constants';
-import { draggedDappIndexesSignal, draggedIds2DSignal, templateIds2DSignal } from '../signals/useDragSignal';
-import { formDappSignal, formTemplateDappSignal } from '../signals/useFormDappsSignal';
+import {
+  draggedDappIndexesSignal,
+  draggedIds2DSignal,
+  templateIds2DSignal,
+} from '../signals/useDragSignal';
+import {
+  formDappSignal,
+  formTemplateDappSignal,
+} from '../signals/useFormDappsSignal';
 import { useTemplateFormStore } from '../stores/useDappStore';
 import useFlowStore, { AppNode, AppState } from '../stores/useFlowStore';
 import useUpdateFlowStore from '../stores/useUpdateFlowStore';
@@ -413,17 +420,19 @@ export default function useFetchingTemplate() {
 
     startIndex += yoloGames.length;
     const parsedWalletData = walletType ? parseWalletType(walletType) : [];
-    const parsedWalletForm = walletType ? parseDappModel({
-      key: DappType.walletType,
-      model: parsedWalletData,
-      startIndex: startIndex,
-    }) : {};
+    const parsedWalletForm = walletType
+      ? parseDappModel({
+          key: DappType.walletType,
+          model: parsedWalletData,
+          startIndex: startIndex,
+        })
+      : {};
 
     console.log('[useFetchingTemplate] parsedTokensData', {
       tokens,
       airdrops,
       stakingPools,
-      parsedWalletData
+      parsedWalletData,
     });
 
     setTemplateDapps([
@@ -537,9 +546,13 @@ export default function useFetchingTemplate() {
     if (isUpdateFlow && order) {
       setTemplate(order.selectedOptions || []);
     } else {
-      // initTemplate(0);
-      console.log('LOG -- templateDefault -- ', templateDefault);
-      setTemplate(templateDefault || []);
+      const template = searchParams.get('template');
+
+      if (template) {
+        setTemplate(templateDefault || []);
+      } else {
+        setTemplate([]);
+      }
     }
   }, [categoriesTemplates, isUpdateFlow, templateDefault]);
 }