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;