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

exports[`renders currency rows correctly when currencies list is non-empty 1`] = `
<DocumentFragment>
  .c10 {
  color: #98A1C0;
}

.c8 {
  margin-left: 4px;
  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;
}

.c9 {
  width: 1em;
  height: 1em;
  color: #98A1C0;
}

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

.c5 {
  display: grid;
  grid-auto-rows: auto;
}

.c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c11 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c3 {
  padding: 4px 20px;
  height: 56px;
  display: grid;
  grid-template-columns: auto minmax(auto,1fr) auto minmax(0,72px);
  grid-gap: 16px;
  cursor: pointer;
  opacity: 1;
}

.c3:hover {
  background-color: #B8C0DC14;
}

.c6 {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c7 {
  margin-left: 0.3em;
}

<div
    style="padding-right: 8px; padding-top: 8px;"
  >
    <div
      class="CurrencyList_scrollbarStyle__1pi21y70"
      style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
    >
      <div
        style="height: 168px; width: 100%;"
      >
        <div
          class="c0 c1 c2 c3 token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
          style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
          tabindex="0"
        >
          <div
            class="c4"
          >
            CurrencyLogo currency=DAI
          </div>
          <div
            class="c5"
            style="opacity: 1;"
          >
            <div
              class="c0 c1"
            >
              <div
                class="c6 css-vurnku"
                title="Dai Stablecoin"
              >
                Dai Stablecoin
              </div>
              <div
                class="c7"
              >
                <div
                  class="c8"
                >
                  <svg
                    class="c9"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    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>
              </div>
            </div>
            <div
              class="c10 css-yfjwjl"
            >
              DAI
            </div>
          </div>
          <div
            class="c4"
          >
            <div
              class="c0 c1 c11"
              style="justify-self: flex-end;"
            />
          </div>
        </div>
        <div
          class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
          style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
          tabindex="0"
        >
          <div
            class="c4"
          >
            CurrencyLogo currency=USDC
          </div>
          <div
            class="c5"
            style="opacity: 1;"
          >
            <div
              class="c0 c1"
            >
              <div
                class="c6 css-vurnku"
                title="USD//C"
              >
                USD//C
              </div>
              <div
                class="c7"
              >
                <div
                  class="c8"
                >
                  <svg
                    class="c9"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    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>
              </div>
            </div>
            <div
              class="c10 css-yfjwjl"
            >
              USDC
            </div>
          </div>
          <div
            class="c4"
          >
            <div
              class="c0 c1 c11"
              style="justify-self: flex-end;"
            />
          </div>
        </div>
        <div
          class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
          style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
          tabindex="0"
        >
          <div
            class="c4"
          >
            CurrencyLogo currency=WBTC
          </div>
          <div
            class="c5"
            style="opacity: 1;"
          >
            <div
              class="c0 c1"
            >
              <div
                class="c6 css-vurnku"
                title="Wrapped BTC"
              >
                Wrapped BTC
              </div>
              <div
                class="c7"
              >
                <div
                  class="c8"
                >
                  <svg
                    class="c9"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    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>
              </div>
            </div>
            <div
              class="c10 css-yfjwjl"
            >
              WBTC
            </div>
          </div>
          <div
            class="c4"
          >
            <div
              class="c0 c1 c11"
              style="justify-self: flex-end;"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`renders loading rows when isLoading is true 1`] = `
<DocumentFragment>
  .c0 {
  display: grid;
}

.c0 > div {
  -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,#F5F6FC 25%,#E8ECFB 50%,#F5F6FC 75% );
  background-size: 400%;
  border-radius: 12px;
  height: 2.4em;
  will-change: background-position;
}

.c1 {
  grid-column-gap: 0.5em;
  grid-template-columns: repeat(12,1fr);
  max-width: 960px;
  padding: 12px 20px;
}

.c1 > div:nth-child(4n + 1) {
  grid-column: 1 / 8;
  height: 1em;
  margin-bottom: 0.25em;
}

.c1 > div:nth-child(4n + 2) {
  grid-column: 12;
  height: 1em;
  margin-top: 0.25em;
}

.c1 > div:nth-child(4n + 3) {
  grid-column: 1 / 4;
  height: 0.75em;
}

<div
    style="padding-right: 8px; padding-top: 8px;"
  >
    <div
      class="CurrencyList_scrollbarStyle__1pi21y70"
      style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
    >
      <div
        style="height: 560px; width: 100%;"
      >
        <div
          class="c0 c1"
        >
          <div />
          <div />
          <div />
        </div>
        <div
          class="c0 c1"
        >
          <div />
          <div />
          <div />
        </div>
        <div
          class="c0 c1"
        >
          <div />
          <div />
          <div />
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
