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

exports[`ConfirmSwapModal/Error renders "classic trade" correctly, with error= 0 1`] = `
<DocumentFragment>
  .c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c13 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.c6 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c12 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

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

.c14 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c14:active .c16 {
  background-color: #B8C0DC3d;
}

.c14:focus .c16 {
  background-color: #B8C0DC3d;
}

.c14:hover .c16 {
  background-color: #98A1C014;
}

.c14:disabled {
  cursor: default;
  opacity: 0.6;
}

.c14:disabled:active .c16,
.c14:disabled:focus .c16,
.c14:disabled:hover .c16 {
  background-color: transparent;
}

.c0 {
  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;
  gap: 24px;
}

.c2 {
  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;
  gap: 16px;
}

.c5 {
  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;
  gap: 8px;
}

.c1 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c7 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  border-radius: 12px;
}

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

.c4 path {
  background: #7D7D7D;
  fill: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1"
        >
          <div
            class="c2 c1"
          >
            <div
              class="c3"
            >
              <svg
                class="c4"
                data-testid="pending-modal-failure-icon"
                fill="#7D7D7D"
                viewBox="0 0 28 28"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
                  fill="#9b9b9b"
                />
              </svg>
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c6 c7 css-4kpdx7"
              >
                Token approval failed
              </div>
              <div
                class="c8 c9 css-1urox24"
              >
                This provides the Uniswap protocol access to your token for trading. For security, it expires after 30 days.
              </div>
              <div
                class="c5 c1"
              >
                <div
                  class="c10 c11"
                >
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 ABC
                  </div>
                  <svg
                    fill="none"
                    height="12px"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="12px"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="5"
                      x2="19"
                      y1="12"
                      y2="12"
                    />
                    <polyline
                      points="12 5 19 12 12 19"
                    />
                  </svg>
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 DEF
                  </div>
                </div>
                <a
                  class="c12"
                  href="https://support.uniswap.org/hc/en-us/articles/8120520483085-What-is-an-approval-transaction"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c10 c13"
          >
            <button
              class="c14 c15"
            >
              <div
                class="c16 c17"
              />
              Try again
            </button>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`ConfirmSwapModal/Error renders "classic trade" correctly, with error= 1 1`] = `
<DocumentFragment>
  .c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c13 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.c6 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c12 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

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

.c14 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c14:active .c16 {
  background-color: #B8C0DC3d;
}

.c14:focus .c16 {
  background-color: #B8C0DC3d;
}

.c14:hover .c16 {
  background-color: #98A1C014;
}

.c14:disabled {
  cursor: default;
  opacity: 0.6;
}

.c14:disabled:active .c16,
.c14:disabled:focus .c16,
.c14:disabled:hover .c16 {
  background-color: transparent;
}

.c0 {
  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;
  gap: 24px;
}

.c2 {
  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;
  gap: 16px;
}

.c5 {
  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;
  gap: 8px;
}

.c1 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c7 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  border-radius: 12px;
}

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

.c4 path {
  background: #7D7D7D;
  fill: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1"
        >
          <div
            class="c2 c1"
          >
            <div
              class="c3"
            >
              <svg
                class="c4"
                data-testid="pending-modal-failure-icon"
                fill="#7D7D7D"
                viewBox="0 0 28 28"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
                  fill="#9b9b9b"
                />
              </svg>
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c6 c7 css-4kpdx7"
              >
                Permit approval failed
              </div>
              <div
                class="c8 c9 css-1urox24"
              >
                Permit2 allows token approvals to be shared and managed across different applications.
              </div>
              <div
                class="c5 c1"
              >
                <div
                  class="c10 c11"
                >
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 ABC
                  </div>
                  <svg
                    fill="none"
                    height="12px"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="12px"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="5"
                      x2="19"
                      y1="12"
                      y2="12"
                    />
                    <polyline
                      points="12 5 19 12 12 19"
                    />
                  </svg>
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 DEF
                  </div>
                </div>
                <a
                  class="c12"
                  href="https://support.uniswap.org/hc/en-us/articles/8120520483085-What-is-an-approval-transaction"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c10 c13"
          >
            <button
              class="c14 c15"
            >
              <div
                class="c16 c17"
              />
              Try again
            </button>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`ConfirmSwapModal/Error renders "classic trade" correctly, with error= 3 1`] = `
<DocumentFragment>
  .c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c13 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.c6 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c12 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

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

.c14 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c14:active .c16 {
  background-color: #B8C0DC3d;
}

.c14:focus .c16 {
  background-color: #B8C0DC3d;
}

.c14:hover .c16 {
  background-color: #98A1C014;
}

.c14:disabled {
  cursor: default;
  opacity: 0.6;
}

.c14:disabled:active .c16,
.c14:disabled:focus .c16,
.c14:disabled:hover .c16 {
  background-color: transparent;
}

.c0 {
  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;
  gap: 24px;
}

.c2 {
  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;
  gap: 16px;
}

.c5 {
  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;
  gap: 8px;
}

.c1 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c7 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  border-radius: 12px;
}

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

.c4 path {
  background: #7D7D7D;
  fill: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1"
        >
          <div
            class="c2 c1"
          >
            <div
              class="c3"
            >
              <svg
                class="c4"
                data-testid="pending-modal-failure-icon"
                fill="#7D7D7D"
                viewBox="0 0 28 28"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
                  fill="#9b9b9b"
                />
              </svg>
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c6 c7 css-4kpdx7"
              >
                Swap failed
              </div>
              <div
                class="c8 c9 css-1urox24"
              >
                Try adjusting slippage to a higher value.
              </div>
              <div
                class="c5 c1"
              >
                <div
                  class="c10 c11"
                >
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 ABC
                  </div>
                  <svg
                    fill="none"
                    height="12px"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="12px"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="5"
                      x2="19"
                      y1="12"
                      y2="12"
                    />
                    <polyline
                      points="12 5 19 12 12 19"
                    />
                  </svg>
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 DEF
                  </div>
                </div>
                <a
                  class="c12"
                  href="https://support.uniswap.org/hc/en-us/articles/8643975058829-Why-did-my-transaction-fail-"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c10 c13"
          >
            <button
              class="c14 c15"
            >
              <div
                class="c16 c17"
              />
              Try again
            </button>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`ConfirmSwapModal/Error renders "classic trade" correctly, with error= 4 1`] = `
