wallet-connect-web-examples/dapps/react-dapp-v2/src/components/RelayRegionDropdown.tsx
Gancho Radkov 2143840806
feat:re-verify (#243)
* feat: implements verify context badge

* feat: implements verify cases in example dapp - valid/invalid/unknown

* fix: styled props

---------

Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
2023-07-18 17:12:25 +03:00

56 lines
1.3 KiB
TypeScript

import * as React from "react";
import { REGIONALIZED_RELAYER_ENDPOINTS } from "../constants/default";
import styled from "styled-components";
import Icon from "./Icon";
import { useState } from "react";
interface RelayRegionDropdownProps {
relayerRegion: string;
setRelayerRegion?: (relayer: string) => void;
show: boolean;
}
const SelectContainer = styled.select`
width: 150px;
background: transparent;
color: black;
height: 30px;
border-radius: 4px;
padding: 2px;
font-size: "1.25em";
bottom: 40px;
left: 50px;
direction: ltr;
unicode-bidi: embed;
margin: 5px;
`;
const SelectOption = styled.option`
font-size: "1.25em";
`;
const RelayRegionDropdown = (props: RelayRegionDropdownProps) => {
const { relayerRegion, setRelayerRegion, show } = props;
return (
<div>
{show && (
<SelectContainer
value={relayerRegion}
onChange={(e) => setRelayerRegion?.(e?.target?.value)}
>
<option disabled>Relayer Region:</option>
{REGIONALIZED_RELAYER_ENDPOINTS.map((e, i) => {
return (
<SelectOption key={i} value={e.value}>
{e.label}
</SelectOption>
);
})}
</SelectContainer>
)}
</div>
);
};
export default RelayRegionDropdown;