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

exports[`ChainSelectorRow should match snapshot for chainId 1 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class="t_light is_inversed _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Ethereum-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Ethereum logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#6B8AFF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            ethereum.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Ethereum
        </div>
        <div
          class="c2"
        >
          <svg
            color="#FC72FF"
            fill="none"
            height="20"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M16.6693 5.33789L7.5026 14.3175L3.33594 10.2358"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            />
          </svg>
        </div>
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 5 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Görli-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Görli logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#6B8AFF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            ethereum.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Görli
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 10 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Optimism-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Optimism logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#FF042033"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            optimism.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Optimism
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 30 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="undefined-selector"
      >
        <div
          class="c1"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 56 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="BNB Chain-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            BNB Chain logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#EAB20033"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            bnb.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          BNB Chain
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 137 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Polygon-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Polygon logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#9558FF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            polygon.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Polygon
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 420 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Optimism Görli-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Optimism Görli logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#FF042033"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            optimism.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Optimism Görli
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 8453 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Base-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Base logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#0052FF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            base.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Base
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 42161 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Arbitrum-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Arbitrum logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#00A3FF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            arbitrum.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Arbitrum
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 42220 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Celo-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Celo logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#FCFF5299"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            celo_light.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Celo
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 43114 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Avalanche-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Avalanche logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#E8414233"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            avax.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Avalanche
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 44787 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Celo Alfajores-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Celo Alfajores logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#FCFF5299"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            celo_light.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Celo Alfajores
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 80001 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Polygon Mumbai-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Polygon Mumbai logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#9558FF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            polygon.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Polygon Mumbai
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 81457 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Blast-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Blast logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="rgba(252, 252, 3, 0.16)"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            blast_light.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Blast
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 84531 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="undefined-selector"
      >
        <div
          class="c1"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 421613 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Arbitrum Goerli-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Arbitrum Goerli logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#00A3FF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            arbitrum.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Arbitrum Goerli
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 421614 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="undefined-selector"
      >
        <div
          class="c1"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 7777777 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="undefined-selector"
      >
        <div
          class="c1"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 11155111 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
}

.c2 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="Sepolia-selector"
      >
        <svg
          aria-labelledby="titleID"
          height="20"
          style="margin-right: 12px; width: 20px; height: 20px;"
          width="20"
        >
          <title
            id="titleID"
          >
            Sepolia logo
          </title>
          <rect
            fill="#F9F9F9"
            height="20"
            rx="6"
            width="20"
          />
          <rect
            fill="#6B8AFF33"
            height="20"
            rx="6"
            width="20"
          />
          <svg
            height="20"
            width="20"
          >
            ethereum.svg
          </svg>
        </svg>
        <div
          class="c1"
        >
          Sepolia
        </div>
        <div
          class="c2"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 11155420 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="undefined-selector"
      >
        <div
          class="c1"
        />
      </button>
    </span>
  </span>
</div>
`;

exports[`ChainSelectorRow should match snapshot for chainId 999999999 1`] = `
.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 12px;
  color: #222222;
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 20px;
  opacity: 1;
  padding: 10px 8px;
  text-align: left;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  width: 240px;
}

.c0:hover {
  background-color: #22222212;
}

.c1 {
  grid-column: 3;
  grid-row: 1;
  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;
  width: 20px;
}

@media only screen and (max-width:396px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <button
        class="c0"
        data-testid="undefined-selector"
      >
        <div
          class="c1"
        />
      </button>
    </span>
  </span>
</div>
`;