<DocumentFragment>
  .c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c13 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.c6 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c12 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

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

.c14 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c14:active .c16 {
  background-color: #B8C0DC3d;
}

.c14:focus .c16 {
  background-color: #B8C0DC3d;
}

.c14:hover .c16 {
  background-color: #98A1C014;
}

.c14:disabled {
  cursor: default;
  opacity: 0.6;
}

.c14:disabled:active .c16,
.c14:disabled:focus .c16,
.c14:disabled:hover .c16 {
  background-color: transparent;
}

.c0 {
  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;
  gap: 24px;
}

.c2 {
  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;
  gap: 16px;
}

.c5 {
  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;
  gap: 8px;
}

.c1 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c7 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  border-radius: 12px;
}

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

.c4 path {
  background: #7D7D7D;
  fill: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1"
        >
          <div
            class="c2 c1"
          >
            <div
              class="c3"
            >
              <svg
                class="c4"
                data-testid="pending-modal-failure-icon"
                fill="#7D7D7D"
                viewBox="0 0 28 28"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
                  fill="#9b9b9b"
                />
              </svg>
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c6 c7 css-4kpdx7"
              >
                Wrap failed
              </div>
              <div
                class="c8 c9 css-1urox24"
              >
                Swaps on the Uniswap Protocol can start and end with ETH. However, during the swap, ETH is wrapped into WETH.
              </div>
              <div
                class="c5 c1"
              >
                <div
                  class="c10 c11"
                >
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 ABC
                  </div>
                  <svg
                    fill="none"
                    height="12px"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="12px"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="5"
                      x2="19"
                      y1="12"
                      y2="12"
                    />
                    <polyline
                      points="12 5 19 12 12 19"
                    />
                  </svg>
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 DEF
                  </div>
                </div>
                <a
                  class="c12"
                  href="https://support.uniswap.org/hc/en-us/articles/16015852009997-Why-do-ETH-swaps-involve-converting-to-WETH"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c10 c13"
          >
            <button
              class="c14 c15"
            >
              <div
                class="c16 c17"
              />
              Try again
            </button>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`ConfirmSwapModal/Error renders "limit order" correctly, with error= 3 1`] = `
<DocumentFragment>
  .c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c13 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.c6 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c12 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

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

.c14 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c14:active .c16 {
  background-color: #B8C0DC3d;
}

.c14:focus .c16 {
  background-color: #B8C0DC3d;
}

.c14:hover .c16 {
  background-color: #98A1C014;
}

.c14:disabled {
  cursor: default;
  opacity: 0.6;
}

.c14:disabled:active .c16,
.c14:disabled:focus .c16,
.c14:disabled:hover .c16 {
  background-color: transparent;
}

.c0 {
  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;
  gap: 24px;
}

.c2 {
  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;
  gap: 16px;
}

.c5 {
  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;
  gap: 8px;
}

.c1 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c7 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  border-radius: 12px;
}

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

.c4 path {
  background: #7D7D7D;
  fill: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1"
        >
          <div
            class="c2 c1"
          >
            <div
              class="c3"
            >
              <svg
                class="c4"
                data-testid="pending-modal-failure-icon"
                fill="#7D7D7D"
                viewBox="0 0 28 28"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
                  fill="#9b9b9b"
                />
              </svg>
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c6 c7 css-4kpdx7"
              >
                Limit failed
              </div>
              <div
                class="c8 c9 css-1urox24"
              />
              <div
                class="c5 c1"
              >
                <div
                  class="c10 c11"
                >
                  <div
                    class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _height-16px _justifyContent-center _pointerEvents-auto _width-16px _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-8px _borderTopRightRadius-8px _borderBottomRightRadius-8px _borderBottomLeftRadius-8px"
                    />
                    <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="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                        style="object-fit: contain; border-radius: 8px; z-index: 1;"
                        width="16"
                      />
                    </div>
                  </div>
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 DAI
                  </div>
                  <svg
                    fill="none"
                    height="12px"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="12px"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="5"
                      x2="19"
                      y1="12"
                      y2="12"
                    />
                    <polyline
                      points="12 5 19 12 12 19"
                    />
                  </svg>
                  <div
                    class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _height-16px _justifyContent-center _pointerEvents-auto _width-16px _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-8px _borderTopRightRadius-8px _borderBottomRightRadius-8px _borderBottomLeftRadius-8px"
                    />
                    <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="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                        style="object-fit: contain; border-radius: 8px; z-index: 1;"
                        width="16"
                      />
                    </div>
                  </div>
                  <div
                    class="c6 css-142zc9n"
                  >
                    0.0001 USDC
                  </div>
                </div>
                <a
                  class="c12"
                  href="https://support.uniswap.org/hc/en-us/articles/24300813697933-Why-did-my-limit-order-fail-or-not-execute"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c10 c13"
          >
            <button
              class="c14 c15"
            >
              <div
                class="c16 c17"
              />
              Try again
            </button>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`ConfirmSwapModal/Error renders "limit order" correctly, with error= 4 1`] = `
