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

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

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

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

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

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

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

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

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

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

.c14 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c14:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c14:hover {
  background-color: #fb58ff;
}

.c14:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c14:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

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

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

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

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

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

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

.c2 {
  margin: 8px 0px;
}

.c3 {
  padding: 8px 16px;
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1 c2"
      >
        <div
          class="c0 c1 c3"
        >
          <svg
            data-testid="pending-modal-failure-icon"
            fill="#FF5F52"
            height="64px"
            stroke="#FFFFFF"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1"
            viewBox="0 0 24 24"
            width="64px"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
            />
            <line
              x1="12"
              x2="12"
              y1="9"
              y2="13"
            />
            <line
              x1="12"
              x2="12.01"
              y1="17"
              y2="17"
            />
          </svg>
          <div
            class="c4 css-n8z49y"
          >
            Token approval failed
          </div>
          <div
            class="c5 c6"
          >
            <div
              class="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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>
          <div
            class="c4 css-1urox24"
          >
            This provides the Uniswap protocol access to your token for trading. For security, it expires after 30 days. 
            <a
              class="c10"
              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="c11 c1 c3"
        >
          <button
            class="c12 c13 c14"
          >
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

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

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

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

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

.c14 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c14:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c14:hover {
  background-color: #fb58ff;
}

.c14:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c14:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

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

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

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

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

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

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

.c2 {
  margin: 8px 0px;
}

.c3 {
  padding: 8px 16px;
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1 c2"
      >
        <div
          class="c0 c1 c3"
        >
          <svg
            data-testid="pending-modal-failure-icon"
            fill="#FF5F52"
            height="64px"
            stroke="#FFFFFF"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1"
            viewBox="0 0 24 24"
            width="64px"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
            />
            <line
              x1="12"
              x2="12"
              y1="9"
              y2="13"
            />
            <line
              x1="12"
              x2="12.01"
              y1="17"
              y2="17"
            />
          </svg>
          <div
            class="c4 css-n8z49y"
          >
            Permit approval failed
          </div>
          <div
            class="c5 c6"
          >
            <div
              class="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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>
          <div
            class="c4 css-1urox24"
          >
            Permit2 allows token approvals to be shared and managed across different applications. 
            <a
              class="c10"
              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="c11 c1 c3"
        >
          <button
            class="c12 c13 c14"
          >
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

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

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

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

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

.c14 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c14:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c14:hover {
  background-color: #fb58ff;
}

.c14:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c14:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

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

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

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

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

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

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

.c2 {
  margin: 8px 0px;
}

.c3 {
  padding: 8px 16px;
}

<span
    class="t_light is_inversed _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1 c2"
      >
        <div
          class="c0 c1 c3"
        >
          <svg
            data-testid="pending-modal-failure-icon"
            fill="#FF5F52"
            height="64px"
            stroke="#FFFFFF"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1"
            viewBox="0 0 24 24"
            width="64px"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
            />
            <line
              x1="12"
              x2="12"
              y1="9"
              y2="13"
            />
            <line
              x1="12"
              x2="12.01"
              y1="17"
              y2="17"
            />
          </svg>
          <div
            class="c4 css-n8z49y"
          >
            Swap failed
          </div>
          <div
            class="c5 c6"
          >
            <div
              class="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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>
          <div
            class="c4 css-1urox24"
          >
            Try using higher than normal slippage and gas to ensure your transaction is completed. 
            <a
              class="c10"
              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="c11 c1 c3"
        >
          <button
            class="c12 c13 c14"
          >
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

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

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

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

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

.c14 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c14:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c14:hover {
  background-color: #fb58ff;
}

.c14:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c14:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

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

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

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

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

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

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

.c2 {
  margin: 8px 0px;
}

.c3 {
  padding: 8px 16px;
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1 c2"
      >
        <div
          class="c0 c1 c3"
        >
          <svg
            data-testid="pending-modal-failure-icon"
            fill="#FF5F52"
            height="64px"
            stroke="#FFFFFF"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1"
            viewBox="0 0 24 24"
            width="64px"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
            />
            <line
              x1="12"
              x2="12"
              y1="9"
              y2="13"
            />
            <line
              x1="12"
              x2="12.01"
              y1="17"
              y2="17"
            />
          </svg>
          <div
            class="c4 css-n8z49y"
          >
            Wrap failed
          </div>
          <div
            class="c5 c6"
          >
            <div
              class="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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>
          <div
            class="c4 css-1urox24"
          >
            Swaps on the Uniswap Protocol can start and end with ETH. However, during the swap ETH is wrapped into WETH. 
            <a
              class="c10"
              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="c11 c1 c3"
        >
          <button
            class="c12 c13 c14"
          >
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

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

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

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

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

.c14 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c14:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c14:hover {
  background-color: #fb58ff;
}

.c14:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c14:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

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

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

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

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

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

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

.c2 {
  margin: 8px 0px;
}

.c3 {
  padding: 8px 16px;
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1 c2"
      >
        <div
          class="c0 c1 c3"
        >
          <svg
            data-testid="pending-modal-failure-icon"
            fill="#FF5F52"
            height="64px"
            stroke="#FFFFFF"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1"
            viewBox="0 0 24 24"
            width="64px"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
            />
            <line
              x1="12"
              x2="12"
              y1="9"
              y2="13"
            />
            <line
              x1="12"
              x2="12.01"
              y1="17"
              y2="17"
            />
          </svg>
          <div
            class="c4 css-n8z49y"
          >
            Limit failed
          </div>
          <div
            class="c5 c6"
          >
            <div
              class="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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>
          <div
            class="c4 css-1urox24"
          >
             
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/17515489874189-Why-can-my-swap-not-be-filled-"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 c1 c3"
        >
          <button
            class="c12 c13 c14"
          >
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

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

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

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

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

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

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

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

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

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

.c14 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c14:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c14:hover {
  background-color: #fb58ff;
}

.c14:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c14:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

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

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

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

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

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

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

.c2 {
  margin: 8px 0px;
}

.c3 {
  padding: 8px 16px;
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0 c1 c2"
      >
        <div
          class="c0 c1 c3"
        >
          <svg
            data-testid="pending-modal-failure-icon"
            fill="#FF5F52"
            height="64px"
            stroke="#FFFFFF"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1"
            viewBox="0 0 24 24"
            width="64px"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
            />
            <line
              x1="12"
              x2="12"
              y1="9"
              y2="13"
            />
            <line
              x1="12"
              x2="12.01"
              y1="17"
              y2="17"
            />
          </svg>
          <div
            class="c4 css-n8z49y"
          >
            Wrap failed
          </div>
          <div
            class="c5 c6"
          >
            <div
              class="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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="c7"
              style="height: 16px; width: 16px;"
            >
              <div
                class="c8"
              >
                <img
                  class="c9"
                  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>
          <div
            class="c4 css-1urox24"
          >
            Swaps on the Uniswap Protocol can start and end with ETH. However, during the swap ETH is wrapped into WETH. 
            <a
              class="c10"
              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="c11 c1 c3"
        >
          <button
            class="c12 c13 c14"
          >
            Try again
          </button>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;
