From f89bd1375e3d122ebf6518056183c0570482df88 Mon Sep 17 00:00:00 2001 From: Oleksandr Khlopiachyi Date: Mon, 27 May 2024 13:58:26 +0300 Subject: [PATCH] feat: add xrpl to coreum transactions (#93) --- .../src/components/load_and_exist/index.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 635 ------------------ .../components/action_bar/index.test.tsx | 74 -- .../__snapshots__/index.test.tsx.snap | 8 +- .../__snapshots__/index.test.tsx.snap | 240 ------- .../single_transaction_mobile/index.test.tsx | 36 - .../single_transaction_mobile/index.tsx | 8 +- .../components/desktop/index.tsx | 32 +- .../components/desktop/utils.tsx | 2 - .../components/mobile/index.tsx | 27 +- .../components/list/index.tsx | 27 +- .../app/__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- packages/ui/src/screens/transactions/hooks.ts | 148 +++- .../ui/src/screens/transactions/index.tsx | 6 +- .../ui/src/screens/transactions/styles.ts | 6 + .../tabs/__snapshots__/index.test.tsx.snap | 339 ---------- .../list/components/tabs/index.test.tsx | 29 - 20 files changed, 227 insertions(+), 1404 deletions(-) delete mode 100644 packages/ui/src/components/nav/components/desktop/components/action_bar/__snapshots__/index.test.tsx.snap delete mode 100644 packages/ui/src/components/nav/components/desktop/components/action_bar/index.test.tsx delete mode 100644 packages/ui/src/components/single_transaction_mobile/__snapshots__/index.test.tsx.snap delete mode 100644 packages/ui/src/components/single_transaction_mobile/index.test.tsx delete mode 100644 packages/ui/src/screens/validators/components/list/components/tabs/__snapshots__/index.test.tsx.snap delete mode 100644 packages/ui/src/screens/validators/components/list/components/tabs/index.test.tsx diff --git a/packages/ui/src/components/load_and_exist/index.tsx b/packages/ui/src/components/load_and_exist/index.tsx index d66f65a7f8..d9de76968a 100644 --- a/packages/ui/src/components/load_and_exist/index.tsx +++ b/packages/ui/src/components/load_and_exist/index.tsx @@ -4,10 +4,10 @@ import { useHeightStyles, useMaxHeightStyles, useVisiblityStyles } from '@/style import { FC, PropsWithChildren } from 'react'; import { useStyles } from 'tss-react/mui'; -type LoadAndExistProps = { loading: boolean; exists: boolean }; +type LoadAndExistProps = { loading: boolean; exists: boolean; className?: string }; const LoadAndExist: FC> = (props) => { - const { loading, exists, children } = props; + const { loading, exists, children, className } = props; const { cx } = useStyles(); const visibility = useVisiblityStyles().classes; const height = useHeightStyles().classes; @@ -18,7 +18,7 @@ const LoadAndExist: FC> = (props) => { <> {loading && } {!exists && !loading && } -
+
{children}
diff --git a/packages/ui/src/components/msg/distribution/withdraw_commission/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/msg/distribution/withdraw_commission/__snapshots__/index.test.tsx.snap index 9f17a4081e..4728fb6231 100644 --- a/packages/ui/src/components/msg/distribution/withdraw_commission/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/msg/distribution/withdraw_commission/__snapshots__/index.test.tsx.snap @@ -24,7 +24,7 @@ exports[`screen: TransactionDetails/WithdrawCommission matches snapshot 1`] = ` name="validatorAddress" /> - {"amount":"0 UTESTCORE"} + {"amount":"0 UCORE"}

`; diff --git a/packages/ui/src/components/msg/distribution/withdraw_reward/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/msg/distribution/withdraw_reward/__snapshots__/index.test.tsx.snap index 28be35f27f..839e0c4cd7 100644 --- a/packages/ui/src/components/msg/distribution/withdraw_reward/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/msg/distribution/withdraw_reward/__snapshots__/index.test.tsx.snap @@ -29,7 +29,7 @@ exports[`screen: TransactionDetails/WithdrawReward matches snapshot 1`] = ` id="Name" name="validatorAddress" /> - {"amount":"0 UTESTCORE"} + {"amount":"0 UCORE"}

`; diff --git a/packages/ui/src/components/nav/components/desktop/components/action_bar/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/nav/components/desktop/components/action_bar/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 90ec38d7e9..0000000000 --- a/packages/ui/src/components/nav/components/desktop/components/action_bar/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,635 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: Nav/ActionBar it renders 1`] = ` -.emotion-0 { - width: 100%; - background: #F8F8F8; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 16px; - height: 100%; -} - -.emotion-1 { - width: 60%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - gap: 12px; - z-index: 5000; -} - -.emotion-2 { - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -@media (max-width:1024.95px) { - .emotion-2 { - height: auto; - padding: 16px 12px; - } -} - -.emotion-2 .MuiInputBase-root { - width: 100%; - height: 100%; - padding-left: 16px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 48px; -} - -.emotion-2 .MuiInputBase-input { - text-overflow: ellipsis; - font-size: 14px; - padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 20px; -} - -.emotion-2 .MuiInputBase-input::-webkit-input-placeholder { - color: #999999; -} - -.emotion-2 .MuiInputBase-input::-moz-placeholder { - color: #999999; -} - -.emotion-2 .MuiInputBase-input:-ms-input-placeholder { - color: #999999; -} - -.emotion-2 .MuiInputBase-input::placeholder { - color: #999999; -} - -.emotion-2 .Search-icon { - width: 24px; - height: 24px; - color: white; - cursor: pointer; -} - -.emotion-2.emotion-2 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - height: 48px; -} - -.emotion-2.emotion-2.open .MuiInputBase-root { - background: #F8F8F8; -} - -.emotion-3 { - font-size: 1rem; - white-space: pre-wrap; - letter-spacing: 0.5px; - font-family: "Noto Sans",sans-serif; - font-weight: 400; - line-height: 1.4375em; - color: #000000; - box-sizing: border-box; - position: relative; - cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-3.Mui-disabled { - color: rgba(0, 0, 0, 0.38); - cursor: default; -} - -.emotion-3 { - border-radius: 12px; -} - -.emotion-4 { - font: inherit; - letter-spacing: inherit; - color: currentColor; - padding: 4px 0 5px; - border: 0; - box-sizing: content-box; - background: none; - height: 1.4375em; - margin: 0; - -webkit-tap-highlight-color: transparent; - display: block; - min-width: 0; - width: 100%; - -webkit-animation-name: mui-auto-fill-cancel; - animation-name: mui-auto-fill-cancel; - -webkit-animation-duration: 10ms; - animation-duration: 10ms; -} - -.emotion-4::-webkit-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - -.emotion-4::-moz-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - -.emotion-4:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - -.emotion-4::-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - -.emotion-4:focus { - outline: 0; -} - -.emotion-4:invalid { - box-shadow: none; -} - -.emotion-4::-webkit-search-decoration { - -webkit-appearance: none; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4::-webkit-input-placeholder { - opacity: 0!important; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4::-moz-placeholder { - opacity: 0!important; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:-ms-input-placeholder { - opacity: 0!important; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4::-ms-input-placeholder { - opacity: 0!important; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-webkit-input-placeholder { - opacity: 0.42; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-moz-placeholder { - opacity: 0.42; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus:-ms-input-placeholder { - opacity: 0.42; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-placeholder { - opacity: 0.42; -} - -.emotion-4.Mui-disabled { - opacity: 1; - -webkit-text-fill-color: rgba(0, 0, 0, 0.38); -} - -.emotion-4:-webkit-autofill { - -webkit-animation-duration: 5000s; - animation-duration: 5000s; - -webkit-animation-name: mui-auto-fill; - animation-name: mui-auto-fill; -} - -.emotion-4 { - padding: 8px 12px; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background: #25D695; - width: 40px; - height: 40px; - border-radius: 20px; - cursor: pointer; - padding: 8px; - margin: 4px; -} - -.emotion-6 { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: 1em; - height: 1em; - display: inline-block; - fill: currentColor; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - font-size: 1.25rem; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 4px; - padding: 8px 16px; - cursor: pointer; -} - -@media (max-width:1024.95px) { - .emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - height: 100%; - padding: 16px; - margin: 8px 12px 0px 12px; - justify-self: flex-end; - width: auto; - gap: 30px; - } -} - -.emotion-7.open-menu-margin { - margin-bottom: 220px; -} - -@media (max-width:1024.95px) { - .emotion-7 .netIcon { - position: relative; - left: auto; - } -} - -.emotion-7 .netContent { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; -} - -@media (max-width:1024.95px) { - .emotion-7 .netContent { - visibility: visible; - opacity: 1; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; - -webkit-box-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: 0; - font-weight: 600; - font-size: 14px; - line-height: 21px; - } -} - -.emotion-7 .netContent .currentNetName { - font-weight: 600; - font-size: 14px; - line-height: 21px; - margin-left: 16px; - margin-right: 20px; -} - -@media (max-width:1024.95px) { - .emotion-7 .netContent .currentNetName { - margin: 0; - font-weight: 600; - font-size: 10px; - line-height: 15px; - } -} - -.emotion-7 .netContent .currentNetLink { - font-weight: 400; - font-size: 12px; - line-height: 18px; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - white-space: nowrap; -} - -.emotion-7 .arrowIcon { - position: relative; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; -} - -.emotion-7 .arrowIcon.modalShow { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} - -@media (max-width:1024.95px) { - .emotion-7 .arrowIcon { - position: absolute; - right: 12px; - } -} - -.emotion-7 .modal { - position: fixed; - visibility: hidden; - opacity: 0; - -webkit-transition: all 225ms cubic-bezier(0.4, 0, 1, 1) 0ms; - transition: all 225ms cubic-bezier(0.4, 0, 1, 1) 0ms; - overflow-y: auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 4px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - padding: 12px; - right: 16px; - top: 72px; - box-shadow: -6px 5px rgba(0, 0, 0, 0.25); -} - -.emotion-7 .modal.modalShow { - visibility: visible; - opacity: 1; -} - -@media (max-width:1024.95px) { - .emotion-7 .modal { - position: absolute; - width: 100%; - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; - top: calc(100% + 8px); - right: 0; - left: auto; - padding: 8px; - } -} - -.emotion-7 .modal .linkItem { - width: 240px; - height: 55px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - border-radius: 4px; - padding: 12px; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; -} - -@media (max-width:1024.95px) { - .emotion-7 .modal .linkItem { - width: 100%; - } -} - -.emotion-7 .modal .linkItem .netName { - font-weight: 600; - font-size: 10px; - line-height: 15px; -} - -.emotion-7 .modal .linkItem .netLink { - font-weight: 400; - font-size: 12px; - line-height: 18px; - color: #000000; -} - -.emotion-7 .modal .linkItem.selectedItem .netName { - color: #25D695; -} - - -`; diff --git a/packages/ui/src/components/nav/components/desktop/components/action_bar/index.test.tsx b/packages/ui/src/components/nav/components/desktop/components/action_bar/index.test.tsx deleted file mode 100644 index 47534b617c..0000000000 --- a/packages/ui/src/components/nav/components/desktop/components/action_bar/index.test.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import renderer from 'react-test-renderer'; -import ActionBar from '@/components/nav/components/desktop/components/action_bar'; -import MockTheme from '@/tests/mocks/MockTheme'; -import { RecoilRoot } from 'recoil'; - -// ================================== -// global setup -// ================================== -let component: renderer.ReactTestRenderer; - -// ================================== -// mocks -// ================================== -let isNetwork = false; -// const toggleNetwork = jest.fn(); -jest.mock( - '@/components/nav/components/desktop/components/action_bar/components/network', - () => (props: JSX.IntrinsicElements['div']) =>
-); -jest.mock( - '@/components/nav/components/desktop/components/action_bar/components/network_list', - () => (props: JSX.IntrinsicElements['div']) =>
-); -jest.mock( - '@/components/nav/components/desktop/components/action_bar/components/settings_list', - () => (props: JSX.IntrinsicElements['div']) =>
-); - -jest.mock('next/router', () => ({ - ...jest.requireActual('next/router'), - useRouter: () => ({ - locales: ['en', 'zh'], - pathname: '/app/home', - query: { - key: 'val', - }, - }), -})); - -// ================================== -// unit tests -// ================================== -describe('screen: Nav/ActionBar', () => { - beforeEach(() => { - component = renderer.create( - - - - - - ); - }); - - it('it renders', () => { - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - // it('displays network', () => { - // isNetwork = true; - // component.update( - // - // - // - // ); - // const tree = component?.toJSON(); - // expect(tree).toMatchSnapshot(); - // }); -}); - -afterEach(() => { - isNetwork = false; - jest.clearAllMocks(); -}); diff --git a/packages/ui/src/components/nav/components/menu_items/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/nav/components/menu_items/__snapshots__/index.test.tsx.snap index a30fe99033..cc20b34352 100644 --- a/packages/ui/src/components/nav/components/menu_items/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/nav/components/menu_items/__snapshots__/index.test.tsx.snap @@ -888,14 +888,10 @@ exports[`screen: Nav/MenuItems it renders 1`] = ` >
- Testnet1 -
+ />
- explorer.testnet-1.coreum.dev -
+ />
div { - width: 50%; -} - -.emotion-2 { - margin-bottom: 16px; -} - -.emotion-2 .label { - margin-bottom: 8px; - color: #777777; -} - -.emotion-2 p.value { - color: #414141; -} - -.emotion-2 a { - color: #4092CD; -} - -.emotion-3 { - margin: 0; - font-size: 1rem; - letter-spacing: 0.15px; - font-family: "Noto Sans",sans-serif; - font-weight: 400; - line-height: 1.235; -} - -.emotion-6 { - margin: 0; - font-size: 1rem; - white-space: pre-wrap; - letter-spacing: 0.5px; - font-family: "Noto Sans",sans-serif; - font-weight: 400; - line-height: 1.5; -} - -.emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; - color: #414141; - gap: 4px; -} - -.emotion-13 .MuiSvgIcon-root { - fill: #1EC490; -} - -
-
-
-

- block -

-
- 10 -
-
-
-

- hash -

-

-

- 1572D5F78D0192BC59E6BD99875D7796A39B1CE0CEF2E106D586CCCEF5C75317 -
-

-
-
-
-
-

- messages -

-

- 2 -

-
-
-

- result -

- - - - - - success - - -
-
-
-
-

- amount -

-

-

-
-

- fee -

-
-
-
-
-
-

- sender -

-

-

-
-

- receiver -

-
-
-
-
-

- time -

-
- 2022-02-19T19:03:14.969688 -
-
-
-`; diff --git a/packages/ui/src/components/single_transaction_mobile/index.test.tsx b/packages/ui/src/components/single_transaction_mobile/index.test.tsx deleted file mode 100644 index 580dbf6c45..0000000000 --- a/packages/ui/src/components/single_transaction_mobile/index.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import renderer from 'react-test-renderer'; -import Result from '@/components/result'; -import SingleTransactionMobile from '@/components/single_transaction_mobile'; -import Tag from '@/components/tag'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// unit tests -// ================================== -describe('component: SingleTransactionMobile', () => { - it('matches snapshot', () => { - const dummyItems = { - block:
10
, - hash:
1572D5F78D0192BC59E6BD99875D7796A39B1CE0CEF2E106D586CCCEF5C75317
, - type: ( -
- -
- ), - result: , - time: '2022-02-19T19:03:14.969688', - messages: '2', - }; - const component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); diff --git a/packages/ui/src/components/single_transaction_mobile/index.tsx b/packages/ui/src/components/single_transaction_mobile/index.tsx index df3778a953..1440116726 100644 --- a/packages/ui/src/components/single_transaction_mobile/index.tsx +++ b/packages/ui/src/components/single_transaction_mobile/index.tsx @@ -10,10 +10,10 @@ type SingleTransactionMobileProps = { time: ReactNode; messages: ReactNode; result?: ReactNode; - fee: ReactNode; - amount: ReactNode; - sender: ReactNode; - receiver: ReactNode; + fee?: ReactNode; + amount?: ReactNode; + sender?: ReactNode; + receiver?: ReactNode; }; const SingleTransactionMobile: FC = ({ diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx b/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx index f5882ac9b7..200c92e4f9 100644 --- a/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx +++ b/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx @@ -18,9 +18,10 @@ import Zoom from '@mui/material/Zoom'; import Tooltip from '@mui/material/Tooltip'; import Big from 'big.js'; import { formatNumberWithThousandsSeparator } from '@/screens/account_details/components/other_tokens/components/desktop'; -import { convertHexToString } from '@/screens/assets/hooks'; +import { Asset, convertHexToString } from '@/screens/assets/hooks'; import Lottie from 'lottie-react'; import arrows from '@/assets/arrows.json'; +import { BridgeTransaction } from '@/screens/transactions/types'; const Desktop: FC = ({ className, @@ -148,12 +149,23 @@ const Desktop: FC = ({ ); }, []); - const items = transactions.map((x) => { - const asset = metadatas.find( - (item: any) => item.base.toLowerCase() === x.coin.denom.toLowerCase() - ); + const items = transactions.map((x: BridgeTransaction) => { + let { denom } = x.coin; + + if (x.source === 'xrpl') { + const assetInRegisteredAssets = assets.find( + (asset: Asset) => + asset.extra.xrpl_info?.currency.toLowerCase() === x.coin.denom.toLowerCase() + ); + + if (assetInRegisteredAssets) { + denom = assetInRegisteredAssets.denom; + } + } + + const asset = metadatas.find((item: any) => item.base.toLowerCase() === denom.toLowerCase()); - let amount = formatToken(x.coin.amount, x.coin.denom).value; + let amount = formatToken(x.coin.amount, denom).value; if (asset?.denom_units[1].exponent) { const availableValue = new Big(+x.coin.amount) @@ -164,9 +176,9 @@ const Desktop: FC = ({ } const tokenInAssets = assets.find( - (assetItem: any) => x.coin.denom.toLowerCase() === assetItem.denom.toLowerCase() + (assetItem: any) => denom.toLowerCase() === assetItem.denom.toLowerCase() ); - let displayDenom = asset?.display.toUpperCase() || x.coin.denom.toUpperCase(); + let displayDenom = asset?.display.toUpperCase() || denom.toUpperCase(); if (tokenInAssets && tokenInAssets?.extra.xrpl_info) { displayDenom = tokenInAssets?.extra.xrpl_info.currency.length === 40 @@ -175,7 +187,7 @@ const Desktop: FC = ({ } if (tokenInAssets) { - if (x.coin.denom.includes('ibc')) { + if (denom.includes('ibc')) { const tokenDenom = tokenInAssets.extra.ibc_info!.display_name; const availableValue = new Big(+x.coin.amount) .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision)) @@ -191,7 +203,7 @@ const Desktop: FC = ({ amount: ( {amount.split('.')[0]} - .{amount.split('.')[1]} + {amount.split('.')[1] && .{amount.split('.')[1]}} {displayDenom} ), diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/utils.tsx b/packages/ui/src/components/transactions_list_bridge/components/desktop/utils.tsx index d233f16fd1..d55085c5a4 100644 --- a/packages/ui/src/components/transactions_list_bridge/components/desktop/utils.tsx +++ b/packages/ui/src/components/transactions_list_bridge/components/desktop/utils.tsx @@ -13,12 +13,10 @@ export const columns: { }, { key: 'sender', - align: 'right', width: 15, }, { key: 'destination', - align: 'right', width: 15, }, { diff --git a/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx b/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx index 4061b514ed..de367dcafd 100644 --- a/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx +++ b/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx @@ -164,11 +164,22 @@ const ListItem: FC = ({ ); } - const asset = metadatas.find( - (item: any) => item.base.toLowerCase() === transaction.coin.denom.toLowerCase() - ); + let { denom } = transaction.coin; + + if (transaction.source === 'xrpl') { + const assetInRegisteredAssets = assets.find( + (asset: Asset) => + asset.extra.xrpl_info?.currency.toLowerCase() === transaction.coin.denom.toLowerCase() + ); + + if (assetInRegisteredAssets) { + denom = assetInRegisteredAssets.denom; + } + } + + const asset = metadatas.find((item: any) => item.base.toLowerCase() === denom.toLowerCase()); - let amount = formatToken(transaction.coin.amount, transaction.coin.denom).value; + let amount = formatToken(transaction.coin.amount, denom).value; if (asset?.denom_units[1].exponent) { const availableValue = new Big(+transaction.coin.amount) @@ -179,9 +190,9 @@ const ListItem: FC = ({ } const tokenInAssets = assets.find( - (assetItem: any) => transaction.coin.denom.toLowerCase() === assetItem.denom.toLowerCase() + (assetItem: any) => denom.toLowerCase() === assetItem.denom.toLowerCase() ); - let displayDenom = asset?.display.toUpperCase() || transaction.coin.denom.toUpperCase(); + let displayDenom = asset?.display.toUpperCase() || denom.toUpperCase(); if (tokenInAssets && tokenInAssets?.extra.xrpl_info) { displayDenom = tokenInAssets?.extra.xrpl_info.currency.length === 40 @@ -190,7 +201,7 @@ const ListItem: FC = ({ } if (tokenInAssets) { - if (transaction.coin.denom.includes('ibc')) { + if (denom.includes('ibc')) { const tokenDenom = tokenInAssets.extra.ibc_info!.display_name; const availableValue = new Big(+transaction.coin.amount) .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision)) @@ -205,7 +216,7 @@ const ListItem: FC = ({ amount: ( {amount.split('.')[0]} - .{amount.split('.')[1]} + {amount.split('.')[1] && .{amount.split('.')[1]}} {displayDenom} ), diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/index.tsx b/packages/ui/src/components/transactions_list_bridge_details/components/list/index.tsx index 6f77080d90..cd8361fb6b 100644 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/index.tsx +++ b/packages/ui/src/components/transactions_list_bridge_details/components/list/index.tsx @@ -166,11 +166,22 @@ const ListItem: FC = ({ ); } - const asset = metadatas.find( - (item: any) => item.base.toLowerCase() === transaction.coin.denom.toLowerCase() - ); + let { denom } = transaction.coin; + + if (transaction.source === 'xrpl') { + const assetInRegisteredAssets = assets.find( + (asset: Asset) => + asset.extra.xrpl_info?.currency.toLowerCase() === transaction.coin.denom.toLowerCase() + ); + + if (assetInRegisteredAssets) { + denom = assetInRegisteredAssets.denom; + } + } + + const asset = metadatas.find((item: any) => item.base.toLowerCase() === denom.toLowerCase()); - let amount = formatToken(transaction.coin.amount, transaction.coin.denom).value; + let amount = formatToken(transaction.coin.amount, denom).value; if (asset?.denom_units[1].exponent) { const availableValue = new Big(+transaction.coin.amount) @@ -181,9 +192,9 @@ const ListItem: FC = ({ } const tokenInAssets = assets.find( - (assetItem: any) => transaction.coin.denom.toLowerCase() === assetItem.denom.toLowerCase() + (assetItem: any) => denom.toLowerCase() === assetItem.denom.toLowerCase() ); - let displayDenom = asset?.display.toUpperCase() || transaction.coin.denom.toUpperCase(); + let displayDenom = asset?.display.toUpperCase() || denom.toUpperCase(); if (tokenInAssets && tokenInAssets?.extra.xrpl_info) { displayDenom = tokenInAssets?.extra.xrpl_info.currency.length === 40 @@ -192,7 +203,7 @@ const ListItem: FC = ({ } if (tokenInAssets) { - if (transaction.coin.denom.includes('ibc')) { + if (denom.includes('ibc')) { const tokenDenom = tokenInAssets.extra.ibc_info!.display_name; const availableValue = new Big(+transaction.coin.amount) .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision)) @@ -208,7 +219,7 @@ const ListItem: FC = ({ amount: ( {amount.split('.')[0]} - .{amount.split('.')[1]} + {amount.split('.')[1] && .{amount.split('.')[1]}} {displayDenom} ), diff --git a/packages/ui/src/screens/app/__snapshots__/index.test.tsx.snap b/packages/ui/src/screens/app/__snapshots__/index.test.tsx.snap index f6bbd15198..9a95193d1d 100644 --- a/packages/ui/src/screens/app/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/screens/app/__snapshots__/index.test.tsx.snap @@ -226,7 +226,7 @@ exports[`screen: _app matches snapshot 1`] = `

- coreum-testnet + coreum

,
=> { - const bridgeClient = new BridgeQueryClient(RPC_URL, CONTRACT_ADDRESS); const response = await bridgeClient.pendingOperations({ height }); return response; @@ -130,6 +130,131 @@ const getTxOperationsDiff = async (height: number): Promise => { } }; +const fetchBridgeXRPLCoreumTxData = async ({ + page, + limit, + order_by = 'desc', +}: { + page: string; + limit: string; + order_by?: 'asc' | 'desc'; +}) => { + try { + const requestQuery = `wasm._contract_address='${CONTRACT_ADDRESS}' AND wasm.action='save_evidence' AND wasm.threshold_reached='true'`; + const requestData = { + jsonrpc: '2.0', + method: 'tx_search', + params: { + query: requestQuery, + prove: false, + page, + per_page: limit, + order_by, + }, + id: 1, + }; + const response = await axios.post(RPC_URL, requestData, { + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (response.status === 200) { + const { txs } = response.data.result; + + let filterTxs = txs + .map((tx: any) => { + const { events } = tx.tx_result; + + const wasmEvent = events.find((event: any) => event.type === 'wasm'); + let txHash1 = ''; + let issuer = ''; + let currency = ''; + let amount = ''; + let recipient = ''; + + if (!wasmEvent) { + return undefined; + } + + wasmEvent.attributes.forEach((attr: { key: string; value: string }) => { + switch (attr.key) { + case 'hash': + txHash1 = attr.value; + break; + case 'issuer': + issuer = attr.value; + break; + case 'currency': + currency = attr.value; + break; + case 'amount': + amount = attr.value; + break; + case 'recipient': + recipient = attr.value; + break; + default: + } + }); + + if (!txHash1 || !issuer || !currency || !amount || !recipient) { + return undefined; + } + + return { + height: tx.height, + txHash_1: txHash1, + txHash_2: tx.hash, + sender: '', + destination: recipient, + coin: { + amount, + denom: currency, + }, + source: 'xrpl', + }; + }) + .filter((item: any) => item !== undefined); + + filterTxs = await Promise.all( + filterTxs.map(async (transaction: any) => { + const blockInfoData = { + jsonrpc: '2.0', + method: 'block', + params: { + height: transaction.height, + }, + id: 1, + }; + let timestamp = ''; + try { + const blockResponse = await axios.post(RPC_URL, blockInfoData, { + headers: { + 'Content-Type': 'application/json', + }, + }); + + timestamp = blockResponse.data.result.block.header.time; + } catch (error) { + console.error(error); + } + return { + ...transaction, + timestamp, + }; + }) + ); + + return filterTxs; + } + + return []; + } catch (error) { + return []; + } +}; + const fetchBridgeTxData = async ({ page, limit, @@ -187,7 +312,9 @@ const fetchBridgeTxData = async ({ }); timestamp = blockResponse.data.result.block.header.time; - } catch (error) {} + } catch (error) { + console.error(error); + } const xrplTxHash = await Promise.all( txOperations.map(async (operation: Operation) => { @@ -544,6 +671,7 @@ export const useTransactions = () => { }; const BRIDGE_TX_LIMIT = 51; + const BRIDGE_XRPL_TX_LIMIT = 100; const getBridgeTxs = async () => { handleSetState((prevState) => ({ ...prevState, @@ -551,17 +679,27 @@ export const useTransactions = () => { })); const currentPage = Math.floor(state.bridgeItems.length / 100); + const xrplCoreumBridgeTransactions = await fetchBridgeXRPLCoreumTxData({ + page: String(currentPage + 1), + limit: String(BRIDGE_XRPL_TX_LIMIT), + }); + const bridgeTransactions = await fetchBridgeTxData({ page: String(currentPage + 1), limit: String(BRIDGE_TX_LIMIT), }); + const newTransactionItems = bridgeTransactions + .concat(xrplCoreumBridgeTransactions) + .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); + handleSetState((prevState) => ({ ...prevState, bridgeLoading: false, - bridgeItems: state.bridgeItems.concat(bridgeTransactions), + bridgeItems: state.bridgeItems.concat(newTransactionItems), isBridgeNextPageLoading: false, - bridgeHasNextPage: bridgeTransactions.length === BRIDGE_TX_LIMIT, + bridgeHasNextPage: + bridgeTransactions.length === BRIDGE_TX_LIMIT || xrplCoreumBridgeTransactions > 1, })); }; diff --git a/packages/ui/src/screens/transactions/index.tsx b/packages/ui/src/screens/transactions/index.tsx index 871d425dfe..65a75d324b 100644 --- a/packages/ui/src/screens/transactions/index.tsx +++ b/packages/ui/src/screens/transactions/index.tsx @@ -125,7 +125,11 @@ const Transactions = () => { rootClassName={classes.layoutRoot} contentWrapperClassName={classes.layoutContentWrapper} > - +
{t('transactions')}
diff --git a/packages/ui/src/screens/transactions/styles.ts b/packages/ui/src/screens/transactions/styles.ts index 6eec945f69..4c37df5295 100644 --- a/packages/ui/src/screens/transactions/styles.ts +++ b/packages/ui/src/screens/transactions/styles.ts @@ -8,6 +8,12 @@ const useStyles = makeStyles()((theme) => ({ color: theme.palette.custom.fonts.highlight, }, }, + contentWrapper: { + maxHeight: '100%', + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + }, box: { padding: `0 !important`, minHeight: '500px', diff --git a/packages/ui/src/screens/validators/components/list/components/tabs/__snapshots__/index.test.tsx.snap b/packages/ui/src/screens/validators/components/list/components/tabs/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 5318533ab4..0000000000 --- a/packages/ui/src/screens/validators/components/list/components/tabs/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,339 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: Validators/Tabs matches snapshot 1`] = ` -.emotion-0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 1rem; - margin-bottom: 12px; - margin-top: 12px; -} - -@media (min-width:768px) { - .emotion-0 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - } -} - -.emotion-0 .MuiTabs-indicator { - display: none; -} - -.emotion-0 .MuiTab-root { - background: rgba(27, 29, 35, 0.5); - color: #6C6F78; - font-weight: 400; - font-size: 14px; - padding: 12px 28px; -} - -.emotion-0 .MuiTab-root:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.emotion-0 .MuiTab-root:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.emotion-0 .MuiTab-root.Mui-selected { - background: rgba(37, 214, 149, 0.15); - color: #25D695; - font-weight: 600; -} - -.emotion-1 { - overflow: hidden; - min-height: 48px; - -webkit-overflow-scrolling: touch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -@media (max-width:374.95px) { - .emotion-1 .MuiTabs-scrollButtons { - display: none; - } -} - -.emotion-1 .MuiTab-textColorInherit { - color: #777777; - opacity: 1; - font-size: 1rem; -} - -.emotion-1 .MuiTab-textColorInherit.Mui-selected { - color: #000000; -} - -.emotion-1 .MuiTabs-indicator { - background-color: #000000; -} - -.emotion-1.MuiTabs-root, -.emotion-1 .MuiTab-root { - min-height: 40px; -} - -.emotion-2 { - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: none; -} - -.emotion-2::-webkit-scrollbar { - display: none; -} - -.emotion-3 { - position: relative; - display: inline-block; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - white-space: nowrap; - scrollbar-width: none; - overflow-x: auto; - overflow-y: hidden; -} - -.emotion-3::-webkit-scrollbar { - display: none; -} - -.emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - position: relative; - box-sizing: border-box; - -webkit-tap-highlight-color: transparent; - background-color: transparent; - outline: 0; - border: 0; - margin: 0; - border-radius: 0; - padding: 0; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - -moz-appearance: none; - -webkit-appearance: none; - -webkit-text-decoration: none; - text-decoration: none; - color: inherit; - font-size: 0.875rem; - letter-spacing: 1.25px; - text-transform: none; - font-family: "Noto Sans",sans-serif; - font-weight: 500; - line-height: 1.25; - max-width: 360px; - min-width: 90px; - position: relative; - min-height: 48px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - padding: 12px 16px; - overflow: hidden; - white-space: normal; - text-align: center; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - color: #414141; -} - -.emotion-5::-moz-focus-inner { - border-style: none; -} - -.emotion-5.Mui-disabled { - pointer-events: none; - cursor: default; -} - -@media print { - .emotion-5 { - -webkit-print-color-adjust: exact; - color-adjust: exact; - } -} - -.emotion-5.Mui-selected { - color: #25D695; -} - -.emotion-5.Mui-disabled { - color: rgba(0, 0, 0, 0.38); -} - -.emotion-6 { - position: absolute; - height: 2px; - bottom: 0; - width: 100%; - -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - background-color: #25D695; -} - -
-
-
-
-
- - - -
-
-
-
-`; diff --git a/packages/ui/src/screens/validators/components/list/components/tabs/index.test.tsx b/packages/ui/src/screens/validators/components/list/components/tabs/index.test.tsx deleted file mode 100644 index c48bc3813c..0000000000 --- a/packages/ui/src/screens/validators/components/list/components/tabs/index.test.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import renderer from 'react-test-renderer'; -import TabsHeader from '@/screens/validators/components/list/components/tabs'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// mocks -// ================================== -jest.mock('@/components/search', () => (props: JSX.IntrinsicElements['div']) => ( -