<DocumentFragment>
  .c10 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c11 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.c13 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.c6 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c8 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c12 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

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

.c14 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c14:active .c16 {
  background-color: #B8C0DC3d;
}

.c14:focus .c16 {
  background-color: #B8C0DC3d;
}

.c14:hover .c16 {
  background-color: #98A1C014;
}

.c14:disabled {
  cursor: default;
  opacity: 0.6;
}

.c14:disabled:active .c16,
.c14:disabled:focus .c16,
.c14:disabled:hover .c16 {
  background-color: transparent;
}

.c0 {
  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;
  gap: 24px;
}

.c2 {
  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;
  gap: 16px;
}

.c5 {
  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;
  gap: 8px;
}

.c1 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c7 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  border-radius: 12px;
}

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

.c4 path {
  background: #7D7D7D;
  fill: #7D7D7D;
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1"
        >
          <div
            class="c2 c1"
          >
            <div
              class="c3"
            >
              <svg
                class="c4"
                data-testid="pending-modal-failure-icon"
                fill="#7D7D7D"
                viewBox="0 0 28 28"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
                  fill="#9b9b9b"
                />
              </svg>
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c6 c7 css-4kpdx7"
              >
                Wrap failed
              </div>
              <div
                class="c8 c9 css-1urox24"
              >
                Swaps on the Uniswap Protocol can start and end with ETH. However, during the swap, ETH is wrapped into WETH.
              </div>
              <div
                class="c5 c1"
              >
                <div
                  class="c10 c11"
                >
                  <div
                    class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _height-16px _justifyContent-center _pointerEvents-auto _width-16px _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-8px _borderTopRightRadius-8px _borderBottomRightRadius-8px _borderBottomLeftRadius-8px"
                    />
                    <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="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                        style="object-fit: contain; border-radius: 8px; z-index: 1;"
                        width="16"
                      />
                    </div>
                  </div>
                  <div
                    class="c6 css-142zc9n"
                  >
                    &lt;0.00001 DAI
                  </div>
                  <svg
                    fill="none"
                    height="12px"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="12px"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="5"
                      x2="19"
                      y1="12"
                      y2="12"
                    />
                    <polyline
                      points="12 5 19 12 12 19"
                    />
                  </svg>
                  <div
                    class="_display-flex _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _height-16px _justifyContent-center _pointerEvents-auto _width-16px _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-8px _borderTopRightRadius-8px _borderBottomRightRadius-8px _borderBottomLeftRadius-8px"
                    />
                    <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="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                        style="object-fit: contain; border-radius: 8px; z-index: 1;"
                        width="16"
                      />
                    </div>
                  </div>
                  <div
                    class="c6 css-142zc9n"
                  >
                    0.0001 USDC
                  </div>
                </div>
                <a
                  class="c12"
                  href="https://support.uniswap.org/hc/en-us/articles/16015852009997-Why-do-ETH-swaps-involve-converting-to-WETH"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
          </div>
          <div
            class="c10 c13"
          >
            <button
              class="c14 c15"
            >
              <div
                class="c16 c17"
              />
              Try again
            </button>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</DocumentFragment>
`;
