// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PoolDetailsStatsButton loading skeleton shown correctly 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c2 {
  gap: 12px;
  z-index: 1;
}

.c3 {
  height: 44px;
  width: 50%;
  border-radius: 900px;
}

@media (max-width:1024px) {
  .c2 {
    gap: 8px;
    position: fixed;
    bottom: 0px;
    left: 0;
    margin: 8px;
    width: calc(100% - 16px);
    background: #FFFFFF;
    padding: 12px 32px;
    border: 1px solid #22222212;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1020;
  }

  .c2 > :first-child {
    margin-right: auto;
  }
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1 c2"
          data-testid="pdp-buttons-loading-skeleton"
        >
          <style>
            
  @keyframes shine {
    from {
      -webkit-mask-position: 150%;
    }
    to {
      -webkit-mask-position: -50%;
    }
  }

          </style>
          <div
            class="_width-_platformweb_10037 _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
            style="animation: shine 1s linear infinite;"
          >
            <div
              class="_background-_platformweb_linear-grad1382090798 _display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _borderTopLeftRadius-t-radius-ro291586453 _borderTopRightRadius-t-radius-ro291586453 _borderBottomRightRadius-t-radius-ro291586453 _borderBottomLeftRadius-t-radius-ro291586453 _height-t-size-spac100347300 _width-5037 c3"
            />
          </div>
          <style>
            
  @keyframes shine {
    from {
      -webkit-mask-position: 150%;
    }
    to {
      -webkit-mask-position: -50%;
    }
  }

          </style>
          <div
            class="_width-_platformweb_10037 _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
            style="animation: shine 1s linear infinite;"
          >
            <div
              class="_background-_platformweb_linear-grad1382090798 _display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _borderTopLeftRadius-t-radius-ro291586453 _borderTopRightRadius-t-radius-ro291586453 _borderBottomRightRadius-t-radius-ro291586453 _borderBottomLeftRadius-t-radius-ro291586453 _height-t-size-spac100347300 _width-5037 c3"
            />
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`PoolDetailsStatsButton renders both buttons correctly 1`] = `
<DocumentFragment>
  .c39 {
  z-index: 1020;
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.60);
  opacity: 0;
  pointer-events: none;
}

.c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: primary;
  border: 0;
  border-radius: 4px;
}

.c25 {
  padding: 16px;
  width: 100%;
  line-height: 24px;
  font-weight: 535;
  text-align: center;
  border-radius: 16px;
  outline: none;
  border: 1px solid transparent;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  will-change: transform;
  -webkit-transition: -webkit-transform 450ms ease;
  -webkit-transition: transform 450ms ease;
  transition: transform 450ms ease;
  -webkit-transform: perspective(1px) translateZ(0);
  -ms-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}

.c25:disabled {
  opacity: 50%;
  cursor: auto;
  pointer-events: none;
}

.c25 > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c25 > a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c26 {
  background-color: #FFFFFF;
  color: #7D7D7D;
  border: 1px solid #22222212;
  font-size: 16px;
  font-weight: 535;
}

.c26:hover {
  background-color: #ececec;
}

.c26:active {
  background-color: #e0e0e0;
}

.c33 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c21 {
  color: #222222;
  pointer-events: auto;
  width: 0;
  position: relative;
  font-weight: 485;
  outline: none;
  border: none;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: transparent;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px;
  -webkit-appearance: textfield;
  text-align: right;
}

.c21::-webkit-search-decoration {
  -webkit-appearance: none;
}

.c21 [type='number'] {
  -moz-appearance: textfield;
}

.c21::-webkit-outer-spin-button,
.c21::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.c21::-webkit-input-placeholder {
  color: #CECECE;
}

.c21::-moz-placeholder {
  color: #CECECE;
}

.c21:-ms-input-placeholder {
  color: #CECECE;
}

.c21::placeholder {
  color: #CECECE;
}

.c22 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
  text-align: left;
  font-size: 36px;
  font-weight: 485;
  max-height: 44px;
}

.c3 {
  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: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c37 {
  display: grid;
  grid-auto-rows: auto;
  grid-row-gap: 4px;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c5 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c7 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c34 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c10 {
  outline: none;
  border: none;
  font-size: inherit;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: opacity,color,background-color;
  transition-property: opacity,color,background-color;
}

.c10:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  position: relative;
  border-radius: 20px;
  z-index: 1;
  width: initial;
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
  will-change: height;
}

.c19 {
  min-height: 44px;
  border-radius: 20px;
  width: initial;
}

.c27 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FFFFFF;
  opacity: 1;
  color: #222222;
  cursor: pointer;
  height: 36px;
  border-radius: 18px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #22222212;
  font-size: 24px;
  font-weight: 485;
  width: initial;
  padding: 4px 8px 4px 4px;
  gap: 8px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 12px;
  box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04);
  visibility: visible;
  -webkit-animation: none;
  animation: none;
}

.c27:hover,
.c27:active {
  background-color: #F9F9F9;
}

.c27:before {
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.c27:hover:before {
  background-color: #98A1C014;
}

.c27:active:before {
  background-color: #B8C0DC3d;
}

.c20 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -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;
  margin-top: 4px;
}

.c31 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #7D7D7D;
  font-size: 0.75rem;
  line-height: 1rem;
}

.c32 {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height: 24px;
  padding: 8px 0px 0px 0px;
}

.c28 {
  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;
  width: 100%;
}

.c30 {
  margin: 0 0.25rem 0 0.35rem;
  height: 35%;
  margin-left: 8px;
}

.c30 path {
  stroke: #222222;
  stroke-width: 2px;
}

.c29 {
  margin: 0 0.25rem 0 0.25rem;
  font-size: 20px;
  font-weight: 535;
}

.c16 {
  height: 24px;
  width: 24px;
}

.c16 > * {
  fill: #7D7D7D;
}

.c14 {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.c14:not([disabled]):hover {
  opacity: 0.7;
}

.c15 {
  padding: 6px 12px;
  border-radius: 16px;
}

.c13 {
  position: relative;
}

.c35 {
  border-radius: 12px;
  height: 40px;
  width: 40px;
  position: relative;
  margin-top: -18px;
  margin-bottom: -18px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F9F9F9;
  border: 4px solid;
  border-color: #FFFFFF;
  z-index: 2;
}

.c35:hover {
  cursor: pointer;
  opacity: 0.8;
}

.c17 {
  background-color: #F9F9F9;
  border-radius: 16px;
  color: #7D7D7D;
  font-size: 14px;
  font-weight: 500;
  height: 120px;
  line-height: 20px;
  padding: 16px;
  position: relative;
}

.c17:before {
  box-sizing: border-box;
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: '';
  border: 1px solid #F9F9F9;
}

.c17:hover:before {
  border-color: #98A1C014;
}

.c17:focus-within:before {
  border-color: #B8C0DC3d;
}

.c38 {
  border-bottom: 1px solid #FFFFFF;
}

.c36 {
  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%;
}

.c11 {
  color: #222222;
  background-color: #22222212;
  padding: 8px 16px;
  border-radius: 20px;
  gap: 4px;
  font-weight: 485;
}

.c11:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c11:active {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c12 {
  color: #7D7D7D;
  padding: 8px 16px;
  border-radius: 20px;
  gap: 4px;
  font-weight: 485;
}

.c12:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c12:active {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c6 {
  margin-bottom: 12px;
  padding-right: 4px;
  color: #7D7D7D;
}

.c8 {
  gap: 0px;
}

.c8 .c9 {
  padding: 8px 12px;
}

.c2 {
  gap: 12px;
  z-index: 1;
}

.c4 {
  z-index: 0;
  gap: 24px;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  -webkit-transition: max-height 250ms ease;
  transition: max-height 250ms ease;
  padding-bottom: 0;
}

.c4 .c24 {
  visibility: hidden;
}

@media only screen and (max-width:1024px) {
  .c39 {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  }
}

@media (hover:hover) and (pointer:fine) {
  .c10:hover {
    opacity: 0.6;
  }
}

@media (max-width:1024px) {
  .c2 {
    gap: 8px;
    position: fixed;
    bottom: 0px;
    left: 0;
    margin: 8px;
    width: calc(100% - 16px);
    background: #FFFFFF;
    padding: 12px 32px;
    border: 1px solid #22222212;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1020;
  }

  .c2 > :first-child {
    margin-right: auto;
  }
}

@media (max-width:1024px) {
  .c4 {
    position: fixed;
    width: calc(100% - 16px);
    padding: 0px 12px 12px;
    border-radius: 24px;
    max-width: 480px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1030;
    background: #FFFFFF;
    -webkit-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
  }
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-gap1602"
        >
          <div
            class="c0 c1 c2"
          >
            <div
              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-center _gap-t-space-spa1360334080 _width-10037"
            >
              <button
                class=" is_Button  t_group_item"
                data-testid="pool-details-swap-button"
                style="display: flex; flex-basis: 0px; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 1; flex-direction: row; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; align-items: center; justify-content: center; background-color: rgb(254, 244, 255); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; cursor: pointer; height: auto; align-self: stretch; flex-grow: 1; outline-color: rgba(0, 0, 0, 0); padding: 12px 16px 12px 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; gap: 8px; border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; transform: scale(1);"
              >
                <svg
                  fill="none"
                  height="100%"
                  stroke-width="8"
                  style="width: 20.7px; height: 20.7px;"
                  viewBox="0 0 16 16"
                  width="100%"
                >
                  <path
                    d="M7.33336 4.00003V14C7.33336 14.2694 7.1714 14.5127 6.92206 14.6161C6.8394 14.6501 6.75269 14.6667 6.66669 14.6667C6.49336 14.6667 6.32267 14.5987 6.19534 14.4714L2.862 11.1381C2.60134 10.8774 2.60134 10.456 2.862 10.1953C3.12267 9.93468 3.54405 9.93468 3.80471 10.1953L6.00002 12.3907V4.00003C6.00002 3.63203 6.29802 3.33337 6.66669 3.33337C7.03536 3.33337 7.33336 3.63203 7.33336 4.00003ZM13.8047 4.86201L10.4714 1.52868C10.2807 1.33801 9.99532 1.28132 9.74465 1.38399C9.49532 1.48732 9.33336 1.7307 9.33336 2.00003V12C9.33336 12.368 9.63136 12.6667 10 12.6667C10.3687 12.6667 10.6667 12.368 10.6667 12V3.60941L12.862 5.80472C13.1227 6.06539 13.544 6.06539 13.8047 5.80472C14.0654 5.54405 14.0654 5.12268 13.8047 4.86201Z"
                    fill="currentColor"
                  />
                </svg>
                <span
                  class="font_button _color-_groupitem-hover_accent1Hove112785 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-nowrap _mt-0px _mr-0px _mb-0px _ml-0px _color-accent1 _fontFamily-f-family _cursor-pointer _maxWidth-10037 _overflowX-hidden _overflowY-hidden _textOverflow-ellipsis _fontSize-f-size-medi3736 _fontWeight-f-weight-me3083741 _lineHeight-f-lineHeigh1262266530"
                >
                  Swap
                </span>
              </button>
              <button
                class=" is_Button  t_group_item"
                data-testid="pool-details-add-liquidity-button"
                style="display: flex; flex-basis: 0px; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 1; flex-direction: row; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; align-items: center; justify-content: center; background-color: rgb(254, 244, 255); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; cursor: pointer; height: auto; align-self: stretch; flex-grow: 1; outline-color: rgba(0, 0, 0, 0); padding: 12px 16px 12px 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; gap: 8px; border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; transform: scale(1);"
              >
                <svg
                  fill="none"
                  height="20.7"
                  stroke="var(--accent1)"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="20.7"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="12"
                    x2="12"
                    y1="5"
                    y2="19"
                  />
                  <line
                    x1="5"
                    x2="19"
                    y1="12"
                    y2="12"
                  />
                </svg>
                <span
                  class="font_button _color-_groupitem-hover_accent1Hove112785 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-nowrap _mt-0px _mr-0px _mb-0px _ml-0px _color-accent1 _fontFamily-f-family _cursor-pointer _maxWidth-10037 _overflowX-hidden _overflowY-hidden _textOverflow-ellipsis _fontSize-f-size-medi3736 _fontWeight-f-weight-me3083741 _lineHeight-f-lineHeigh1262266530"
                >
                  Add liquidity
                </span>
              </button>
            </div>
          </div>
          <div
            class="c3 c4"
            data-testid="pool-details-swap-modal"
          >
            <div
              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _width-10037 _gap-t-space-spa1360334076"
            >
              <div
                id="swap-page"
                style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; position: relative; z-index: 1; border-top-left-radius: rounded24; border-top-right-radius: rounded24; border-bottom-right-radius: rounded24; border-bottom-left-radius: rounded24;"
              >
                <div
                  class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _borderTopLeftRadius-t-radius-ro291586420 _borderTopRightRadius-t-radius-ro291586420 _borderBottomRightRadius-t-radius-ro291586420 _borderBottomLeftRadius-t-radius-ro291586420 _zIndex--1"
                >
                  <div
                    class="c0 c1 c5 c6"
                  >
                    <div
                      class="c0 c1 c7 c8"
                    >
                      <h1
                        class="c9 c10 c11"
                        role="button"
                        tabindex="0"
                      >
                        Swap
                      </h1>
                      <button
                        class="c9 c10 c12"
                      >
                        Limit
                      </button>
                      <button
                        class="c9 c10 c12"
                      >
                        Send
                      </button>
                      <button
                        class="c9 c10 c12"
                      >
                        Buy
                      </button>
                    </div>
                    <div
                      class="c0 c1 c7"
                    >
                      <div
                        class="c13"
                      >
                        <button
                          aria-label="Transaction Settings"
                          class="c14"
                          data-testid="open-settings-dialog-button"
                          id="open-settings-dialog-button"
                        >
                          <div
                            class="c0 c1 c15"
                          >
                            <svg
                              class="c16"
                              fill="none"
                              height="24"
                              viewBox="0 0 24 24"
                              width="24"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
                                fill="currentColor"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div
                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                  >
                    <div
                      class="c17"
                    >
                      <div
                        class="c18"
                        id="swap-currency-input"
                      >
                        <div
                          class="c19"
                        >
                          <span
                            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-smal108 _lineHeight-f-lineHeigh1269072494 _fontWeight-f-weight-bo3548 _userSelect-none"
                            data-disable-theme="true"
                          >
                            Sell
                          </span>
                          <div
                            class="c20"
                          >
                            <div
                              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _flexGrow-1"
                            >
                              <input
                                autocomplete="off"
                                autocorrect="off"
                                class="c21 c22 token-amount-input"
                                id="swap-currency-input"
                                inputmode="decimal"
                                maxlength="79"
                                minlength="1"
                                pattern="^[0-9]*[.,]?[0-9]*$"
                                placeholder="0"
                                spellcheck="false"
                                style="width: 100%;"
                                type="text"
                                value=""
                              />
                            </div>
                            <div
                              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                            >
                              <button
                                class="c23 c24 c25 c26 c27 open-currency-select-button"
                                data-testid="currency-1-USDC"
                              >
                                <span
                                  class="c28"
                                >
                                  <div
                                    class="c0 c1 c7"
                                  >
                                    <div
                                      style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: row; opacity: 0;"
                                    >
                                      <div
                                        class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _height-24px _justifyContent-center _pointerEvents-auto _width-24px _position-relative"
                                        data-testid="token-logo"
                                      >
                                        <div
                                          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _opacity-0 _height-9637 _width-9637 _zIndex-0 _backgroundColor-FFFFFF35 _position-absolute _top-237 _left-237 _borderTopLeftRadius-12px _borderTopRightRadius-12px _borderBottomRightRadius-12px _borderBottomLeftRadius-12px"
                                        />
                                        <div
                                          class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                                          data-testid="img-token-image"
                                        >
                                          <img
                                            height="24"
                                            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                                            style="object-fit: contain; border-radius: 12px; z-index: 1;"
                                            width="24"
                                          />
                                        </div>
                                      </div>
                                      <span
                                        class="c29 token-symbol-container"
                                      >
                                        USDC
                                      </span>
                                    </div>
                                  </div>
                                  <svg
                                    class="c30"
                                  >
                                    dropdown.svg
                                  </svg>
                                </span>
                              </button>
                            </div>
                          </div>
                          <div
                            class="c31 c32"
                          >
                            <div
                              class="c0 c1 c5"
                            >
                              <div
                                class="c33"
                              />
                              <div
                                class="c0 c1 c7"
                                style="height: 16px;"
                              >
                                <div
                                  class="c34 css-142zc9n"
                                  data-testid="balance-text"
                                  style="display: inline;"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <span
                          class="font_unset _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _position-absolute _width-1px _height-1px _mt--1px _mr--1px _mb--1px _ml--1px _zIndex--10000 _overflowX-hidden _overflowY-hidden _opacity-1e-8 _pointerEvents-none"
                        >
                          <h2
                            class="is_DialogTitle font_heading _display-inline _boxSizing-border-box _wordWrap-break-word _userSelect-auto _color-color _whiteSpace-normal _fontFamily-f-family _mt-0px _mr-0px _mb-0px _ml-0px"
                            data-disable-theme="true"
                            id="title-:r3:"
                            role="heading"
                          />
                        </span>
                      </div>
                    </div>
                    <div
                      class="c35"
                    >
                      <div
                        class="c36"
                        color="#222222"
                        data-testid="swap-currency-button"
                      >
                        <svg
                          fill="none"
                          height="16"
                          stroke="#222222"
                          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>
                  <div
                    class="c37"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="c17 c38"
                      >
                        <div
                          class="c18"
                          id="swap-currency-output"
                        >
                          <div
                            class="c19"
                          >
                            <span
                              class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-smal108 _lineHeight-f-lineHeigh1269072494 _fontWeight-f-weight-bo3548 _userSelect-none"
                              data-disable-theme="true"
                            >
                              Buy
                            </span>
                            <div
                              class="c20"
                            >
                              <div
                                class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _flexGrow-1"
                              >
                                <input
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="c21 c22 token-amount-input"
                                  id="swap-currency-output"
                                  inputmode="decimal"
                                  maxlength="79"
                                  minlength="1"
                                  pattern="^[0-9]*[.,]?[0-9]*$"
                                  placeholder="0"
                                  spellcheck="false"
                                  style="width: 100%;"
                                  type="text"
                                  value=""
                                />
                              </div>
                              <div
                                class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                              >
                                <button
                                  class="c23 c24 c25 c26 c27 open-currency-select-button"
                                  data-testid="currency-1-WETH"
                                >
                                  <span
                                    class="c28"
                                  >
                                    <div
                                      class="c0 c1 c7"
                                    >
                                      <div
                                        style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: row; opacity: 0;"
                                      >
                                        <div
                                          class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _height-24px _justifyContent-center _pointerEvents-auto _width-24px _position-relative"
                                          data-testid="token-logo"
                                        >
                                          <div
                                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _opacity-0 _height-9637 _width-9637 _zIndex-0 _backgroundColor-FFFFFF35 _position-absolute _top-237 _left-237 _borderTopLeftRadius-12px _borderTopRightRadius-12px _borderBottomRightRadius-12px _borderBottomLeftRadius-12px"
                                          />
                                          <div
                                            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                                            data-testid="img-token-image"
                                          >
                                            <img
                                              height="24"
                                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
                                              style="object-fit: contain; border-radius: 12px; z-index: 1;"
                                              width="24"
                                            />
                                          </div>
                                        </div>
                                        <span
                                          class="c29 token-symbol-container"
                                        >
                                          WETH
                                        </span>
                                      </div>
                                    </div>
                                    <svg
                                      class="c30"
                                    >
                                      dropdown.svg
                                    </svg>
                                  </span>
                                </button>
                              </div>
                            </div>
                            <div
                              class="c31 c32"
                            >
                              <div
                                class="c0 c1 c5"
                              >
                                <div
                                  class="c33"
                                />
                                <div
                                  class="c0 c1 c7"
                                  style="height: 16px;"
                                >
                                  <div
                                    class="c34 css-142zc9n"
                                    data-testid="balance-text"
                                    style="display: inline;"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                          <span
                            class="font_unset _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _position-absolute _width-1px _height-1px _mt--1px _mr--1px _mb--1px _ml--1px _zIndex--10000 _overflowX-hidden _overflowY-hidden _opacity-1e-8 _pointerEvents-none"
                          >
                            <h2
                              class="is_DialogTitle font_heading _display-inline _boxSizing-border-box _wordWrap-break-word _userSelect-auto _color-color _whiteSpace-normal _fontFamily-f-family _mt-0px _mr-0px _mb-0px _ml-0px"
                              data-disable-theme="true"
                              id="title-:r9:"
                              role="heading"
                            />
                          </span>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column"
                    >
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row"
                      >
                        <button
                          class=" is_Button  t_group_item"
                          data-testid="swap-button"
                          id="swap-button"
                          style="display: flex; flex-basis: 0px; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 1; flex-direction: row; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; align-items: center; justify-content: center; background-color: rgb(249, 249, 249); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; cursor: pointer; height: auto; align-self: stretch; flex-grow: 1; padding: 12px 16px 12px 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; gap: 8px; pointer-events: none; user-select: none; border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid;"
                        >
                          <span
                            class="font_button _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-nowrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _cursor-pointer _maxWidth-10037 _overflowX-hidden _overflowY-hidden _textOverflow-ellipsis _fontSize-f-size-medi3736 _fontWeight-f-weight-me3083741 _lineHeight-f-lineHeigh1262266530"
                          >
                            <span
                              class="font_button _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-nowrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _cursor-pointer _maxWidth-10037 _overflowX-hidden _overflowY-hidden _textOverflow-ellipsis _fontSize-f-size-medi3736 _fontWeight-f-weight-me3083741 _lineHeight-f-lineHeigh1262266530"
                            >
                              Connecting wallet...
                            </span>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="c39"
          />
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;
