diff --git a/src/modules/blockchains/Buy/component4/LegoParent/index.tsx b/src/modules/blockchains/Buy/component4/LegoParent/index.tsx index f404ad02c..f221c1420 100644 --- a/src/modules/blockchains/Buy/component4/LegoParent/index.tsx +++ b/src/modules/blockchains/Buy/component4/LegoParent/index.tsx @@ -1,19 +1,19 @@ -import React from 'react'; import cn from 'classnames'; import Image from 'next/image'; +import React from 'react'; import SvgInset from '@/components/SvgInset'; import { adjustBrightness } from '../../utils'; -import styles from './styles.module.scss'; +import { iconToolNames } from '@/modules/blockchains/Buy/Buy.data'; +import { useCaptureStore } from '@/modules/blockchains/Buy/stores/index_v3'; +import { DappType } from '@/modules/blockchains/dapp/types'; import { useAppSelector } from '@/stores/hooks'; import { dappSelector } from '@/stores/states/dapp/selector'; -import { DappType } from '@/modules/blockchains/dapp/types'; import { DappModel } from '@/types/customize-model'; import { Text } from '@chakra-ui/react'; -import { useCaptureStore } from '@/modules/blockchains/Buy/stores/index_v3'; -import { iconToolNames } from '@/modules/blockchains/Buy/Buy.data'; +import styles from './styles.module.scss'; type Props = { zIndex?: number; @@ -29,18 +29,18 @@ type Props = { }; const LegoParent = ({ - zIndex = 0, - background = '#A041FF', - disabled = false, - title = '', - icon, - children, - smallMarginHeaderTop = false, - label, - dapp, - linkDownloadFile, - ...rest - }: Props) => { + zIndex = 0, + background = '#A041FF', + disabled = false, + title = '', + icon, + children, + smallMarginHeaderTop = false, + label, + dapp, + linkDownloadFile, + ...rest +}: Props) => { const legoRef = React.useRef(null); const headerRef = React.useRef(null); const footerRef = React.useRef(null); @@ -60,7 +60,9 @@ const LegoParent = ({ case DappType.yologame: { if (!label?.actionID) return; window.open( - `${dappState?.chain?.dappURL || ''}/apps/yolo-games?pool_id=${label.actionID}`, + `${dappState?.chain?.dappURL || ''}/apps/yolo-games?pool_id=${ + label.actionID + }`, ); return; } @@ -109,7 +111,7 @@ const LegoParent = ({ styles.lego__header__piece__top, { [styles.lego__header__piece__top__smallMargin]: - smallMarginHeaderTop, + smallMarginHeaderTop, }, )} > @@ -119,6 +121,7 @@ const LegoParent = ({
{_icon && _icon} {title} + {linkDownloadFile && ( {label && ( -
+
handleLabelClick()} - > - {label.title} -
+ )} ${isCapture ? styles.label_margin : ''}`} + style={{ + // @ts-ignore + // prettier-ignore + '--label-background': label.background ? label.background : undefined, + '--label-color': label.color ? label.color : undefined, + }} + onClick={() => handleLabelClick()} + > + {label.title} +
+ + {label.status === 'deployed' && ( + handleLabelClick()} className={styles.view}> + View + + )} + )}
@@ -175,7 +182,7 @@ const LegoParent = ({ styles.lego__footer__piece__bottom, { [styles.lego__footer__piece__bottom__smallMargin]: - smallMarginHeaderTop, + smallMarginHeaderTop, }, )} > diff --git a/src/modules/blockchains/Buy/component4/LegoParent/styles.module.scss b/src/modules/blockchains/Buy/component4/LegoParent/styles.module.scss index e20501ce4..1e3eff981 100644 --- a/src/modules/blockchains/Buy/component4/LegoParent/styles.module.scss +++ b/src/modules/blockchains/Buy/component4/LegoParent/styles.module.scss @@ -180,3 +180,23 @@ .label_margin { margin-top: -15px; } + +.view { + cursor: pointer; + position: absolute; + right: 0; + top: 48%; + transform: translateY(-48%) translateX(calc(100% + 100px)); + + border-radius: 4px; + padding: 0 14px; + font-size: 16px; + font-weight: 500; + line-height: 24px; + text-decoration: underline; + color: black; + + &:hover { + color: blue; + } +}