chore: Replace widget skeleton with internal swap skeleton (#6524)

* replace widget skeleton with internal version

* remove unuecessary div wrappers

* add snapshot test

* forgot to commit this file earlier

* remove exports

* revert(e2e): waitForAnimations

* convert values to px, refactor a bit to use flex gap instead of padding

* remove unnecessary props

* update snapshot test

---------
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/components/Tokens/TokenDetails/Skeleton.tsx

-import { WidgetSkeleton } from 'components/Widget'
-import { DEFAULT_WIDGET_WIDTH } from 'components/Widget'
+import { SwapSkeleton } from 'components/swap/SwapSkeleton'
 import { ArrowLeft } from 'react-feather'
 import { useParams } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
@@ -11,6 +10,8 @@ import { BreadcrumbNavLink } from './BreadcrumbNavLink'
 import { TokenPrice } from './PriceChart'
 import { StatPair, StatsWrapper, StatWrapper } from './StatsSection'
 
+const SWAP_COMPONENT_WIDTH = 360
+
 export const Hr = styled.hr`
   background-color: ${({ theme }) => theme.backgroundOutline};
   border: none;
@@ -43,7 +44,7 @@ export const RightPanel = styled.div`
   display: none;
   flex-direction: column;
   gap: 20px;
-  width: ${DEFAULT_WIDGET_WIDTH}px;
+  width: ${SWAP_COMPONENT_WIDTH}px;
 
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
     display: flex;
@@ -260,7 +261,7 @@ export function TokenDetailsPageSkeleton() {
     <TokenDetailsLayout>
       <TokenDetailsSkeleton />
       <RightPanel>
-        <WidgetSkeleton />
+        <SwapSkeleton />
       </RightPanel>
     </TokenDetailsLayout>
   )

src/components/Widget/index.tsx

@@ -36,7 +36,7 @@ import { useSyncWidgetSettings } from './settings'
 import { DARK_THEME, LIGHT_THEME } from './theme'
 import { useSyncWidgetTransactions } from './transactions'
 
-export const DEFAULT_WIDGET_WIDTH = 360
+const DEFAULT_WIDGET_WIDTH = 360
 
 const WIDGET_ROUTER_URL = 'https://api.uniswap.org/v1/'
 
@@ -198,7 +198,7 @@ export default function Widget({
   )
 }
 
-export function WidgetSkeleton({ width = DEFAULT_WIDGET_WIDTH }: { width?: number | string }) {
+function WidgetSkeleton({ width = DEFAULT_WIDGET_WIDTH }: { width?: number | string }) {
   const theme = useWidgetTheme()
   return <SwapWidgetSkeleton theme={theme} width={width} />
 }

src/components/swap/SwapSkeleton.test.tsx

+import { render } from 'test-utils/render'
+
+import { SwapSkeleton } from './SwapSkeleton'
+
+describe('SwapSkeleton.tsx', () => {
+  it('renders a skeleton', () => {
+    const { asFragment } = render(<SwapSkeleton />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

src/components/swap/SwapSkeleton.tsx

+import { Trans } from '@lingui/macro'
+import { ArrowContainer } from 'pages/Swap'
+import { ArrowDown } from 'react-feather'
+import styled, { useTheme } from 'styled-components/macro'
+import { ThemedText } from 'theme'
+
+import { ArrowWrapper } from './styleds'
+
+const StyledArrowWrapper = styled(ArrowWrapper)`
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+`
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  justify-content: space-between;
+
+  padding: 8px;
+  border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  border-radius: 16px;
+  background-color: ${({ theme }) => theme.backgroundSurface};
+`
+
+const Blob = styled.div<{ width?: number; radius?: number }>`
+  background-color: ${({ theme }) => theme.backgroundModule};
+  border-radius: ${({ radius }) => (radius ?? 4) + 'px'};
+  height: 56px;
+  width: ${({ width }) => (width ? width + 'px' : '100%')};
+`
+
+const ModuleBlob = styled(Blob)`
+  background-color: ${({ theme }) => theme.backgroundOutline};
+  height: 36px;
+`
+
+const TitleColumn = styled.div`
+  padding: 8px;
+`
+
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const InputColumn = styled.div`
+  display: flex;
+  flex-flow: column;
+  background-color: ${({ theme }) => theme.backgroundModule};
+  border-radius: 16px;
+  display: flex;
+  gap: 30px;
+  padding: 48px 12px;
+`
+
+const OutputWrapper = styled.div`
+  position: relative;
+`
+
+function Title() {
+  return (
+    <TitleColumn>
+      <ThemedText.SubHeader>
+        <Trans>Swap</Trans>
+      </ThemedText.SubHeader>
+    </TitleColumn>
+  )
+}
+
+function FloatingInput() {
+  return (
+    <Row>
+      <ModuleBlob width={60} />
+      <ModuleBlob width={100} radius={16} />
+    </Row>
+  )
+}
+
+function FloatingButton() {
+  return <Blob radius={16} />
+}
+
+export function SwapSkeleton() {
+  const theme = useTheme()
+
+  return (
+    <LoadingWrapper>
+      <Title />
+      <InputColumn>
+        <FloatingInput />
+      </InputColumn>
+      <OutputWrapper>
+        <StyledArrowWrapper clickable={false}>
+          <ArrowContainer>
+            <ArrowDown size="16" color={theme.textTertiary} />
+          </ArrowContainer>
+        </StyledArrowWrapper>
+        <InputColumn>
+          <FloatingInput />
+        </InputColumn>
+      </OutputWrapper>
+      <FloatingButton />
+    </LoadingWrapper>
+  )
+}

src/components/swap/__snapshots__/SwapSkeleton.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwapSkeleton.tsx renders a skeleton 1`] = `
+<DocumentFragment>
+  .c2 {
+  color: #0D111C;
+}
+
+.c9 {
+  border-radius: 12px;
+  height: 40px;
+  width: 40px;
+  position: relative;
+  margin-top: -18px;
+  margin-bottom: -18px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #E8ECFB;
+  border: 4px solid;
+  border-color: #FFFFFF;
+  z-index: 2;
+}
+
+.c11 {
+  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;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.c10 {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  margin: 0;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 4px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 8px;
+  border: 1px solid #D2D9EE;
+  border-radius: 16px;
+  background-color: #FFFFFF;
+}
+
+.c5 {
+  background-color: #F5F6FC;
+  border-radius: 4px;
+  height: 56px;
+  width: 60px;
+}
+
+.c7 {
+  background-color: #F5F6FC;
+  border-radius: 16px;
+  height: 56px;
+  width: 100px;
+}
+
+.c12 {
+  background-color: #F5F6FC;
+  border-radius: 16px;
+  height: 56px;
+  width: 100%;
+}
+
+.c6 {
+  background-color: #D2D9EE;
+  height: 36px;
+}
+
+.c1 {
+  padding: 8px;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  background-color: #F5F6FC;
+  border-radius: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 30px;
+  padding: 48px 12px;
+}
+
+.c8 {
+  position: relative;
+}
+
+<div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2 css-rjqmed"
+      >
+        Swap
+      </div>
+    </div>
+    <div
+      class="c3"
+    >
+      <div
+        class="c4"
+      >
+        <div
+          class="c5 c6"
+          width="60"
+        />
+        <div
+          class="c7 c6"
+          radius="16"
+          width="100"
+        />
+      </div>
+    </div>
+    <div
+      class="c8"
+    >
+      <div
+        class="c9 c10"
+      >
+        <div
+          class="c11"
+        >
+          <svg
+            fill="none"
+            height="16"
+            stroke="#98A1C0"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="12"
+              x2="12"
+              y1="5"
+              y2="19"
+            />
+            <polyline
+              points="19 12 12 19 5 12"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="c3"
+      >
+        <div
+          class="c4"
+        >
+          <div
+            class="c5 c6"
+            width="60"
+          />
+          <div
+            class="c7 c6"
+            radius="16"
+            width="100"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="c12"
+      radius="16"
+    />
+  </div>
+</DocumentFragment>
+`;

src/pages/Swap/index.tsx

@@ -65,8 +65,8 @@ import { computeFiatValuePriceImpact } from '../../utils/computeFiatValuePriceIm
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { computeRealizedPriceImpact, warningSeverity } from '../../utils/prices'
 import { supportedChainId } from '../../utils/supportedChainId'
-const ArrowContainer = styled.div`
-  display: inline-block;
+
+export const ArrowContainer = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;