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

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Ethereum-selector"
  >
    <img
      alt="Ethereum"
      class="c1"
      src="ethereum-logo.png"
    />
    <div
      class="c2"
    >
      Ethereum
    </div>
    <div
      class="c3"
    >
      <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>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Görli-selector"
  >
    <img
      alt="Görli"
      class="c1"
      src="ethereum-logo.png"
    />
    <div
      class="c2"
    >
      Görli
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Optimism-selector"
  >
    <img
      alt="Optimism"
      class="c1"
      src="optimistic_ethereum.svg"
    />
    <div
      class="c2"
    >
      Optimism
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="BNB Chain-selector"
  >
    <img
      alt="BNB Chain"
      class="c1"
      src="bnb-logo.svg"
    />
    <div
      class="c2"
    >
      BNB Chain
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Polygon-selector"
  >
    <img
      alt="Polygon"
      class="c1"
      src="polygon-matic-logo.svg"
    />
    <div
      class="c2"
    >
      Polygon
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Optimism Görli-selector"
  >
    <img
      alt="Optimism Görli"
      class="c1"
      src="optimistic_ethereum.svg"
    />
    <div
      class="c2"
    >
      Optimism Görli
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Base-selector"
  >
    <img
      alt="Base"
      class="c1"
      src="base_logo.svg"
    />
    <div
      class="c2"
    >
      Base
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Arbitrum-selector"
  >
    <img
      alt="Arbitrum"
      class="c1"
      src="arbitrum_logo.svg"
    />
    <div
      class="c2"
    >
      Arbitrum
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Celo-selector"
  >
    <img
      alt="Celo"
      class="c1"
      src="celo_logo.svg"
    />
    <div
      class="c2"
    >
      Celo
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Avalanche-selector"
  >
    <img
      alt="Avalanche"
      class="c1"
      src="avax_logo.svg"
    />
    <div
      class="c2"
    >
      Avalanche
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Celo Alfajores-selector"
  >
    <img
      alt="Celo Alfajores"
      class="c1"
      src="celo_logo.svg"
    />
    <div
      class="c2"
    >
      Celo Alfajores
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Polygon Mumbai-selector"
  >
    <img
      alt="Polygon Mumbai"
      class="c1"
      src="polygon-matic-logo.svg"
    />
    <div
      class="c2"
    >
      Polygon Mumbai
    </div>
    <div
      class="c3"
    />
  </button>
</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:640px) {
  .c0 {
    width: 100%;
  }
}

<div>
  <button
    class="c0"
    data-testid="undefined-selector"
  >
    <div
      class="c1"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Arbitrum Goerli-selector"
  >
    <img
      alt="Arbitrum Goerli"
      class="c1"
      src="arbitrum_logo.svg"
    />
    <div
      class="c2"
    >
      Arbitrum Goerli
    </div>
    <div
      class="c3"
    />
  </button>
</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;
}

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

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

.c1 {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}

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

<div>
  <button
    class="c0"
    data-testid="Sepolia-selector"
  >
    <img
      alt="Sepolia"
      class="c1"
      src="ethereum-logo.png"
    />
    <div
      class="c2"
    >
      Sepolia
    </div>
    <div
      class="c3"
    />
  </button>
</div>
`;
