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

exports[`TDP Skeleton should render correctly 1`] = `
<DocumentFragment>
  .c11 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

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

.c2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: #7D7D7D;
  font-size: 16px;
  line-height: 24px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c3 {
  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;
  color: #7D7D7D;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c3:hover {
  color: #CECECE;
}

.c23 {
  gap: 16px;
  padding: 24px 0px;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
}

.c25 {
  font-size: 28px !important;
}

.c4 {
  border-radius: 12px;
  border-radius: 12px;
  height: 24px;
  width: 50%;
  width: 50%;
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
  will-change: background-position;
  background-size: 400%;
}

.c19 {
  color: #7D7D7D;
  font-size: 14px;
  min-width: 121px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-top: 24px;
  padding-bottom: 0px;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.c14 {
  gap: 16px;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
}

.c22 {
  background-color: #22222212;
  border: none;
  height: 0.5px;
}

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

.c41 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.c40 {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
}

.c31 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #22222212;
  border-radius: 16px;
  background-color: #FFFFFF;
}

.c35 {
  background-color: #F9F9F9;
  border-radius: 4px;
  height: 56px;
  width: 60px;
}

.c37 {
  background-color: #F9F9F9;
  border-radius: 16px;
  height: 56px;
  width: 100px;
}

.c42 {
  background-color: #F9F9F9;
  border-radius: 16px;
  height: 56px;
  width: 100%;
}

.c36 {
  background-color: #22222212;
  height: 36px;
}

.c32 {
  padding: 8px;
}

.c34 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c33 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  background-color: #F9F9F9;
  border-radius: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  padding: 48px 12px;
}

.c38 {
  position: relative;
}

.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 16px 52px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  gap: 40px;
}

.c1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: 780px;
  overflow: hidden;
  width: 100%;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 53px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 40px;
  width: 360px;
}

.c7 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 8px;
  margin-bottom: 20px;
  gap: 20px;
  -webkit-animation: iAjNNh 125ms ease-in;
  animation: iAjNNh 125ms ease-in;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.c8 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  font-size: 20px;
  line-height: 28px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 4px;
  min-width: 32px;
}

.c5 {
  height: 16px;
  width: 180px;
}

.c15 {
  height: 32px;
  border-radius: 8px;
}

.c6 {
  width: 169px;
}

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

.c10 {
  height: 36px;
  width: 136px;
}

.c16 {
  width: 120px;
}

.c20 {
  width: 80px;
  margin-bottom: 4px;
}

.c21 {
  width: 116px;
}

.c26 {
  margin-bottom: 6px;
  width: 100%;
}

.c29 {
  width: 120px;
}

.c27 {
  width: 50%;
}

.c17 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.c28 {
  padding-top: 24px;
}

.c13 {
  height: 4px;
}

@media screen and (max-width:640px) {
  .c19 {
    min-width: 168px;
  }
}

@media screen and (min-width:768px) {
  .c0 {
    padding: 48px 20px;
  }
}

@media screen and (max-width:1024px) {
  .c0 {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media screen and (min-width:1280px) {
  .c0 {
    gap: 60px;
  }
}

@media screen and (max-width:1024px) {
  .c30 {
    width: 100%;
    max-width: 780px;
  }
}

@media screen and (max-width:640px) {
  .c8 {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
  }
}

<span
    class="t_light is_inversed _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div
        class="c0"
      >
        <div
          class="c1"
        >
          <nav
            aria-label="breadcrumb-nav"
            class="c2"
          >
            <a
              class="c3"
              href="/explore/ethereum"
            >
              Explore 
              <svg
                fill="none"
                height="14"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="14"
                xmlns="http://www.w3.org/2000/svg"
              >
                <polyline
                  points="9 18 15 12 9 6"
                />
              </svg>
            </a>
            <a
              class="c3"
              href="/explore/tokens/ethereum"
            >
              Tokens 
              <svg
                fill="none"
                height="14"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="14"
                xmlns="http://www.w3.org/2000/svg"
              >
                <polyline
                  points="9 18 15 12 9 6"
                />
              </svg>
            </a>
            <div
              class="c4 c5 c6"
            />
          </nav>
          <div
            class="c7"
          >
            <div
              class="c8"
            >
              <div
                class="c4 c5 c9"
              />
              <div
                class="c4 c5 c10"
              />
            </div>
          </div>
          <div
            class="c11 c12"
            style="position: relative;"
          >
            <svg
              fill="none"
              height="356"
              width="100%"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g>
                <rect
                  fill="#CECECE40"
                  height="32"
                  rx="4"
                  width="180"
                  y="0"
                />
                <rect
                  fill="#CECECE40"
                  height="13"
                  rx="4"
                  width="80"
                  y="48"
                />
                <g
                  transform="translate(0, 342)"
                >
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="7%"
                    x="10%"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="7%"
                    x="28.25%"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="7%"
                    x="46.5%"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="7%"
                    x="64.75%"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="7%"
                    x="83%"
                  />
                </g>
                <g
                  transform="translate(0, 10)"
                >
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="24"
                    x="96%"
                    y="0"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="24"
                    x="96%"
                    y="71.2"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="24"
                    x="96%"
                    y="142.4"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="24"
                    x="96%"
                    y="213.6"
                  />
                  <rect
                    fill="#CECECE40"
                    height="6"
                    rx="3"
                    width="24"
                    x="96%"
                    y="284.8"
                  />
                </g>
              </g>
              <defs>
                <lineargradient
                  id="mask-Price-356-gradient"
                  x1="0%"
                  x2="100%"
                  y1="0%"
                  y2="0%"
                >
                  <stop
                    offset="0"
                    stop-color="#CECECE"
                  >
                    <animate
                      attributeName="offset"
                      dur="1.3s"
                      repeatCount="indefinite"
                      values="-1;3"
                    />
                  </stop>
                  <stop
                    offset="0.5"
                    stop-color="#fff"
                  >
                    <animate
                      attributeName="offset"
                      dur="1.3s"
                      repeatCount="indefinite"
                      values="-0.5;3.5"
                    />
                  </stop>
                  <stop
                    offset="1"
                    stop-color="#CECECE"
                  >
                    <animate
                      attributeName="offset"
                      dur="1.3s"
                      repeatCount="indefinite"
                      values="0;4"
                    />
                  </stop>
                </lineargradient>
              </defs>
              <mask
                id="mask-Price-356"
                style="mask-type: alpha;"
              >
                <path
                  d="M0 122.5L7.26 116.158L14.52 109.916L21.78 103.873L29.04 98.1233L36.3 92.7582L43.56 87.862L50.82 83.5121L58.08 79.7771L65.34 76.7159L72.6 74.3767L79.86 72.7964L87.12 72H94.38L101.64 72.7964L108.9 74.3767L116.16 76.7159L123.42 79.7771L130.68 83.5121L137.94 87.862L145.2 92.7582L152.46 98.1233L159.72 103.873L166.98 109.916L174.24 116.158L181.5 122.5L188.76 128.842L196.02 135.084L203.28 141.127L210.54 146.877L217.8 152.242L225.06 157.138L232.32 161.488L239.58 165.223L246.84 168.284L254.1 170.623L261.36 172.204L268.62 173H275.88L283.14 172.204L290.4 170.623L297.66 168.284L304.92 165.223L312.18 161.488L319.44 157.138L326.7 152.242L333.96 146.877L341.22 141.127L348.48 135.084L355.74 128.842L363 122.5L370.26 116.158L377.52 109.916L384.78 103.873L392.04 98.1233L399.3 92.7582L406.56 87.862L413.82 83.5121L421.08 79.7771L428.34 76.7159L435.6 74.3767L442.86 72.7964L450.12 72L457.38 72L464.64 72.7964L471.9 74.3767L479.16 76.7159L486.42 79.7771L493.68 83.5121L500.94 87.862L508.2 92.7582L515.46 98.1233L522.72 103.873L529.98 109.916L537.24 116.158L544.5 122.5L551.76 128.842L559.02 135.084L566.28 141.127L573.54 146.877L580.8 152.242L588.06 157.138L595.32 161.488L602.58 165.223L609.84 168.284L617.1 170.623L624.36 172.204L631.62 173H638.88L646.14 172.204L653.4 170.623L660.66 168.284L667.92 165.223L675.18 161.488L682.44 157.138L689.7 152.242L696.96 146.877L704.22 141.127L711.48 135.084L718.74 128.842L726 122.5"
                  stroke="white"
                  stroke-linecap="round"
                  stroke-width="4"
                  transform="translate(5, 75)"
                />
              </mask>
              <g
                mask="url(#mask-Price-356)"
              >
                <rect
                  fill="url(#mask-Price-356-gradient)"
                  height="356"
                  rx="4"
                  width="94%"
                />
              </g>
            </svg>
          </div>
          <div
            class="c13"
          />
          <div
            class="c14"
          >
            <div
              class="c4 c5 c15 c16"
            />
            <div
              class="c17"
            >
              <div
                class="c18"
              >
                <div
                  class="c19"
                >
                  <div
                    class="c4 c5 c20"
                  />
                  <div
                    class="c4 c5 c15 c21"
                  />
                </div>
                <div
                  class="c19"
                >
                  <div
                    class="c4 c5 c20"
                  />
                  <div
                    class="c4 c5 c15 c21"
                  />
                </div>
              </div>
              <div
                class="c18"
              >
                <div
                  class="c19"
                >
                  <div
                    class="c4 c5 c20"
                  />
                  <div
                    class="c4 c5 c15 c21"
                  />
                </div>
                <div
                  class="c19"
                >
                  <div
                    class="c4 c5 c20"
                  />
                  <div
                    class="c4 c5 c15 c21"
                  />
                </div>
              </div>
            </div>
          </div>
          <hr
            class="c22"
          />
          <div
            class="c23"
          >
            <div
              class="c24 c25 css-1a9hfw6"
            >
              <div
                class="c4 c5 c15 c16"
              />
            </div>
          </div>
          <div
            class="c4 c5 c26"
          />
          <div
            class="c4 c5 c26"
          />
          <div
            class="c4 c5 c26 c27"
            style="margin-bottom: 24px;"
          />
          <div
            class="c28"
          >
            <div
              class="c4 c5 c26 c29"
            />
            <div
              class="c4 c5 c26 c27"
            />
          </div>
          <div
            class="c28"
          >
            <div
              class="c4 c5 c26 c29"
            />
            <div
              class="c4 c5 c26 c27"
            />
          </div>
        </div>
        <div
          class="c30"
        >
          <div
            class="c31"
          >
            <div
              class="c32"
            >
              <div
                class="c24 css-n8z49y"
              >
                Swap
              </div>
            </div>
            <div
              class="c33"
            >
              <div
                class="c34"
              >
                <div
                  class="c35 c36"
                  width="60"
                />
                <div
                  class="c37 c36"
                  radius="16"
                  width="100"
                />
              </div>
            </div>
            <div
              class="c38"
            >
              <div
                class="c39 c40"
              >
                <div
                  class="c41"
                >
                  <svg
                    fill="none"
                    height="16"
                    stroke="#CECECE"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="16"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="12"
                      x2="12"
                      y1="5"
                      y2="19"
                    />
                    <polyline
                      points="19 12 12 19 5 12"
                    />
                  </svg>
                </div>
              </div>
              <div
                class="c33"
              >
                <div
                  class="c34"
                >
                  <div
                    class="c35 c36"
                    width="60"
                  />
                  <div
                    class="c37 c36"
                    radius="16"
                    width="100"
                  />
                </div>
              </div>
            </div>
            <div
              class="c42"
              radius="16"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`getLoadingTitle should return correct title 1`] = `
<DocumentFragment>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      token data for [object Object] on Ethereum
    </span>
  </span>
</DocumentFragment>
`;
