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

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

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

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

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

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.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: 12px;
}

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

.c11 {
  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;
  position: relative;
  top: 0;
  left: 0;
}

.c12 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.c10 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c15 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FC72FF;
  border-radius: 16px;
  border: 0;
  color: #FFFFFF;
  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;
}

.c15:active .c17 {
  background-color: #B8C0DC3d;
}

.c15:focus .c17 {
  background-color: #B8C0DC3d;
}

.c15:hover .c17 {
  background-color: #98A1C014;
}

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

.c15:disabled:active .c17,
.c15:disabled:focus .c17,
.c15:disabled:hover .c17 {
  background-color: transparent;
}

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

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

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

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

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

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

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1"
      >
        <div
          class="c2"
        >
          <svg
            class="c3"
            data-testid="pending-modal-failure-icon"
            fill="#7D7D7D"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z"
            />
          </svg>
        </div>
        <div
          class="c4 c5 css-4kpdx7"
        >
          Token approval failed
        </div>
        <div
          class="c6 c7 css-1urox24"
        >
          This provides the Uniswap protocol access to your token for trading. For security, it expires after 30 days.
        </div>
        <div
          class="c0 c1"
        >
          <div
            class="c8 c9"
          >
            <div
              class="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 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="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 css-142zc9n"
            >
              &lt;0.00001 DEF
            </div>
          </div>
          <a
            class="c13"
            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
        class="c8 c14"
      >
        <button
          class="c15 c16"
        >
          <div
            class="c17 c18"
          />
          Try again
        </button>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.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: 12px;
}

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

.c11 {
  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;
  position: relative;
  top: 0;
  left: 0;
}

.c12 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.c10 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c15 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FC72FF;
  border-radius: 16px;
  border: 0;
  color: #FFFFFF;
  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;
}

.c15:active .c17 {
  background-color: #B8C0DC3d;
}

.c15:focus .c17 {
  background-color: #B8C0DC3d;
}

.c15:hover .c17 {
  background-color: #98A1C014;
}

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

.c15:disabled:active .c17,
.c15:disabled:focus .c17,
.c15:disabled:hover .c17 {
  background-color: transparent;
}

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

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

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

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

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

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

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1"
      >
        <div
          class="c2"
        >
          <svg
            class="c3"
            data-testid="pending-modal-failure-icon"
            fill="#7D7D7D"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z"
            />
          </svg>
        </div>
        <div
          class="c4 c5 css-4kpdx7"
        >
          Permit approval failed
        </div>
        <div
          class="c6 c7 css-1urox24"
        >
          Permit2 allows token approvals to be shared and managed across different applications.
        </div>
        <div
          class="c0 c1"
        >
          <div
            class="c8 c9"
          >
            <div
              class="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 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="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 css-142zc9n"
            >
              &lt;0.00001 DEF
            </div>
          </div>
          <a
            class="c13"
            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
        class="c8 c14"
      >
        <button
          class="c15 c16"
        >
          <div
            class="c17 c18"
          />
          Try again
        </button>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.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: 12px;
}

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

.c11 {
  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;
  position: relative;
  top: 0;
  left: 0;
}

.c12 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.c10 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c15 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FC72FF;
  border-radius: 16px;
  border: 0;
  color: #FFFFFF;
  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;
}

.c15:active .c17 {
  background-color: #B8C0DC3d;
}

.c15:focus .c17 {
  background-color: #B8C0DC3d;
}

.c15:hover .c17 {
  background-color: #98A1C014;
}

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

.c15:disabled:active .c17,
.c15:disabled:focus .c17,
.c15:disabled:hover .c17 {
  background-color: transparent;
}

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

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

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

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

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

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

<span
    class="t_light is_inversed _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1"
      >
        <div
          class="c2"
        >
          <svg
            class="c3"
            data-testid="pending-modal-failure-icon"
            fill="#7D7D7D"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z"
            />
          </svg>
        </div>
        <div
          class="c4 c5 css-4kpdx7"
        >
          Swap failed
        </div>
        <div
          class="c6 c7 css-1urox24"
        >
          Try adjusting slippage to a higher value.
        </div>
        <div
          class="c0 c1"
        >
          <div
            class="c8 c9"
          >
            <div
              class="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 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="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 css-142zc9n"
            >
              &lt;0.00001 DEF
            </div>
          </div>
          <a
            class="c13"
            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
        class="c8 c14"
      >
        <button
          class="c15 c16"
        >
          <div
            class="c17 c18"
          />
          Try again
        </button>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.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: 12px;
}

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

