From ebfcd8fbbe71aba25fa6ea0ae3c3f45eeb558cf3 Mon Sep 17 00:00:00 2001 From: Charles Bachmeier Date: Wed, 8 Nov 2023 10:24:59 -0800 Subject: [PATCH] refactor: move pool details components to the components folder (#7553) * refactor: move pool details components to the components folder * cleanup index imports * update snapshot --- .../PoolDetails/PoolDetailsHeader.test.tsx | 0 .../Pools}/PoolDetails/PoolDetailsHeader.tsx | 0 .../PoolDetails/PoolDetailsLink.test.tsx | 0 .../Pools}/PoolDetails/PoolDetailsLink.tsx | 0 .../PoolDetails/PoolDetailsStats.test.tsx | 0 .../Pools}/PoolDetails/PoolDetailsStats.tsx | 0 .../PoolDetailsStatsButtons.test.tsx | 0 .../PoolDetails/PoolDetailsStatsButtons.tsx | 0 .../PoolDetails/PoolDetailsTableSkeleton.tsx | 0 .../PoolDetailsHeader.test.tsx.snap | 0 .../PoolDetailsLink.test.tsx.snap | 0 .../PoolDetailsStats.test.tsx.snap | 0 .../PoolDetailsStatsButtons.test.tsx.snap | 0 .../Pools}/PoolDetails/icons.tsx | 0 .../Pools}/PoolDetails/shared.ts | 0 .../__snapshots__/index.test.tsx.snap | 336 +++++++++--------- src/pages/PoolDetails/index.tsx | 11 +- 17 files changed, 173 insertions(+), 174 deletions(-) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsHeader.test.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsHeader.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsLink.test.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsLink.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsStats.test.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsStats.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsStatsButtons.test.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsStatsButtons.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/PoolDetailsTableSkeleton.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/__snapshots__/PoolDetailsHeader.test.tsx.snap (100%) rename src/{pages => components/Pools}/PoolDetails/__snapshots__/PoolDetailsLink.test.tsx.snap (100%) rename src/{pages => components/Pools}/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap (100%) rename src/{pages => components/Pools}/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap (100%) rename src/{pages => components/Pools}/PoolDetails/icons.tsx (100%) rename src/{pages => components/Pools}/PoolDetails/shared.ts (100%) diff --git a/src/pages/PoolDetails/PoolDetailsHeader.test.tsx b/src/components/Pools/PoolDetails/PoolDetailsHeader.test.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsHeader.test.tsx rename to src/components/Pools/PoolDetails/PoolDetailsHeader.test.tsx diff --git a/src/pages/PoolDetails/PoolDetailsHeader.tsx b/src/components/Pools/PoolDetails/PoolDetailsHeader.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsHeader.tsx rename to src/components/Pools/PoolDetails/PoolDetailsHeader.tsx diff --git a/src/pages/PoolDetails/PoolDetailsLink.test.tsx b/src/components/Pools/PoolDetails/PoolDetailsLink.test.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsLink.test.tsx rename to src/components/Pools/PoolDetails/PoolDetailsLink.test.tsx diff --git a/src/pages/PoolDetails/PoolDetailsLink.tsx b/src/components/Pools/PoolDetails/PoolDetailsLink.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsLink.tsx rename to src/components/Pools/PoolDetails/PoolDetailsLink.tsx diff --git a/src/pages/PoolDetails/PoolDetailsStats.test.tsx b/src/components/Pools/PoolDetails/PoolDetailsStats.test.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsStats.test.tsx rename to src/components/Pools/PoolDetails/PoolDetailsStats.test.tsx diff --git a/src/pages/PoolDetails/PoolDetailsStats.tsx b/src/components/Pools/PoolDetails/PoolDetailsStats.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsStats.tsx rename to src/components/Pools/PoolDetails/PoolDetailsStats.tsx diff --git a/src/pages/PoolDetails/PoolDetailsStatsButtons.test.tsx b/src/components/Pools/PoolDetails/PoolDetailsStatsButtons.test.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsStatsButtons.test.tsx rename to src/components/Pools/PoolDetails/PoolDetailsStatsButtons.test.tsx diff --git a/src/pages/PoolDetails/PoolDetailsStatsButtons.tsx b/src/components/Pools/PoolDetails/PoolDetailsStatsButtons.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsStatsButtons.tsx rename to src/components/Pools/PoolDetails/PoolDetailsStatsButtons.tsx diff --git a/src/pages/PoolDetails/PoolDetailsTableSkeleton.tsx b/src/components/Pools/PoolDetails/PoolDetailsTableSkeleton.tsx similarity index 100% rename from src/pages/PoolDetails/PoolDetailsTableSkeleton.tsx rename to src/components/Pools/PoolDetails/PoolDetailsTableSkeleton.tsx diff --git a/src/pages/PoolDetails/__snapshots__/PoolDetailsHeader.test.tsx.snap b/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsHeader.test.tsx.snap similarity index 100% rename from src/pages/PoolDetails/__snapshots__/PoolDetailsHeader.test.tsx.snap rename to src/components/Pools/PoolDetails/__snapshots__/PoolDetailsHeader.test.tsx.snap diff --git a/src/pages/PoolDetails/__snapshots__/PoolDetailsLink.test.tsx.snap b/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsLink.test.tsx.snap similarity index 100% rename from src/pages/PoolDetails/__snapshots__/PoolDetailsLink.test.tsx.snap rename to src/components/Pools/PoolDetails/__snapshots__/PoolDetailsLink.test.tsx.snap diff --git a/src/pages/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap b/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap similarity index 100% rename from src/pages/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap rename to src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStats.test.tsx.snap diff --git a/src/pages/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap b/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap similarity index 100% rename from src/pages/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap rename to src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap diff --git a/src/pages/PoolDetails/icons.tsx b/src/components/Pools/PoolDetails/icons.tsx similarity index 100% rename from src/pages/PoolDetails/icons.tsx rename to src/components/Pools/PoolDetails/icons.tsx diff --git a/src/pages/PoolDetails/shared.ts b/src/components/Pools/PoolDetails/shared.ts similarity index 100% rename from src/pages/PoolDetails/shared.ts rename to src/components/Pools/PoolDetails/shared.ts diff --git a/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap b/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap index fe1ab05cf9..c4c4c633b7 100644 --- a/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap +++ b/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap @@ -208,174 +208,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the background-size: 400%; } -.c42 { - background-color: transparent; - bottom: 0; - border-radius: inherit; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - -webkit-transition: 150ms ease background-color; - transition: 150ms ease background-color; - width: 100%; -} - -.c39 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #FFEFFF; - border-radius: 16px; - border: 0; - color: #FC72FF; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - font-size: 16px; - font-weight: 535; - gap: 12px; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - line-height: 20px; - padding: 10px 12px; - position: relative; - -webkit-transition: 150ms ease opacity; - transition: 150ms ease opacity; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c39:active .c41 { - background-color: #B8C0DC3d; -} - -.c39:focus .c41 { - background-color: #B8C0DC3d; -} - -.c39:hover .c41 { - background-color: #98A1C014; -} - -.c39:disabled { - cursor: default; - opacity: 0.6; -} - -.c39:disabled:active .c41, -.c39:disabled:focus .c41, -.c39:disabled:hover .c41 { - background-color: transparent; -} - -.c54 { - color: #FF5F52; -} - -.c72 { - opacity: 0; - -webkit-transition: opacity 250ms ease-in; - transition: opacity 250ms ease-in; - width: 20px; - height: 20px; - border-radius: 50%; -} - -.c71 { - width: 20px; - height: 20px; - background: #22222212; - -webkit-transition: background-color 250ms ease-in; - transition: background-color 250ms ease-in; - box-shadow: 0 0 1px white; - border-radius: 50%; -} - -.c70 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c18 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 436px; - margin-bottom: 24px; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - width: 100%; -} - -.c24 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: flex-end; - -webkit-box-align: flex-end; - -ms-flex-align: flex-end; - align-items: flex-end; - height: 100%; - margin-bottom: 44px; - padding-bottom: 66px; - overflow: hidden; -} - -.c20 { - height: 16px; - width: 180px; -} - -.c21 { - height: 32px; - border-radius: 8px; -} - -.c22 { - margin-top: 4px; - height: 40px; -} - -.c25 { - -webkit-animation: wave 8s cubic-bezier(0.36,0.45,0.63,0.53) infinite; - animation: wave 8s cubic-bezier(0.36,0.45,0.63,0.53) infinite; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - overflow: hidden; - margin-top: 90px; -} - -.c23 { - height: 6px; -} - .c33 { height: 16px; width: 80px; @@ -503,6 +335,33 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the border-radius: 50%; } +.c72 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 20px; + height: 20px; + border-radius: 50%; +} + +.c71 { + width: 20px; + height: 20px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c70 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + .c62 { display: none; white-space: nowrap; @@ -613,6 +472,10 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the width: max-content; } +.c54 { + color: #FF5F52; +} + .c44 { font-weight: 485; font-size: 24px; @@ -685,6 +548,78 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the line-height: 44px; } +.c42 { + background-color: transparent; + bottom: 0; + border-radius: inherit; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + -webkit-transition: 150ms ease background-color; + transition: 150ms ease background-color; + width: 100%; +} + +.c39 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #FFEFFF; + border-radius: 16px; + border: 0; + color: #FC72FF; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 16px; + font-weight: 535; + gap: 12px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + line-height: 20px; + padding: 10px 12px; + position: relative; + -webkit-transition: 150ms ease opacity; + transition: 150ms ease opacity; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.c39:active .c41 { + background-color: #B8C0DC3d; +} + +.c39:focus .c41 { + background-color: #B8C0DC3d; +} + +.c39:hover .c41 { + background-color: #98A1C014; +} + +.c39:disabled { + cursor: default; + opacity: 0.6; +} + +.c39:disabled:active .c41, +.c39:disabled:focus .c41, +.c39:disabled:hover .c41 { + background-color: transparent; +} + .c38 { gap: 12px; } @@ -815,6 +750,71 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the justify-content: flex-end; } +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 436px; + margin-bottom: 24px; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + width: 100%; +} + +.c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + height: 100%; + margin-bottom: 44px; + padding-bottom: 66px; + overflow: hidden; +} + +.c20 { + height: 16px; + width: 180px; +} + +.c21 { + height: 32px; + border-radius: 8px; +} + +.c22 { + margin-top: 4px; + height: 40px; +} + +.c25 { + -webkit-animation: wave 8s cubic-bezier(0.36,0.45,0.63,0.53) infinite; + animation: wave 8s cubic-bezier(0.36,0.45,0.63,0.53) infinite; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + overflow: hidden; + margin-top: 90px; +} + +.c23 { + height: 6px; +} + .c2 { padding: 48px; width: 100%; diff --git a/src/pages/PoolDetails/index.tsx b/src/pages/PoolDetails/index.tsx index e10b7f0971..5fec1f601e 100644 --- a/src/pages/PoolDetails/index.tsx +++ b/src/pages/PoolDetails/index.tsx @@ -1,5 +1,10 @@ import { Trans } from '@lingui/macro' import Column from 'components/Column' +import { PoolDetailsHeader } from 'components/Pools/PoolDetails/PoolDetailsHeader' +import { PoolDetailsLink } from 'components/Pools/PoolDetails/PoolDetailsLink' +import { PoolDetailsStats } from 'components/Pools/PoolDetails/PoolDetailsStats' +import { PoolDetailsStatsButtons } from 'components/Pools/PoolDetails/PoolDetailsStatsButtons' +import { PoolDetailsTableSkeleton } from 'components/Pools/PoolDetails/PoolDetailsTableSkeleton' import Row from 'components/Row' import { LoadingBubble } from 'components/Tokens/loading' import { LoadingChart } from 'components/Tokens/TokenDetails/Skeleton' @@ -13,12 +18,6 @@ import styled from 'styled-components' import { BREAKPOINTS } from 'theme' import { isAddress } from 'utils' -import { PoolDetailsHeader } from './PoolDetailsHeader' -import { PoolDetailsLink } from './PoolDetailsLink' -import { PoolDetailsStats } from './PoolDetailsStats' -import { PoolDetailsStatsButtons } from './PoolDetailsStatsButtons' -import { PoolDetailsTableSkeleton } from './PoolDetailsTableSkeleton' - const PageWrapper = styled(Row)` padding: 48px; width: 100%;