// 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;
}

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

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

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

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

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

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

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

.c13 {
  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 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

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

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

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

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

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

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

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

<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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="c6 css-142zc9n"
                >
                  &lt;0.00001 DEF
                </div>
              </div>
              <a
                class="c16"
                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 c17"
        >
          <button
            class="c18 c19"
          >
            <div
              class="c20 c21"
            />
            Try again
          </button>
        </div>
      </div>
    </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;
}

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

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

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

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

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

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

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

.c13 {
  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 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

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

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

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

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

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

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

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

<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"
            >
              permit.approval.fail.message
            </div>
            <div
              class="c5 c1"
            >
              <div
                class="c10 c11"
              >
                <div
                  class="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="c6 css-142zc9n"
                >
                  &lt;0.00001 DEF
                </div>
              </div>
              <a
                class="c16"
                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 c17"
        >
          <button
            class="c18 c19"
          >
            <div
              class="c20 c21"
            />
            Try again
          </button>
        </div>
      </div>
    </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;
}

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

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

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

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

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

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

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

.c13 {
  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 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

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

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

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

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

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

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

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

<span
    class="t_light is_inversed _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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="c6 css-142zc9n"
                >
                  &lt;0.00001 DEF
                </div>
              </div>
              <a
                class="c16"
                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 c17"
        >
          <button
            class="c18 c19"
          >
            <div
              class="c20 c21"
            />
            Try again
          </button>
        </div>
      </div>
    </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;
}

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

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

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

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

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

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

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

.c13 {
  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 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

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

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

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

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

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

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

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

<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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="c6 css-142zc9n"
                >
                  &lt;0.00001 DEF
                </div>
              </div>
              <a
                class="c16"
                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 c17"
        >
          <button
            class="c18 c19"
          >
            <div
              class="c20 c21"
            />
            Try again
          </button>
        </div>
      </div>
    </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;
}

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

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

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

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

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

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

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

.c13 {
  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 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

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

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

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

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

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

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

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

<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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                      />
                    </div>
                  </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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="c6 css-142zc9n"
                >
                  0.0001 USDC
                </div>
              </div>
              <a
                class="c16"
                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 c17"
        >
          <button
            class="c18 c19"
          >
            <div
              class="c20 c21"
            />
            Try again
          </button>
        </div>
      </div>
    </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;
}

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

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

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

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

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

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

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

.c13 {
  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 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

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

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

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

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

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

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

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

<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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                      />
                    </div>
                  </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="c12"
                  style="height: 16px; width: 16px;"
                >
                  <div
                    class="c13"
                  >
                    <div
                      class="c14"
                      size="16"
                    >
                       
                      <img
                        class="c15"
                        size="16"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="c6 css-142zc9n"
                >
                  0.0001 USDC
                </div>
              </div>
              <a
                class="c16"
                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 c17"
        >
          <button
            class="c18 c19"
          >
            <div
              class="c20 c21"
            />
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;