.c11 {
  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;
  position: relative;
  top: 0;
  left: 0;
}

.c12 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.c10 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c15 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FC72FF;
  border-radius: 16px;
  border: 0;
  color: #FFFFFF;
  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;
}

.c15:active .c17 {
  background-color: #B8C0DC3d;
}

.c15:focus .c17 {
  background-color: #B8C0DC3d;
}

.c15:hover .c17 {
  background-color: #98A1C014;
}

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

.c15:disabled:active .c17,
.c15:disabled:focus .c17,
.c15:disabled:hover .c17 {
  background-color: transparent;
}

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

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

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

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

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

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

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1"
      >
        <div
          class="c2"
        >
          <svg
            class="c3"
            data-testid="pending-modal-failure-icon"
            fill="#7D7D7D"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z"
            />
          </svg>
        </div>
        <div
          class="c4 c5 css-4kpdx7"
        >
          Wrap failed
        </div>
        <div
          class="c6 c7 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="c0 c1"
        >
          <div
            class="c8 c9"
          >
            <div
              class="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 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="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 css-142zc9n"
            >
              &lt;0.00001 DEF
            </div>
          </div>
          <a
            class="c13"
            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
        class="c8 c14"
      >
        <button
          class="c15 c16"
        >
          <div
            class="c17 c18"
          />
          Try again
        </button>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.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: 12px;
}

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

.c11 {
  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;
  position: relative;
  top: 0;
  left: 0;
}

.c12 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.c10 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c15 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FC72FF;
  border-radius: 16px;
  border: 0;
  color: #FFFFFF;
  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;
}

.c15:active .c17 {
  background-color: #B8C0DC3d;
}

.c15:focus .c17 {
  background-color: #B8C0DC3d;
}

.c15:hover .c17 {
  background-color: #98A1C014;
}

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

.c15:disabled:active .c17,
.c15:disabled:focus .c17,
.c15:disabled:hover .c17 {
  background-color: transparent;
}

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

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

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

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

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

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

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1"
      >
        <div
          class="c2"
        >
          <svg
            class="c3"
            data-testid="pending-modal-failure-icon"
            fill="#7D7D7D"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z"
            />
          </svg>
        </div>
        <div
          class="c4 c5 css-4kpdx7"
        >
          Limit failed
        </div>
        <div
          class="c6 c7 css-1urox24"
        />
        <div
          class="c0 c1"
        >
          <div
            class="c8 c9"
          >
            <div
              class="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 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="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 css-142zc9n"
            >
              0.0001 USDC
            </div>
          </div>
          <a
            class="c13"
            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
        class="c8 c14"
      >
        <button
          class="c15 c16"
        >
          <div
            class="c17 c18"
          />
          Try again
        </button>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

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

.c13:hover {
  opacity: 0.6;
}

.c13:active {
  opacity: 0.4;
}

.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: 12px;
}

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

.c11 {
  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;
  position: relative;
  top: 0;
  left: 0;
}

.c12 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.c10 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c15 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FC72FF;
  border-radius: 16px;
  border: 0;
  color: #FFFFFF;
  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;
}

.c15:active .c17 {
  background-color: #B8C0DC3d;
}

.c15:focus .c17 {
  background-color: #B8C0DC3d;
}

.c15:hover .c17 {
  background-color: #98A1C014;
}

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

.c15:disabled:active .c17,
.c15:disabled:focus .c17,
.c15:disabled:hover .c17 {
  background-color: transparent;
}

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

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

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

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

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

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

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1"
      >
        <div
          class="c2"
        >
          <svg
            class="c3"
            data-testid="pending-modal-failure-icon"
            fill="#7D7D7D"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2a1 1 0 0 1 0-2z"
            />
          </svg>
        </div>
        <div
          class="c4 c5 css-4kpdx7"
        >
          Wrap failed
        </div>
        <div
          class="c6 c7 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="c0 c1"
        >
          <div
            class="c8 c9"
          >
            <div
              class="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 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="c10"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c11"
              >
                <img
                  class="c12"
                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                />
              </div>
            </div>
            <div
              class="c4 css-142zc9n"
            >
              0.0001 USDC
            </div>
          </div>
          <a
            class="c13"
            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
        class="c8 c14"
      >
        <button
          class="c15 c16"
        >
          <div
            class="c17 c18"
          />
          Try again
        </button>
      </div>
    </span>
  </span>
</DocumentFragment>
`;
