diff --git a/.pnp.cjs b/.pnp.cjs index 94ee9a6d5d..7c387bce37 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -15587,6 +15587,42 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["lottie-react", [\ + ["npm:2.4.0", {\ + "packageLocation": "./.yarn/cache/lottie-react-npm-2.4.0-d4d95c55aa-e9ea4a89be.zip/node_modules/lottie-react/",\ + "packageDependencies": [\ + ["lottie-react", "npm:2.4.0"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:2.4.0", {\ + "packageLocation": "./.yarn/__virtual__/lottie-react-virtual-9732ed409d/0/cache/lottie-react-npm-2.4.0-d4d95c55aa-e9ea4a89be.zip/node_modules/lottie-react/",\ + "packageDependencies": [\ + ["lottie-react", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:2.4.0"],\ + ["@types/react", "npm:18.0.28"],\ + ["@types/react-dom", "npm:18.0.10"],\ + ["lottie-web", "npm:5.12.2"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:18.2.0"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["lottie-web", [\ + ["npm:5.12.2", {\ + "packageLocation": "./.yarn/cache/lottie-web-npm-5.12.2-942dc9e22a-af5bc3bc40.zip/node_modules/lottie-web/",\ + "packageDependencies": [\ + ["lottie-web", "npm:5.12.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["lower-case", [\ ["npm:2.0.2", {\ "packageLocation": "./.yarn/cache/lower-case-npm-2.0.2-151055f1c2-83a0a5f159.zip/node_modules/lower-case/",\ @@ -20318,6 +20354,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["jest-watch-typeahead", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:2.2.2"],\ ["js-yaml", "npm:4.1.0"],\ ["lightweight-charts", "npm:4.0.0"],\ + ["lottie-react", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:2.4.0"],\ ["markdown-to-jsx", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:7.1.9"],\ ["next", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:13.5.6"],\ ["next-i18next", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:13.1.5"],\ @@ -21675,6 +21712,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["jest-transform-stub", "npm:2.0.0"],\ ["jest-watch-typeahead", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:2.2.2"],\ ["js-yaml", "npm:4.1.0"],\ + ["lottie-react", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:2.4.0"],\ ["markdown-to-jsx", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:7.1.9"],\ ["next", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:13.5.6"],\ ["next-i18next", "virtual:9dce388d82c018b4a7af5edc7243e51f7023d1ab93a923b3959d0066ac6881c93b965a0932486426cbefa96c9c8e47849d5ff541d2404b8aca246480fa32f0d2#npm:13.1.5"],\ diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json index 76e5f77fdb..2cf4cd95e0 100644 --- a/apps/web-coreum/package.json +++ b/apps/web-coreum/package.json @@ -42,6 +42,7 @@ "i18next": "^22.4.9", "jdenticon": "^3.2.0", "js-yaml": "^4.1.0", + "lottie-react": "^2.4.0", "markdown-to-jsx": "^7.1.9", "next": "^13.5.6", "next-i18next": "^13.1.5", diff --git a/packages/ui/package.json b/packages/ui/package.json index b64c6ad120..dfff44dbd5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -41,6 +41,7 @@ "jdenticon": "^3.2.0", "js-yaml": "^4.1.0", "lightweight-charts": "^4.0.0", + "lottie-react": "^2.4.0", "markdown-to-jsx": "^7.1.9", "next": "^13.5.6", "next-i18next": "^13.1.5", diff --git a/packages/ui/src/assets/arrows.json b/packages/ui/src/assets/arrows.json new file mode 100644 index 0000000000..2b10392d72 --- /dev/null +++ b/packages/ui/src/assets/arrows.json @@ -0,0 +1 @@ +{"nm":"seat-1","ddd":0,"h":200,"w":200,"meta":{"a":"Inktwin","k":"down, scroll down, scroll, download, chevron down","d":"Down anim","g":"LottieFiles AE 0.1.20"},"layers":[{"ty":4,"nm":"Shape Layer 7","sr":1,"st":0,"op":840,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-2,77.25,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[50,50,100],"t":0},{"s":[50,50,100],"t":24}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100,-1,0],"t":0,"ti":[0,-31.667,0],"to":[0,31.667,0]},{"s":[100,94,0],"t":24}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[0],"t":0},{"s":[100],"t":24}],"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[104.5,-23.5],[-2,48.5],[-107,-22.5],[-107,49.5],[-2.25,120],[104.5,48.125]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Shape Layer 6","sr":1,"st":0,"op":840,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-2,77.25,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100,94,0],"t":0,"ti":[0,-15,0],"to":[0,15,0]},{"s":[100,139,0],"t":24}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[104.5,-23.5],[-2,48.5],[-107,-22.5],[-107,49.5],[-2.25,120],[104.5,48.125]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Shape Layer 5","sr":1,"st":0,"op":840,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-2,77.25,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[50,50,100],"t":0},{"s":[25,25,100],"t":24}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100,139,0],"t":0,"ti":[0,-20.333,0],"to":[0,20.333,0]},{"s":[100,200,0],"t":24}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":0},{"s":[0],"t":24}],"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[104.5,-23.5],[-2,48.5],[-107,-22.5],[-107,49.5],[-2.25,120],[104.5,48.125]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3}],"v":"5.5.7","fr":24,"op":24,"ip":0,"assets":[]} diff --git a/packages/ui/src/components/ExtendedTimestamp/index.tsx b/packages/ui/src/components/ExtendedTimestamp/index.tsx index 3848677e92..c8783091c9 100644 --- a/packages/ui/src/components/ExtendedTimestamp/index.tsx +++ b/packages/ui/src/components/ExtendedTimestamp/index.tsx @@ -38,7 +38,10 @@ const ExtendedTimestamp: FC = ({ timestamp, flexEnd = tr const interval = useRef(); const { classes, cx } = useStyles(); - const inputDate = useMemo(() => new Date(`${timestamp}Z`), [timestamp]); + const inputDate = useMemo( + () => new Date(timestamp.endsWith('Z') ? timestamp : `${timestamp}Z`), + [timestamp] + ); const currentDate = useMemo(() => new Date(), []); const timePassedMs = useMemo( () => currentDate.getTime() - inputDate.getTime(), diff --git a/packages/ui/src/components/msg/bank/multisend/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/msg/bank/multisend/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 43a2f9e322..0000000000 --- a/packages/ui/src/components/msg/bank/multisend/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,72 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: TransactionDetails/MsgMultiSend matches snapshot 1`] = ` -.emotion-0 { - 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-1 { - margin-top: 0; -} - -
-

- -

- - {"amount":"20.000000 UDARIC"} - -

-
-

- -

- - {"amount":"19.000000 UDARIC"} - -

-

- -

- - {"amount":"1.000000 UDARIC"} - -

-
-
-`; diff --git a/packages/ui/src/components/msg/bank/multisend/index.test.tsx b/packages/ui/src/components/msg/bank/multisend/index.test.tsx deleted file mode 100644 index 26bc64e98c..0000000000 --- a/packages/ui/src/components/msg/bank/multisend/index.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import renderer from 'react-test-renderer'; -import Multisend from '@/components/msg/bank/multisend'; -import { MsgMultiSend } from '@/models'; -import MockTheme from '@/tests/mocks/MockTheme'; - -jest.mock('@/components/name', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -// ================================== -// unit tests -// ================================== -describe('screen: TransactionDetails/MsgMultiSend', () => { - it('matches snapshot', () => { - const message = MsgMultiSend.fromJson({ - category: 'bank', - type: 'MsgMultiSend', - inputs: [ - { - address: 'address', - coins: [ - { - denom: 'udaric', - amount: '20000000', - }, - ], - }, - ], - outputs: [ - { - address: 'output1', - coins: [ - { - denom: 'udaric', - amount: '19000000', - }, - ], - }, - { - address: 'output2', - coins: [ - { - denom: 'udaric', - amount: '1000000', - }, - ], - }, - ], - }); - - const component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - expect( - component.root.findByProps({ i18nKey: 'message_contents:txMultisendContentOne' }).props.values - .amount - ).toEqual('20.000000 UDARIC'); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); diff --git a/packages/ui/src/components/msg/bank/send/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/msg/bank/send/__snapshots__/index.test.tsx.snap deleted file mode 100644 index bcf64a3612..0000000000 --- a/packages/ui/src/components/msg/bank/send/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,35 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: TransactionDetails/MsgSend matches snapshot 1`] = ` -.emotion-0 { - 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; -} - -

- -

- -
- {"amount":"200.000000 UDARIC"} - -

-`; diff --git a/packages/ui/src/components/msg/bank/send/index.test.tsx b/packages/ui/src/components/msg/bank/send/index.test.tsx deleted file mode 100644 index 3e38a0837a..0000000000 --- a/packages/ui/src/components/msg/bank/send/index.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import renderer from 'react-test-renderer'; -import Send from '@/components/msg/bank/send'; -import { MsgSend } from '@/models'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// mocks -// ================================== -jest.mock('@/components/name', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -// ================================== -// unit tests -// ================================== -describe('screen: TransactionDetails/MsgSend', () => { - it('matches snapshot', () => { - const message = MsgSend.fromJson({ - category: 'bank', - type: 'MsgSend', - from_address: 'fromAddress', - to_address: 'toAddress', - amount: [ - { - denom: 'udaric', - amount: '200000000', - }, - ], - json: JSON.stringify({ - from: 'fromAddress', - to: 'toAddress', - amount: [ - { - denom: 'udaric', - amount: '200000000', - }, - ], - }), - }); - const component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); diff --git a/packages/ui/src/components/msg/distribution/fund/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/msg/distribution/fund/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 1cb949ae0e..0000000000 --- a/packages/ui/src/components/msg/distribution/fund/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,30 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: TransactionDetails/Fund matches snapshot 1`] = ` -.emotion-0 { - 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; -} - -

- -

- - {"amount":"2.000000 UDARIC"} - -

-`; diff --git a/packages/ui/src/components/msg/distribution/fund/index.test.tsx b/packages/ui/src/components/msg/distribution/fund/index.test.tsx deleted file mode 100644 index 83e566e9e9..0000000000 --- a/packages/ui/src/components/msg/distribution/fund/index.test.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import renderer from 'react-test-renderer'; -import Fund from '@/components/msg/distribution/fund'; -import { MsgFundCommunityPool } from '@/models'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// mocks -// ================================== -jest.mock('@/components/name', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -// ================================== -// unit tests -// ================================== -describe('screen: TransactionDetails/Fund', () => { - it('matches snapshot', () => { - const message = MsgFundCommunityPool.fromJson({ - category: 'distribution', - type: 'MsgFundCommunityPool', - depositor: 'depositor', - amount: [ - { - denom: 'udaric', - amount: '2000000', - }, - ], - }); - const component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); 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 4728fb6231..9f17a4081e 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 UCORE"} + {"amount":"0 UTESTCORE"}

`; 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 839e0c4cd7..28be35f27f 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 UCORE"} + {"amount":"0 UTESTCORE"}

`; diff --git a/packages/ui/src/components/msg/governance/deposit_proposal/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/msg/governance/deposit_proposal/__snapshots__/index.test.tsx.snap deleted file mode 100644 index a4eeb93e0e..0000000000 --- a/packages/ui/src/components/msg/governance/deposit_proposal/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`screen: TransactionDetails/DepositProposal matches snapshot 1`] = ` -.emotion-0 { - 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; -} - -

- -

- - - # - 0 - - {"amount":"2.000000 UDARIC","proposal":"#0"} - -

-`; diff --git a/packages/ui/src/components/msg/governance/deposit_proposal/index.test.tsx b/packages/ui/src/components/msg/governance/deposit_proposal/index.test.tsx deleted file mode 100644 index b6834f02ba..0000000000 --- a/packages/ui/src/components/msg/governance/deposit_proposal/index.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import renderer from 'react-test-renderer'; -import DepositProposal from '@/components/msg/governance/deposit_proposal'; -import { MsgDeposit } from '@/models'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// mocks -// ================================== -jest.mock('@/components/name', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -// ================================== -// unit tests -// ================================== -describe('screen: TransactionDetails/DepositProposal', () => { - it('matches snapshot', () => { - const message = MsgDeposit.fromJson({ - category: 'governance', - type: 'MsgDeposit', - proposalId: 10, - depositor: 'depositor', - amount: [ - { - denom: 'udaric', - amount: '2000000', - }, - ], - }); - const component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); 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 index afda7459db..90ec38d7e9 100644 --- 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 @@ -574,7 +574,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
- + Testnet 1
+ > + Testnet1 +
+ > + explorer.testnet-1.coreum.dev +
({ - ...jest.requireActual('next/router'), - useRouter: () => ({ - push: mockPush, - }), -})); - -jest.mock('react-toastify', () => ({ - toast: jest.fn(), -})); - -jest.mock('@/utils/prefix_convert', () => ({ - ...jest.requireActual('@/utils/prefix_convert'), - isValidAddress(address: string) { - if ( - address === `${prefix.validator}1jrld5g998gqm4yx26l6cvhxz7y5adgxqzfdpes` || - address === `${prefix.account}1jrld5g998gqm4yx26l6cvhxz7y5adgxquy94nz` - ) { - return true; - } - return jest.requireActual('@/utils/prefix_convert').isValidAddress(address); - }, -})); - -const t = jest.fn((value) => value); - -describe('misc: useSearchBar', () => { - it('use a validator address', async () => { - const { result } = renderHook(() => useSearchBar(t), { - wrapper: RecoilRoot, - }); - act(() => { - result.current.handleOnSubmit(`${prefix.validator}1jrld5g998gqm4yx26l6cvhxz7y5adgxqzfdpes`); - }); - expect(mockPush).toBeCalledWith( - `/validators/${prefix.validator}1jrld5g998gqm4yx26l6cvhxz7y5adgxqzfdpes` - ); - }); - - it('use a consensus address', async () => { - const { result } = renderHook(() => useSearchBar(t), { - wrapper: RecoilRoot, - }); - act(() => { - result.current.handleOnSubmit(`${prefix.consensus}1rzhewpmmdl72lhnxj6zmxr4v94f522s4hyz467`); - }); - expect(mockPush).toBeCalledTimes(0); - }); - - it('use a user address', async () => { - const { result } = renderHook(() => useSearchBar(t), { - wrapper: RecoilRoot, - }); - act(() => { - result.current.handleOnSubmit(`${prefix.account}18h3zscwav6a4v5jt62at4xs9l88fsrm9hxepup`); - }); - expect(mockPush).toBeCalledWith( - `/accounts/${prefix.account}18h3zscwav6a4v5jt62at4xs9l88fsrm9hxepup` - ); - }); - - it('use a dtag', async () => { - if (!extra.profile) return; - const { result } = renderHook(() => useSearchBar(t), { - wrapper: RecoilRoot, - }); - act(() => { - result.current.handleOnSubmit(`@${prefix.account}1jrld5g998gqm4yx26l6cvhxz7y5adgxquy94nz`); - }); - expect(mockPush).toBeCalledWith(`/@${prefix.account}1jrld5g998gqm4yx26l6cvhxz7y5adgxquy94nz`); - }); - - it('use a block', async () => { - const { result } = renderHook(() => useSearchBar(t), { - wrapper: RecoilRoot, - }); - act(() => { - result.current.handleOnSubmit('300,000'); - }); - expect(mockPush).toBeCalledWith('/blocks/300000'); - }); - - it('use a transactions', async () => { - const { result } = renderHook(() => useSearchBar(t), { - wrapper: RecoilRoot, - }); - act(() => { - result.current.handleOnSubmit( - 'FF4ED0EA688507EF3469804580136B4925116FC9B5F5658AF2B65E987A2138E0' - ); - }); - expect(mockPush).toBeCalledWith( - '/transactions/FF4ED0EA688507EF3469804580136B4925116FC9B5F5658AF2B65E987A2138E0' - ); - }); -}); - -afterEach(() => { - jest.clearAllMocks(); -}); diff --git a/packages/ui/src/components/single_bridge_transaction_mobile/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/single_bridge_transaction_mobile/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 201e64e9d3..0000000000 --- a/packages/ui/src/components/single_bridge_transaction_mobile/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,240 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`component: SingleTransactionMobile matches snapshot 1`] = ` -.emotion-0 { - margin-bottom: 16px; - margin-top: 16px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; -} - -.emotion-1>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_bridge_transaction_mobile/index.test.tsx b/packages/ui/src/components/single_bridge_transaction_mobile/index.test.tsx deleted file mode 100644 index 580dbf6c45..0000000000 --- a/packages/ui/src/components/single_bridge_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_bridge_transaction_mobile/index.tsx b/packages/ui/src/components/single_bridge_transaction_mobile/index.tsx index a86b0ca63d..61598153ce 100644 --- a/packages/ui/src/components/single_bridge_transaction_mobile/index.tsx +++ b/packages/ui/src/components/single_bridge_transaction_mobile/index.tsx @@ -11,6 +11,7 @@ type SingleBridgeTransactionMobileProps = { txHash_2: ReactNode; destination: ReactNode; time: ReactNode; + sender: ReactNode; }; const SingleBridgeTransactionMobile: FC = ({ @@ -21,6 +22,7 @@ const SingleBridgeTransactionMobile: FC = ({ txHash_2, destination, amount, + sender, }) => { const { t } = useTranslation('transactions'); const { classes, cx } = useStyles(); @@ -46,30 +48,40 @@ const SingleBridgeTransactionMobile: FC = ({
- {t('txHash_1')} + {t('sender')} - - {txHash_1} + + {sender}
- {t('txHash_2')} + {t('destination')} - - {txHash_2} + + {destination}
- {t('destination')} + {t('txHash_1')} - {destination} + {txHash_1} + +
+
+ + {t('txHash_2')} + + + {txHash_2}
+
+
{t('time')} diff --git a/packages/ui/src/components/transactions_list_bridge/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/transactions_list_bridge/__snapshots__/index.test.tsx.snap deleted file mode 100644 index c9be385d19..0000000000 --- a/packages/ui/src/components/transactions_list_bridge/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`component: TransactionsList it renders 1`] = ` -[ - .emotion-0 { - height: 100%; -} - -.emotion-0:-webkit-scrollbar { - display: block; -} - -@media (max-width:1024.95px) { - .emotion-0 { - display: none; - } -} - -
-
-
, - .emotion-0 { - height: 100%; - padding-left: 16px; -} - -@media (min-width:1025px) { - .emotion-0 { - display: none; - } -} - -
-
-
, -] -`; 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 362d7f5081..f5882ac9b7 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 @@ -7,7 +7,7 @@ import { useGrid } from '@/hooks/use_react_window'; import { mergeRefs } from '@/utils/merge_refs'; import Typography from '@mui/material/Typography'; import { useTranslation } from 'next-i18next'; -import { FC, LegacyRef } from 'react'; +import { FC, LegacyRef, useCallback } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { VariableSizeGrid as Grid } from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; @@ -19,6 +19,8 @@ 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 Lottie from 'lottie-react'; +import arrows from '@/assets/arrows.json'; const Desktop: FC = ({ className, @@ -36,6 +38,116 @@ const Desktop: FC = ({ const { classes, cx } = useStyles(); const { t } = useTranslation('transactions'); + const renderSource = useCallback((source: string) => { + if (source === 'coreum') { + return ( +
+ + + + + + + + + + + + +
+ +
+ + + + +
+ ); + } + + return ( +
+ + + + +
+ +
+ + + + + + + + + + + + +
+ ); + }, []); + const items = transactions.map((x) => { const asset = metadatas.find( (item: any) => item.base.toLowerCase() === x.coin.denom.toLowerCase() @@ -62,62 +174,76 @@ const Desktop: FC = ({ : tokenInAssets?.extra.xrpl_info.currency; } - let parsedAmount = `${amount} ${displayDenom}`; - if (tokenInAssets) { if (x.coin.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)) .toFixed(tokenInAssets.extra.ibc_info!.precision); - amount = formatNumberWithThousandsSeparator(availableValue); - parsedAmount = `${amount} ${tokenDenom}`; + amount = formatNumberWithThousandsSeparator(availableValue); + displayDenom = tokenDenom; } } return { - route:
{x.source}
, - amount:
{parsedAmount}
, - txHash_1: ( + route: renderSource(x.source), + amount: ( + + {amount.split('.')[0]} + .{amount.split('.')[1]} + {displayDenom} + + ), + sender: ( + {x.sender}} placement="bottom" arrow> + + {getMiddleEllipsis(x?.sender || '', { + beginning: 7, + ending: 4, + })} + + + ), + destination: ( {x.txHash_1}} + title={
{x.destination}
} placement="bottom" arrow > - - {getMiddleEllipsis(x?.txHash_1 || '', { + + {getMiddleEllipsis(x?.destination || '', { beginning: 7, ending: 4, })} ), - txHash_2: ( + txHash_1: ( {x.txHash_2}} + title={
{x.txHash_1}
} placement="bottom" arrow > - - {getMiddleEllipsis(x?.txHash_2 || '', { + + {getMiddleEllipsis(x?.txHash_1 || '', { beginning: 7, ending: 4, })} ), - destination: ( + txHash_2: ( {x.destination}} + title={
{x.txHash_2}
} placement="bottom" arrow > - - {getMiddleEllipsis(x?.destination || '', { + + {getMiddleEllipsis(x?.txHash_2 || '-', { beginning: 7, ending: 4, })} diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/styles.ts b/packages/ui/src/components/transactions_list_bridge/components/desktop/styles.ts index 05b3a37316..3267e2c42f 100644 --- a/packages/ui/src/components/transactions_list_bridge/components/desktop/styles.ts +++ b/packages/ui/src/components/transactions_list_bridge/components/desktop/styles.ts @@ -88,6 +88,14 @@ const useStyles = makeStyles()((theme) => ({ fontSize: theme.spacing(1.75), }, }, + route: { + display: 'flex', + alignItems: 'center', + gap: 12, + }, + arrows: { + transform: 'rotate(-90deg)', + }, })); export default useStyles; 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 b04e1a3fdd..d233f16fd1 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 @@ -5,29 +5,33 @@ export const columns: { }[] = [ { key: 'route', - width: 17, + width: 12, }, { key: 'amount', - width: 17, - }, - { - key: 'txHash_1', - width: 18, + width: 15, }, { - key: 'txHash_2', + key: 'sender', align: 'right', - width: 18, + width: 15, }, { key: 'destination', align: 'right', - width: 18, + width: 15, + }, + { + key: 'txHash_1', + width: 15, + }, + { + key: 'txHash_2', + width: 15, }, { key: 'time', align: 'right', - width: 12, + width: 13, }, ]; 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 7a7bb7f973..4061b514ed 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 @@ -5,7 +5,7 @@ import type { TransactionsListBridgeState } from '@/components/transactions_list import { useList, useListRow } from '@/hooks/use_react_window'; import { mergeRefs } from '@/utils/merge_refs'; import Divider from '@mui/material/Divider'; -import { FC } from 'react'; +import { FC, useCallback } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { ListChildComponentProps, VariableSizeList as List } from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; @@ -13,11 +13,13 @@ import ExtendedTimestamp from '@/components/ExtendedTimestamp'; // import { useTranslation } from 'next-i18next'; import SingleBridgeTransactionMobile from '@/components/single_bridge_transaction_mobile'; import { ACCOUNT_DETAILS, formatToken, getMiddleEllipsis, TRANSACTION_DETAILS } from '@/utils'; -import { Tooltip, Zoom } from '@mui/material'; +import { Tooltip, Typography, Zoom } from '@mui/material'; import Link from 'next/link'; import { formatNumberWithThousandsSeparator } from '@/screens/account_details/components/other_tokens/components/desktop'; import { Asset, convertHexToString } from '@/screens/assets/hooks'; import Big from 'big.js'; +import Lottie from 'lottie-react'; +import arrows from '@/assets/arrows.json'; type ListItemProps = Pick & { setRowHeight: Parameters[1]; @@ -38,10 +40,120 @@ const ListItem: FC = ({ assets, metadatas, }) => { - // const { classes } = useStyles(); + const { classes } = useStyles(); // const { t } = useTranslation('transactions'); const { rowRef } = useListRow(index, setRowHeight); + const renderSource = useCallback((source: string) => { + if (source === 'coreum') { + return ( +
+ + + + + + + + + + + + +
+ +
+ + + + +
+ ); + } + + return ( +
+ + + + +
+ +
+ + + + + + + + + + + + +
+ ); + }, []); + if (!isItemLoaded?.(index)) { return (
@@ -77,8 +189,6 @@ const ListItem: FC = ({ : tokenInAssets?.extra.xrpl_info.currency; } - let parsedAmount = `${amount} ${displayDenom}`; - if (tokenInAssets) { if (transaction.coin.denom.includes('ibc')) { const tokenDenom = tokenInAssets.extra.ibc_info!.display_name; @@ -86,53 +196,73 @@ const ListItem: FC = ({ .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision)) .toFixed(tokenInAssets.extra.ibc_info!.precision); amount = formatNumberWithThousandsSeparator(availableValue); - - parsedAmount = `${amount} ${tokenDenom}`; + displayDenom = tokenDenom; } } const item = { - route:
{transaction.source}
, - amount:
{parsedAmount}
, - txHash_1: ( + route: renderSource(transaction.source), + amount: ( + + {amount.split('.')[0]} + .{amount.split('.')[1]} + {displayDenom} + + ), + sender: ( {transaction.txHash_1}} + title={
{transaction.sender}
} placement="bottom" arrow > - - {getMiddleEllipsis(transaction?.txHash_1 || '', { + + {getMiddleEllipsis(transaction?.sender || '', { beginning: 7, ending: 4, })} ), - txHash_2: ( + destination: ( {transaction.txHash_2}} + title={
{transaction.destination}
} placement="bottom" arrow > - - {getMiddleEllipsis(transaction?.txHash_2 || '', { + + {getMiddleEllipsis(transaction?.destination || '', { beginning: 7, ending: 4, })} ), - destination: ( + txHash_1: ( {transaction.destination}} + title={
{transaction.txHash_1}
} placement="bottom" arrow > - - {getMiddleEllipsis(transaction?.destination || '', { + + {getMiddleEllipsis(transaction?.txHash_1 || '', { + beginning: 7, + ending: 4, + })} + + + ), + txHash_2: ( + {transaction.txHash_2}} + placement="bottom" + arrow + > + + {getMiddleEllipsis(transaction?.txHash_2 || '', { beginning: 7, ending: 4, })} diff --git a/packages/ui/src/components/transactions_list_bridge/components/mobile/styles.ts b/packages/ui/src/components/transactions_list_bridge/components/mobile/styles.ts index 34bd0161de..21adb035fd 100644 --- a/packages/ui/src/components/transactions_list_bridge/components/mobile/styles.ts +++ b/packages/ui/src/components/transactions_list_bridge/components/mobile/styles.ts @@ -31,6 +31,14 @@ const useStyles = makeStyles()((theme) => ({ color: theme.palette.text.secondary, fontSize: theme.spacing(1.75), }, + route: { + display: 'flex', + alignItems: 'center', + gap: 12, + }, + arrows: { + transform: 'rotate(-90deg)', + }, })); export default useStyles; diff --git a/packages/ui/src/components/transactions_list_bridge/index.test.tsx b/packages/ui/src/components/transactions_list_bridge/index.test.tsx deleted file mode 100644 index f6ad9fd9a0..0000000000 --- a/packages/ui/src/components/transactions_list_bridge/index.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { ComponentProps } from 'react'; -import renderer from 'react-test-renderer'; -import TransactionsList from '@/components/transactions_list'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// global setup -// ================================== -let component: renderer.ReactTestRenderer; - -// ================================== -// mocks -// ================================== -jest.mock('@/components/no_data', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -const txs: ComponentProps['transactions'] = [ - { - height: 1212131, - hash: 'D0243447726B8BD7AE94BF4F98E536A647959194E870AB8566CB833A3CC847F6', - type: ['cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward'], - success: true, - timestamp: '2021-05-24T05:28:05.839448', - messages: { - count: 2, - items: [ - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward', - delegator_address: 'desmos1r574p4zzhe0rq7w4acjwdqrejszjjz2lc4an7a', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - ], - }, - fee: { - baseDenom: '', - displayDenom: '', - exponent: 6, - value: '0.7531', - }, - sender: 'spenderAddress', - receiver: 'receiverAddress', - amount: '', - }, -]; - -const props: ComponentProps = { - hasNextPage: true, - isNextPageLoading: false, - loadNextPage: () => jest.fn(), - loadMoreItems: () => jest.fn(), - isItemLoaded: () => false, - itemCount: 1, - transactions: txs, -}; - -// ================================== -// unit tests -// ================================== -describe('component: TransactionsList', () => { - beforeEach(() => { - component = renderer.create( - - - - ); - }); - - it('it renders', () => { - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); diff --git a/packages/ui/src/components/transactions_list_bridge_details/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/transactions_list_bridge_details/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 15bfb8215a..0000000000 --- a/packages/ui/src/components/transactions_list_bridge_details/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`component: TransactionsListDetails handles empty data correctly 1`] = ` -
-`; - -exports[`component: TransactionsListDetails matches snapshot 1`] = ` -
-`; diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/transactions_list_bridge_details/components/list/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 0cf57ad256..0000000000 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`component: TransactionsListDetails/TransactionList matches snapshot 1`] = ` -.emotion-0 { - height: 100%; -} - -
-
-
-`; diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 83ec3f0cd3..0000000000 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,253 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components: SingleTransaction matches snapshot 1`] = ` -.emotion-0 { - margin-bottom: 16px; - margin-top: 16px; -} - -.emotion-1 { - background: #F8F8F8; - padding: 8px 16px; - color: #414141; -} - -.emotion-2 { - 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-3 { - padding: 16px 16px 8px; -} - -.emotion-4 { - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -@media (min-width:1025px) { - .emotion-4 { - grid-template-columns: repeat(4, 1fr); - } -} - -.emotion-5 { - grid-column: 1/3; - margin-bottom: 16px; -} - -.emotion-5.messages, -.emotion-5.result { - grid-column: auto/span 1; -} - -.emotion-5 .label { - margin-bottom: 8px; - color: #777777; -} - -.emotion-5 p.value { - color: #414141; -} - -.emotion-5 a { - color: #4092CD; -} - -@media (min-width:768px) { - .emotion-5 { - grid-column: auto/span 1; - } -} - -.emotion-6 { - margin: 0; - font-size: 1rem; - letter-spacing: 0.15px; - font-family: "Noto Sans",sans-serif; - font-weight: 400; - line-height: 1.235; -} - -.emotion-25 { - margin: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - border-width: 0; - border-style: solid; - border-color: #E8E8E8; - border-bottom-width: thin; -} - -.emotion-27 { - margin-top: 24px; -} - -.emotion-28 { - word-break: break-all; -} - -.emotion-28:not(:last-child) { - margin-bottom: 32px; -} - -.emotion-29 { - margin-bottom: 16px; -} - -
-
-

-

- hash -
-

-
-
-
-
-

- block -

-
- block -
-
-
-

- type -

-
- type -
-
-
-

- sender -

-
-
-

- receiver -

-
-
-

- amount -

-
-
-

- fee -

-
-
-

- time -

-

- 2021-07-13T08:00:00 -

-
-
-

- messages -

-

- 1,000 -

-
-
-

- result -

-
- result -
-
-
-
-
-
-
-
-
- type -
-
-
- message -
-
-
-
-
-
-`; diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.test.tsx b/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.test.tsx deleted file mode 100644 index 29f38dd430..0000000000 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import renderer from 'react-test-renderer'; -import SingleTransaction from '@/components/transactions_list_details/components/list/components/single_transaction'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// unit tests -// ================================== -describe('components: SingleTransaction', () => { - it('matches snapshot', () => { - const component = renderer.create( - - block
} - hash={
hash
} - time="2021-07-13T08:00:00" - type={
type
} - messageCount="1,000" - messages={[ - { - type:
type
, - message:
message
, - }, - ]} - result={
result
} - /> - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.tsx b/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.tsx index 08c5de5ac9..523bc02165 100644 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.tsx +++ b/packages/ui/src/components/transactions_list_bridge_details/components/list/components/single_transaction/index.tsx @@ -11,6 +11,7 @@ export type SingleBridgeTransactionProps = { txHash_2: ReactNode; destination: ReactNode; time: ReactNode; + sender: ReactNode; }; const SingleBridgeTransaction: FC = ({ @@ -21,6 +22,7 @@ const SingleBridgeTransaction: FC = ({ txHash_2, destination, amount, + sender, }) => { const { t } = useTranslation('transactions'); const { classes, cx } = useStyles(); @@ -37,9 +39,9 @@ const SingleBridgeTransaction: FC = ({
- {t('amount')} + {t('sender')} - {amount} + {sender}
@@ -47,11 +49,11 @@ const SingleBridgeTransaction: FC = ({ {destination}
-
+
- {t('time')} + {t('amount')} - {time} + {amount}
@@ -67,6 +69,12 @@ const SingleBridgeTransaction: FC = ({ {txHash_2}
+
+ + {t('time')} + + {time} +
diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/index.test.tsx b/packages/ui/src/components/transactions_list_bridge_details/components/list/index.test.tsx deleted file mode 100644 index 364d929510..0000000000 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/index.test.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import renderer from 'react-test-renderer'; -import TransactionList from '@/components/transactions_list_details/components/list'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// mocks -// ================================== - -jest.mock('react-window-infinite-loader', () => ({ - InfiniteLoader: (props: JSX.IntrinsicElements['div']) =>
, -})); - -jest.mock('@/components/loading', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -jest.mock( - '@/components/transactions_list_details/components/list/components/single_transaction', - () => (props: JSX.IntrinsicElements['div']) =>
-); - -// ================================== -// unit tests -// ================================== -describe('component: TransactionsListDetails/TransactionList', () => { - it('matches snapshot', () => { - const txs = [ - { - height: 1212131, - hash: 'D0243447726B8BD7AE94BF4F98E536A647959194E870AB8566CB833A3CC847F6', - type: [''], - success: true, - timestamp: '2021-05-24T05:28:05.839448', - messages: { - count: 2, - items: [ - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward', - delegator_address: 'desmos1r574p4zzhe0rq7w4acjwdqrejszjjz2lc4an7a', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - ], - }, - }, - { - height: 1212132, - hash: 'W0333447726B8BD7AE94BF4F98E536A647959194E870AB8566CB833A3CC847F6', - type: [''], - success: true, - timestamp: '2021-05-24T05:28:11.839448', - messages: { - count: 1, - items: [ - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward', - delegator_address: 'desmos1r574p4zzhe0rq7w4acjwdqrejszjjz2lc4an7a', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - ], - }, - }, - ]; - - const txProps = { - loadMoreItems: () => jest.fn(), - isItemLoaded: () => false, - itemCount: 2, - transactions: txs, - }; - const component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); 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 94e77f24e5..6f77080d90 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 @@ -1,12 +1,12 @@ /* eslint-disable no-nested-ternary */ // import { useTranslation } from 'next-i18next'; -import { FC } from 'react'; +import { FC, useCallback } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { ListChildComponentProps, VariableSizeList as List } from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; import { useRecoilValue } from 'recoil'; import Loading from '@/components/loading'; -import useStyles from '@/components/transactions_list_details/components/list/styles'; +import useStyles from '@/components/transactions_list_bridge_details/components/list/styles'; import type { TransactionsListBridgeDetailsState } from '@/components/transactions_list_bridge_details/types'; import { useList, useListRow } from '@/hooks/use_react_window'; import { readDate } from '@/recoil/settings'; @@ -15,10 +15,12 @@ import dayjs, { formatDayJs } from '@/utils/dayjs'; import { mergeRefs } from '@/utils/merge_refs'; import { ACCOUNT_DETAILS, formatToken, getMiddleEllipsis, TRANSACTION_DETAILS } from '@/utils'; import Link from 'next/link'; -import { Tooltip, Zoom } from '@mui/material'; +import { Tooltip, Typography, Zoom } from '@mui/material'; import { Asset, convertHexToString } from '@/screens/assets/hooks'; import { formatNumberWithThousandsSeparator } from '@/screens/account_details/components/other_tokens/components/desktop'; import Big from 'big.js'; +import Lottie from 'lottie-react'; +import arrows from '@/assets/arrows.json'; import SingleBridgeTransaction from './components/single_transaction'; type ListItemProps = Pick & { @@ -44,6 +46,116 @@ const ListItem: FC = ({ const dateFormat = useRecoilValue(readDate); const { classes } = useStyles(); + const renderSource = useCallback((source: string) => { + if (source === 'coreum') { + return ( +
+ + + + + + + + + + + + +
+ +
+ + + + +
+ ); + } + + return ( +
+ + + + +
+ +
+ + + + + + + + + + + + +
+ ); + }, []); + if (!isItemLoaded?.(index)) { return (
@@ -79,8 +191,6 @@ const ListItem: FC = ({ : tokenInAssets?.extra.xrpl_info.currency; } - let parsedAmount = `${amount} ${displayDenom}`; - if (tokenInAssets) { if (transaction.coin.denom.includes('ibc')) { const tokenDenom = tokenInAssets.extra.ibc_info!.display_name; @@ -88,15 +198,20 @@ const ListItem: FC = ({ .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision)) .toFixed(tokenInAssets.extra.ibc_info!.precision); amount = formatNumberWithThousandsSeparator(availableValue); - - parsedAmount = `${amount} ${tokenDenom}`; + displayDenom = tokenDenom; } } const item = { key: `${transaction.txHash_1}-${transaction.txHash_2}`, - route:
{transaction.source}
, - amount:
{parsedAmount}
, + route: renderSource(transaction.source), + amount: ( + + {amount.split('.')[0]} + .{amount.split('.')[1]} + {displayDenom} + + ), txHash_1: ( = ({ placement="bottom" arrow > - + - {getMiddleEllipsis(transaction?.txHash_1 || '', { + {getMiddleEllipsis(transaction?.txHash_1 || '-', { beginning: 15, ending: 4, })} - {getMiddleEllipsis(transaction?.txHash_1 || '', { + {getMiddleEllipsis(transaction?.txHash_1 || '-', { beginning: 15, ending: 10, })} @@ -127,15 +246,42 @@ const ListItem: FC = ({ placement="bottom" arrow > - + + + {getMiddleEllipsis(transaction?.txHash_2 || '-', { + beginning: 15, + ending: 4, + })} + + + {getMiddleEllipsis(transaction?.txHash_2 || '-', { + beginning: 15, + ending: 10, + })} + + + + ), + sender: ( + {transaction.sender}} + placement="bottom" + arrow + > + - {getMiddleEllipsis(transaction?.txHash_2 || '', { + {getMiddleEllipsis(transaction?.sender || '', { beginning: 15, ending: 4, })} - {getMiddleEllipsis(transaction?.txHash_2 || '', { + {getMiddleEllipsis(transaction?.sender || '', { beginning: 15, ending: 10, })} diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/styles.ts b/packages/ui/src/components/transactions_list_bridge_details/components/list/styles.ts index 9f51bf0eb3..d482ffc612 100644 --- a/packages/ui/src/components/transactions_list_bridge_details/components/list/styles.ts +++ b/packages/ui/src/components/transactions_list_bridge_details/components/list/styles.ts @@ -8,6 +8,26 @@ const useStyles = makeStyles()((theme) => ({ marginTop: 10, background: theme.palette.background.paper, }, + amount: { + fontSize: theme.spacing(2), + }, + decimal: { + fontSize: theme.spacing(1.75), + color: theme.palette.text.secondary, + }, + denom: { + color: theme.palette.primary.main, + marginLeft: theme.spacing(0.5), + fontSize: theme.spacing(1.75), + }, + route: { + display: 'flex', + alignItems: 'center', + gap: 12, + }, + arrows: { + transform: 'rotate(-90deg)', + }, })); export default useStyles; diff --git a/packages/ui/src/components/transactions_list_bridge_details/index.test.tsx b/packages/ui/src/components/transactions_list_bridge_details/index.test.tsx deleted file mode 100644 index 513a3cc288..0000000000 --- a/packages/ui/src/components/transactions_list_bridge_details/index.test.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import renderer from 'react-test-renderer'; -import TransactionsListDetails from '@/components/transactions_list_details'; -import MockTheme from '@/tests/mocks/MockTheme'; - -// ================================== -// global setup -// ================================== -let component: renderer.ReactTestRenderer; - -// ================================== -// mocks -// ================================== -jest.mock('@/components/no_data', () => (props: JSX.IntrinsicElements['div']) => ( -
-)); - -jest.mock( - '@/components/transactions_list_details/components/list', - () => (props: JSX.IntrinsicElements['div']) =>
-); - -const txs = [ - { - height: 1212131, - hash: 'D0243447726B8BD7AE94BF4F98E536A647959194E870AB8566CB833A3CC847F6', - type: ['cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward'], - success: true, - timestamp: '2021-05-24T05:28:05.839448', - messages: { - count: 2, - items: [ - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward', - delegator_address: 'desmos1r574p4zzhe0rq7w4acjwdqrejszjjz2lc4an7a', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - { - '@type': '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission', - validator_address: 'desmosvaloper1r574p4zzhe0rq7w4acjwdqrejszjjz2lxc4850', - }, - ], - }, - }, -]; - -const props = { - hasNextPage: false, - isNextPageLoading: false, - loadNextPage: () => jest.fn(), - loadMoreItems: () => jest.fn(), - isItemLoaded: () => false, - itemCount: 1, - transactions: txs, -}; - -const emptyProps = { - hasNextPage: true, - isNextPageLoading: false, - loadNextPage: () => jest.fn(), - loadMoreItems: () => jest.fn(), - isItemLoaded: () => true, - itemCount: 0, - transactions: [], -}; - -// ================================== -// unit tests -// ================================== -describe('component: TransactionsListDetails', () => { - it('matches snapshot', () => { - component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it('handles empty data correctly', () => { - component = renderer.create( - - - - ); - const tree = component?.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); -}); 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 9a95193d1d..f6bbd15198 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 + coreum-testnet

,
h1 { - font-size: 1.75rem; - } - - .emotion-1>h4 { - font-size: 0.75rem; - } -} - -.emotion-1 .MuiSwitch-root { - width: 36px; - height: 20px; - padding: 0; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-switchBase { - padding: 0; - margin: 2px; - transition-duration: 300ms; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-switchBase.Mui-checked { - -webkit-transform: translateX(16px); - -moz-transform: translateX(16px); - -ms-transform: translateX(16px); - transform: translateX(16px); - color: #fff; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track { - background-color: #25D695; - opacity: 1; - border: 0; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-switchBase.Mui-checked.Mui-disabled+.MuiSwitch-track { - opacity: 0.5; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-switchBase.Mui-focusVisible .MuiSwitch-thumb { - color: #33cf4d; - border: 6px solid #fff; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-switchBase.Mui-disabled+.MuiSwitch-track { - opacity: 0.7; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-thumb { - box-sizing: border-box; - width: 16px; - height: 16px; -} - -.emotion-1 .MuiSwitch-root .MuiSwitch-track { - border-radius: 18px; - background-color: #373E48; - opacity: 1; - -webkit-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - -.emotion-2 { - margin: 0; - font-size: 2rem; - letter-spacing: 0.25px; - font-weight: 600; - margin-bottom: 12px; - font-family: "Noto Sans",sans-serif; - line-height: 1.167; -} - -.emotion-4 { - margin: 0; - font-size: 1rem; - letter-spacing: 0.15px; - font-family: "Noto Sans",sans-serif; - font-weight: 400; - line-height: 1.235; -} - -.emotion-5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: 58px; - height: 38px; - overflow: hidden; - padding: 12px; - box-sizing: border-box; - position: relative; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - z-index: 0; - vertical-align: middle; -} - -@media print { - .emotion-5 { - -webkit-print-color-adjust: exact; - color-adjust: exact; - } -} - -.emotion-6 { - 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; - padding: 9px; - border-radius: 50%; - position: absolute; - top: 0; - left: 0; - z-index: 1; - color: #fff; - -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,-webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - -.emotion-6::-moz-focus-inner { - border-style: none; -} - -.emotion-6.Mui-disabled { - pointer-events: none; - cursor: default; -} - -@media print { - .emotion-6 { - -webkit-print-color-adjust: exact; - color-adjust: exact; - } -} - -.emotion-6.Mui-checked { - -webkit-transform: translateX(20px); - -moz-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); -} - -.emotion-6.Mui-disabled { - color: #f5f5f5; -} - -.emotion-6.Mui-checked+.MuiSwitch-track { - opacity: 0.5; -} - -.emotion-6.Mui-disabled+.MuiSwitch-track { - opacity: 0.12; -} - -.emotion-6 .MuiSwitch-input { - left: -100%; - width: 300%; -} - -.emotion-6:hover { - background-color: rgba(0, 0, 0, 0.04); -} - -@media (hover: none) { - .emotion-6:hover { - background-color: transparent; - } -} - -.emotion-6.Mui-checked { - color: #25D695; -} - -.emotion-6.Mui-checked:hover { - background-color: rgba(37, 214, 149, 0.04); -} - -@media (hover: none) { - .emotion-6.Mui-checked:hover { - background-color: transparent; - } -} - -.emotion-6.Mui-checked.Mui-disabled { - color: rgb(172, 239, 214); -} - -.emotion-6.Mui-checked+.MuiSwitch-track { - background-color: #25D695; -} - -.emotion-7 { - cursor: inherit; - position: absolute; - opacity: 0; - width: 100%; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - z-index: 1; -} - -.emotion-8 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); - background-color: currentColor; - width: 20px; - height: 20px; - border-radius: 50%; -} - -.emotion-9 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; -} - -.emotion-10 { - height: 100%; - width: 100%; - border-radius: 7px; - z-index: -1; - -webkit-transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - background-color: #000; - opacity: 0.38; -} - -.emotion-11 { - padding: 0!important; - min-height: 500px; - height: 100%; - overflow: hidden!important; -} - -
-
-
-

- transactions -

-
-

- showDetails -

- - - - - - - - -
-
-
-
-
-
-
-`; diff --git a/packages/ui/src/screens/transactions/components/tabs/__snapshots__/index.test.tsx.snap b/packages/ui/src/screens/transactions/components/tabs/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 5318533ab4..0000000000 --- a/packages/ui/src/screens/transactions/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/transactions/components/tabs/index.test.tsx b/packages/ui/src/screens/transactions/components/tabs/index.test.tsx deleted file mode 100644 index c48bc3813c..0000000000 --- a/packages/ui/src/screens/transactions/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']) => ( -