Merge branch '0xd22f9c/ai-socket-connect' into staging

TrustlessComputer · Sep 18, 2024 · d70fb11 · d70fb11
2 parents 4fa20d3 + 4f6be3b
commit d70fb11
Show file tree

Hide file tree

Showing 164 changed files with 5,537 additions and 1,601 deletions.
diff --git a/src/app/heartbeats/tx/[id]/page.tsx b/src/app/heartbeats/tx/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { CDN_URL } from '@/config';
 import MainLayout from '@/layouts/MainLayout';
 import TxExplorerModule from '@/modules/l2-rollup-detail/TxExplorer';
 import { Metadata } from 'next';
@@ -6,6 +7,8 @@ const TITLE = 'Bitcoin Heartbeat | Welcome to the future of Bitcoin.';
 const DESCRIPTION =
   'Provide transparent and verifiable insights into Bitcoin rollups.';
 
+const THUMBNAIL = `${CDN_URL}/pages/bvm-studio/bvm-heartbeat-metadata.png`;
+
 export const metadata: Metadata = {
   applicationName: TITLE,
   title: {
@@ -22,7 +25,7 @@ export const metadata: Metadata = {
     },
     images: [
       {
-        url: '/heartbeat/metadata.png',
+        url: THUMBNAIL,
         width: 1200,
         height: 630,
         alt: TITLE,
@@ -36,7 +39,7 @@ export const metadata: Metadata = {
       template: '',
     },
     description: DESCRIPTION,
-    images: '/heartbeat/metadata.png',
+    images: THUMBNAIL,
   },
 };
 

diff --git a/src/components/TextNumberTooSmallDecimal/index.tsx b/src/components/TextNumberTooSmallDecimal/index.tsx
@@ -1,11 +1,11 @@
-import { MIN_DECIMAL } from "@/constants/constants";
-import { formatCurrency } from "@/utils/format";
-import { Text } from "@chakra-ui/react";
-import BigNumber from "bignumber.js";
-import cs from "classnames";
-import { isNaN } from "lodash";
-import React, { useMemo } from "react";
-import s from "./styles.module.scss";
+import { MIN_DECIMAL } from '@/constants/constants';
+import { formatCurrency } from '@/utils/format';
+import { Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import cs from 'classnames';
+import { isNaN } from 'lodash';
+import React, { useMemo } from 'react';
+import s from './styles.module.scss';
 
 interface IProps {
   value: string;
@@ -14,6 +14,7 @@ interface IProps {
   isSats?: boolean;
   hideSymbol?: boolean;
   decimals?: number;
+  symbol?: string;
 }
 
 const TextNumberTooSmallDecimal: React.FC<IProps> = ({
@@ -23,6 +24,7 @@ const TextNumberTooSmallDecimal: React.FC<IProps> = ({
   isSats,
   hideSymbol,
   decimals = 2,
+  symbol,
 }) => {
   const parts = useMemo(() => {
     if (
@@ -34,7 +36,7 @@ const TextNumberTooSmallDecimal: React.FC<IProps> = ({
         <Text
           className={cs(s.textContainer, className)}
           dangerouslySetInnerHTML={{
-            __html: formatCurrency(value, MIN_DECIMAL, decimals),
+            __html: `${formatCurrency(value, MIN_DECIMAL, decimals)} ${symbol}`,
           }}
           style={style}
         ></Text>
@@ -49,7 +51,7 @@ const TextNumberTooSmallDecimal: React.FC<IProps> = ({
             className={cs(s.textContainer, className)}
             dangerouslySetInnerHTML={{
               __html: `${formatCurrency(satAmount, 0, 2)}${
-                hideSymbol ? "" : ' <span style="opacity: 0.7">sats</span>'
+                hideSymbol ? '' : '<span style="opacity: 0.7"> sat</span>'
               }`,
             }}
             style={style}
@@ -62,7 +64,7 @@ const TextNumberTooSmallDecimal: React.FC<IProps> = ({
       <Text
         className={cs(s.textContainer, className)}
         dangerouslySetInnerHTML={{
-          __html: formatCurrency(value, MIN_DECIMAL, decimals),
+          __html: `${formatCurrency(value, MIN_DECIMAL, decimals)} ${symbol}`,
         }}
         style={style}
       ></Text>

diff --git a/src/components/TextNumberTooSmallDecimal/styles.module.scss b/src/components/TextNumberTooSmallDecimal/styles.module.scss
@@ -1,11 +1,9 @@
 .textContainer {
-  :global {
-    .decimal-number {
-      position: relative;
-      font-size: 70%;
-      top: 3px;
-      padding-inline: 2px;
-      font-weight: 700;
-    }
+  line-height: 140%;
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  span {
+    line-height: 140%;
   }
 }
diff --git a/src/constants/home-content.tsx b/src/constants/home-content.tsx
@@ -227,7 +227,7 @@ export const STEP_2_SECTION = {
       bgColor:
         'linear-gradient(138deg, rgba(179, 179, 179, 0.40) 1.72%, rgba(43, 43, 43, 0.32) 101.88%)',
       link: {
-        url: '/studio',
+        url: '/studio?template=6',
         target: '_blank',
       },
       tags: [''],

diff --git a/src/layouts/HeaderV4/menuConfig.ts b/src/layouts/HeaderV4/menuConfig.ts
@@ -155,16 +155,15 @@ export const NAV_ITEMS_LEFT: Array<NavItem> = [
     isNewWindow: false,
     isHide: false,
   },
-
   {
-    label: 'BVM',
-    href: '/bvm',
+    label: 'Ecosystem',
+    href: '/explore',
     isNewWindow: false,
     isHide: false,
   },
   {
-    label: 'Ecosystem',
-    href: '/explore',
+    label: '$BVM',
+    href: '/bvm',
     isNewWindow: false,
     isHide: false,
   },

diff --git a/src/modules/ExploreModule/components/DappCard/index.tsx b/src/modules/ExploreModule/components/DappCard/index.tsx
@@ -4,6 +4,7 @@ import Fade from '@interactive/Fade';
 import ImagePlaceholder from '@components/ImagePlaceholder';
 import Link from 'next/link';
 import cn from 'classnames';
+import { Box } from '@chakra-ui/react';
 
 export type TDappCardProps = {
   id?: string;
@@ -24,7 +25,6 @@ export default function DappCard({
   idx,
   ...props
 }: TDappCardProps): React.JSX.Element {
-  console.log('props.bgColor', props.bgColor);
   const { link } = props;
   return (
     <Fade delayEnter={0.5 + idx / 10}>
@@ -36,14 +36,19 @@ export default function DappCard({
         })}
         style={{ background: props.bgColor }}
       >
-        <div className={s.wrapperDappCard_image}>
+        <Box
+          className={cn(s.wrapperDappCard_image, {
+            [s.wrapperDappCard_image__first]: props.title === 'Bitcoin Wars',
+          })}
+          aspectRatio={props.title === 'Bitcoin Wars' ? '17  / 15' : 'auto'}
+        >
           <ImagePlaceholder
             src={props.image}
             alt={'dapp1'}
             width={448}
             height={432}
           />
-        </div>
+        </Box>
         <div className={s.wrapperDappCardContent}>
           <p className={s.wrapperDappCard_heading}>{props.title}</p>
           <p

diff --git a/src/modules/ExploreModule/components/DappCard/styles.module.scss b/src/modules/ExploreModule/components/DappCard/styles.module.scss
@@ -10,10 +10,18 @@
   flex-direction: column;
 
   &_image {
-    max-height: 300px;
+    // max-height: 300px;
     width: 100%;
     flex: 1;
 
+    &__first {
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
 
     :global(.imagePreload) {
       // display: grid;
@@ -31,12 +39,11 @@
   &_heading {
     color: #FFF;
     font-family: "SF Pro Display";
-    font-size: 14px;
+    font-size: 28px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 120%;
-    /* 16.8px */
-    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 110%;
+    /* 30.8px */
   }
 
   &_decs {

diff --git a/src/modules/blockchains/Buy/component4/BoxOption/index.tsx b/src/modules/blockchains/Buy/component4/BoxOption/index.tsx
@@ -200,7 +200,6 @@ const BoxOption = ({
                               checked = true;
                             }
                           }
-
                           return (
                             <React.Fragment
                               key={section.key + blockKey + block.title}
@@ -347,9 +346,10 @@ const BoxOption = ({
                       {thisDapp.baseModuleFields
                         ?.filter((f) => f.section === section.key)
                         ?.map((item) => {
-                          let checked = false;
 
                           return item.fields.map((field) => {
+                            let checked = false;
+
                             if (allThisDappForm.length > 0) {
                               for (const key in formDappSignal.value) {
                                 if (

diff --git a/src/modules/blockchains/Buy/component4/Button/index.tsx b/src/modules/blockchains/Buy/component4/Button/index.tsx
@@ -25,6 +25,8 @@ type DefaultButtonProps = {
   shape?: ButtonShape;
   icon?: boolean;
   disabled?: boolean;
+  dappKey?: string;
+  name?: string;
 };
 
 type Props = DefaultButtonProps & ButtonProps;

diff --git a/src/modules/blockchains/Buy/component4/CustomEdge/index.tsx b/src/modules/blockchains/Buy/component4/CustomEdge/index.tsx
@@ -1,32 +1,51 @@
-import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getSmoothStepPath,
+  useInternalNode,
+  useReactFlow,
+} from '@xyflow/react';
 import s from './styles.module.scss';
-import React from 'react';
+import React, { memo } from 'react';
 import Image from 'next/image';
+import { getEdgeParams } from '@/modules/blockchains/Buy/getEdgeParams';
 
-export default function CustomEdge({
+function CustomEdge({
                                      id,
                                      sourceX,
                                      sourceY,
                                      targetX,
                                      targetY,
+                                     source,
+                                     target,
                                      sourcePosition,
                                      targetPosition,
                                      markerEnd,
                                      data,
+                                     style,
                                      label,
+                                     sourceHandleId,
                                    }: EdgeProps) {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode,
+  );
+
   const [edgePath, labelX, labelY] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition,
+    sourceX: sx,
+    sourceY: sy,
+    targetX: tx,
+    targetY: ty,
+    sourcePosition: sourcePos,
+    targetPosition: targetPos,
   });
 
   return (
     <React.Fragment key={id}>
-      <BaseEdge id={id} path={edgePath}  markerEnd={markerEnd} className={s.edge_line} />
+      <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} className={s.edge_line} style={style} />
       {
         label && (
           <EdgeLabelRenderer>
@@ -43,3 +62,5 @@ export default function CustomEdge({
     </React.Fragment>
   );
 }
+
+export default memo(CustomEdge)
diff --git a/src/modules/blockchains/Buy/component4/CustomNode/ChainNode.tsx b/src/modules/blockchains/Buy/component4/CustomNode/ChainNode.tsx
@@ -46,22 +46,15 @@ function ChainNode({ data, isConnectable }: NodeProps<DataNode>) {
   const { field } = useOrderFormStoreV3();
   const { isCapture } = useCaptureStore();
 
-  const { order, chainData, getBlockChainStatus, isUpdateFlow } =
-    useChainProvider();
+  const {
+    order,
+    chainData,
+    getBlockChainStatus,
+    isUpdateFlow,
+    selectedCategoryMapping,
+  } = useChainProvider();
   const { statusStr, statusColorStr, borderStatusStr } = getBlockChainStatus();
 
-  const selectedCategoryMapping = React.useMemo(() => {
-    if (!order?.selectedOptions) return undefined;
-
-    const mapping: Record<string, IModelCategory> = {};
-
-    order.selectedOptions.forEach((category) => {
-      mapping[category.key] = category;
-    });
-
-    return mapping;
-  }, [order?.selectedOptions]);
-
   return (
     <div className={`${s.wrapperBox}`} style={{ borderColor: statusColorStr }}>
       <div className={`${s.handles} ${s.target}`}>