const networks = ["mainnet", "testnet"]; State.init({ theme: props.theme || "light", network: context.networkId, }); const dark = { bg: "#28282b", color: "#e6eaee", border: "#748094", hoverBg: "#4b4b4b", }; const light = { bg: "#e3e8ef", color: "#4c5566", border: "#748094", hoverBg: "#e3e8ef", }; const useTheme = (light, dark) => { return state.theme === "light" ? light : dark; }; const Select = styled.select` font-weight: 600; cursor: pointer; border: 1px dashed ${useTheme(light.border, dark.border)}; background-color: ${useTheme(light.bg, dark.bg)}; border-radius: 8px; width: 122px; height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; color: ${useTheme(light.color, dark.color)}; transition: background-color 0.1s ease-in-out; :hover { background-color: ${useTheme(light.hoverBg, dark.hoverBg)}; } `; const strCapitalize = (str) => { if (str.length === 0) return str; return str.replace(/^./, (match) => match.toUpperCase()); }; return ( <Select> {networks.map((network, i) => ( <option key={i} value={network} disabled={state.network !== network}> {strCapitalize(network)} </option> ))} </Select> );