From 4bc1e6d5550d08ab326b67964eb65853ba859942 Mon Sep 17 00:00:00 2001 From: daryl Date: Wed, 14 Aug 2024 17:10:32 +0800 Subject: [PATCH 1/3] fix(rgb++): loading picture when loading (#411) * fix(rgb++): loading picture when loading * feat(loading): new pic * fix(rgbdigest): fixed position * fix(rgbdigest): loading --- src/assets/small-spinner.svg | 12 +++++ .../AwesomeLoadings/SmallSpinner/index.tsx | 7 +++ .../SmallSpinner/styles.module.scss | 6 +++ .../TransactionRGBPPDigestContent.module.scss | 17 ++++--- .../TransactionRGBPPDigestModal/index.tsx | 44 +++++++++++-------- .../styles.module.scss | 11 +++-- 6 files changed, 69 insertions(+), 28 deletions(-) create mode 100644 src/assets/small-spinner.svg create mode 100644 src/components/AwesomeLoadings/SmallSpinner/index.tsx create mode 100644 src/components/AwesomeLoadings/SmallSpinner/styles.module.scss diff --git a/src/assets/small-spinner.svg b/src/assets/small-spinner.svg new file mode 100644 index 000000000..282ee98c5 --- /dev/null +++ b/src/assets/small-spinner.svg @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/src/components/AwesomeLoadings/SmallSpinner/index.tsx b/src/components/AwesomeLoadings/SmallSpinner/index.tsx new file mode 100644 index 000000000..f243d9340 --- /dev/null +++ b/src/components/AwesomeLoadings/SmallSpinner/index.tsx @@ -0,0 +1,7 @@ +import styles from './styles.module.scss' +import { ReactComponent as SmallSpinner } from '../../../assets/small-spinner.svg' + +const Loading = () => { + return +} +export default Loading diff --git a/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss b/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss new file mode 100644 index 000000000..a9f665e94 --- /dev/null +++ b/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss @@ -0,0 +1,6 @@ +@import '../../../styles/variables.module'; + +.container { + margin: 40px auto; + color: var(--primary-color); +} diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss index e1bb4608d..bebabef4f 100644 --- a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss +++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss @@ -8,6 +8,14 @@ } } +.content { + height: 100%; + display: flex; + flex-direction: column; + overflow-y: auto; + flex: 1; +} + .noRecords { display: flex; background: #fff; @@ -25,7 +33,6 @@ gap: 16px; font-size: 16px; white-space: nowrap; - overflow: hidden; margin-bottom: 1rem; @media screen and (max-width: $mobileBreakPoint) { @@ -144,11 +151,9 @@ } .list { - max-height: 540px; + height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; - - & > div { - scroll-snap-align: center; - } + display: flex; + flex-direction: column; } diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx index ecacdd4fb..2508e6a8f 100644 --- a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx +++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx @@ -6,11 +6,12 @@ import CloseIcon from '../../../assets/modal_close.png' import { TransactionRGBPPDigestContent } from './TransactionRGBPPDigestContent' import { explorerService } from '../../../services/ExplorerService' import { TransactionLeapDirection } from '../../RGBPP/types' +import SmallSpinner from '../../AwesomeLoadings/SmallSpinner' const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Function; hash: string }) => { const { t } = useTranslation() - const { data, isFetched } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash)) + const { data, isFetched, isLoading } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash)) const direction = useMemo(() => { switch (data?.data.leapDirection) { @@ -25,25 +26,30 @@ const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Fun } }, [data]) - if (isFetched && data?.data) { - return ( -
-
-
- {t('address.transaction_rgbpp_digest')} - {direction !== TransactionLeapDirection.NONE && ( - {t(`address.leap_${direction}`)} - )} -
- + return ( +
+ {isLoading ? ( +
+
- -
- ) - } - return null + ) : ( + <> +
+
+ {t('address.transaction_rgbpp_digest')} + {direction !== TransactionLeapDirection.NONE && ( + {t(`address.leap_${direction}`)} + )} +
+ +
+ + + )} +
+ ) } export default TransactionRGBPPDigestModal diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss index 14338168e..e165ada8e 100644 --- a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss +++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss @@ -4,20 +4,25 @@ background-color: #fff; padding: 20px 40px; width: 75%; - margin: 15% auto; + max-height: 80%; + top: 50%; + left: 50%; + gap: 10px; + transform: translate(-50%, -50%); border-radius: 4px; + position: fixed; + display: flex; + flex-direction: column; @media screen and (max-width: $mobileBreakPoint) { width: 90%; padding: 16px; - margin: 178px auto; } } .header { display: flex; justify-content: space-between; - margin-bottom: 10px; .left { display: flex; From 8556c5009e9f9ae4daf4c7089e6d303a1f3b9229 Mon Sep 17 00:00:00 2001 From: daryl Date: Mon, 19 Aug 2024 16:28:03 +0800 Subject: [PATCH 2/3] feat(inscription): no record (#420) --- src/pages/UDT/UDTComp.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/pages/UDT/UDTComp.tsx b/src/pages/UDT/UDTComp.tsx index f68684c3b..4974e120d 100644 --- a/src/pages/UDT/UDTComp.tsx +++ b/src/pages/UDT/UDTComp.tsx @@ -262,6 +262,15 @@ export const UDTComp = ({ ) } + + if (transactions.length === 0) { + return ( + + {t('transaction.no_records')} + + ) + } + return ( <> From 4bef418e53e7c82ed0646f6e76f692d828da90fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B8=83=E5=81=B6=E4=BB=80=E4=B9=88=E7=9A=84=E5=B0=B1?= =?UTF-8?q?=E6=98=AF=E5=B8=83=E5=81=B6?= Date: Tue, 20 Aug 2024 14:18:02 +0800 Subject: [PATCH 3/3] fix: xudt detail page tag button not working (#415) Co-authored-by: Chen Yu --- src/components/Search/HighlightText.tsx | 2 -- src/components/XUDTTag/index.tsx | 25 ++++++++++++++++--- src/components/XUDTTag/styles.module.scss | 29 +++++++++++++++++++++++ src/hooks/useCKBNode.tsx | 6 ----- src/locales/en.json | 14 +++++++++++ src/locales/zh.json | 14 +++++++++++ src/pages/Xudt/UDTComp.tsx | 2 +- 7 files changed, 80 insertions(+), 12 deletions(-) diff --git a/src/components/Search/HighlightText.tsx b/src/components/Search/HighlightText.tsx index bbd9f14d3..db7c66e5a 100644 --- a/src/components/Search/HighlightText.tsx +++ b/src/components/Search/HighlightText.tsx @@ -23,8 +23,6 @@ export const HighlightText: FC = ({ text, keyword, ...props const [originTextWidth, setOriginTextWidth] = useState(0) useEffect(() => { - // eslint-disable-next-line no-console - // console.log('HighlightText useEffect', text, keyword, resizedWidth) if (!ref.current || !text || !keyword) return const minSideLen = 3 const wrapperWidth = resizedWidth ?? ref.current.clientWidth diff --git a/src/components/XUDTTag/index.tsx b/src/components/XUDTTag/index.tsx index 755584800..d4c97195b 100644 --- a/src/components/XUDTTag/index.tsx +++ b/src/components/XUDTTag/index.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames' import { useTranslation } from 'react-i18next' import { useHistory } from 'react-router-dom' +import { Popover } from 'antd' import styles from './styles.module.scss' const HIDDEN_TAGS = ['duplicate', 'suspicious', 'utility', 'supply-unlimited', 'out-of-length-range'] -const XUDTTag = ({ tagName, to }: { tagName: string; to?: string }) => { - const { t } = useTranslation() +const XUDTTag = ({ tagName, to, tooltip = false }: { tagName: string; to?: string; tooltip?: boolean }) => { + const { t, i18n } = useTranslation() const { push } = useHistory() // FIXME: the tag should be updated in the backend @@ -39,7 +40,25 @@ const XUDTTag = ({ tagName, to }: { tagName: string; to?: string }) => { } else { search.set('tags', [...tags, tag].join(',')) } - push(`${to ?? window.location.pathname}?${search}`) + push(`${`/${i18n.language}${to ?? window.location.pathname}`}?${search}`) + } + + if (tooltip) { + return ( + +
{t(`xudt.tags_description.${tag}`)}
+ {t('xudt.tags_description.view_more')} + + } + > + + + ) } return ( diff --git a/src/components/XUDTTag/styles.module.scss b/src/components/XUDTTag/styles.module.scss index 790dcd43f..3aa4d64a3 100644 --- a/src/components/XUDTTag/styles.module.scss +++ b/src/components/XUDTTag/styles.module.scss @@ -90,3 +90,32 @@ .normal { border: 1px solid; } + +/* stylelint-disable selector-class-pattern */ +.tagPopover { + max-width: 320px; + + :global { + .ant-popover-content { + .ant-popover-arrow { + .ant-popover-arrow-content { + --antd-arrow-background-color: rgb(0 0 0 / 80%); + } + } + } + + .ant-popover-inner { + background-color: rgb(0 0 0 / 80%); + border-radius: 6px; + + .ant-popover-inner-content { + color: #fff; + + a { + color: var(--primary-color); + text-decoration: underline; + } + } + } + } +} diff --git a/src/hooks/useCKBNode.tsx b/src/hooks/useCKBNode.tsx index 58b13ac6c..144fbcb23 100644 --- a/src/hooks/useCKBNode.tsx +++ b/src/hooks/useCKBNode.tsx @@ -57,12 +57,6 @@ export const CKBNodeProvider = ({ children, defaultEndpoint }: PropsWithChildren const [nodes, setNodes] = useState>(new Map(Object.entries(loadEndpoints()))) const [isActivated, _setIsActivated] = useState(localStorage.getItem(NODE_CONNECT_MODE_KEY) === 'true') - // eslint-disable-next-line no-console - console.log('loadEndpoints', loadEndpoints()) - - // eslint-disable-next-line no-console - console.log('nodes', nodes) - const setIsActivated = (value: boolean) => { localStorage.setItem(NODE_CONNECT_MODE_KEY, value.toString()) _setIsActivated(value) diff --git a/src/locales/en.json b/src/locales/en.json index dbda0579d..83cea945c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -812,6 +812,20 @@ "rgb++": "RGB++", "unnamed": "Unnamed" }, + "tags_description": { + "invalid": "This tag marks an asset whose name contains invalid characters.", + "suspicious": "This tag marks an asset whose name contains multiple hidden character types.", + "out-of-length-range": "This tag marks an asset whose name exceeds 60 characters in length.", + "duplicate": "Under case-sensitive conditions, this tag marks an asset whose name duplicates an already issued asset.", + "rgb++": "This tag marks an asset that is compatible with the RGB++ protocol, allowing for transfers between BTC and CKB.", + "layer-1-asset": "This tag marks an asset that is issued on Layer 1.", + "layer-2-asset": "This tag marks an asset that is issued on Layer 2.", + "verified-on": "This tag marks an asset that has been verified by Cell Studio.", + "supply-limited": "This tag marks an asset that has a limited supply, with a maximum quantity limit.", + "supply-unlimited": "This tag marks an asset that has an unlimited supply, with no maximum quantity limit.", + "view_more": "View more items", + "unnamed": "This tag marks an asset whose name field is empty." + }, "category": "Category" }, "nft": { diff --git a/src/locales/zh.json b/src/locales/zh.json index b36ebc8d9..b08a552bb 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -813,6 +813,20 @@ "rgb++": "RGB++", "unnamed": "未命名" }, + "tags_description": { + "invalid": "此 Tag 标记的资产名称中含有无效字符。", + "suspicious": "此 Tag 标记的资产名称中含有大量隐藏字符类型。", + "out-of-length-range": "此 Tag 标记的资产名称长度超过 60 字符。", + "duplicate": "区分大小写前提下，此 Tag 标记的资产名称与已发行过的资产重复。", + "rgb++": "此 Tag 标记的资产是 RGB++ 协议兼容资产，可以在 BTC 和 CKB 之间相互转移。", + "layer-1-asset": "此 Tag 标记的资产是发行在 Layer1 上的资产。", + "layer-2-asset": "此 Tag 标记的资产是发行在 Layer2 上的资产。", + "verified-on": "此 Tag 标记的资产是经过 Cell Studio 校验的资产。", + "supply-limited": "此Tag标记的资产是有限供应的资产，有最大资产数量限制。", + "supply-unlimited": "此Tag标记的资产是无限供应的资产，无最大资产数量限制。", + "view_more": "查看更多", + "unnamed": "此Tag标记的资产名称字段为空。" + }, "category": "类别" }, "nft": { diff --git a/src/pages/Xudt/UDTComp.tsx b/src/pages/Xudt/UDTComp.tsx index 714d3e4ef..6218dbf1c 100644 --- a/src/pages/Xudt/UDTComp.tsx +++ b/src/pages/Xudt/UDTComp.tsx @@ -201,7 +201,7 @@ export const UDTOverviewCard = ({
{tags.map(tag => ( - + ))} {xudtCodeUrl ? (