102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import { useUnstableProvider } from "../hooks"
|
|
import * as select from "@zag-js/select"
|
|
import { useMachine, normalizeProps } from "@zag-js/react"
|
|
import { useId, useEffect } from "react"
|
|
import { useChains } from "../hooks/useChains"
|
|
|
|
import { chainSpec as casperDevelopment } from "./chainspecs/casper_dev"
|
|
|
|
import {
|
|
Select,
|
|
SelectValue,
|
|
SelectTrigger,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
} from "../components/ui/select"
|
|
|
|
const chainData = [
|
|
{
|
|
label: "Casper",
|
|
value: "0x07074eb5f47a6f4dd70430674e5174d5414bc055292b90392fb6f0a28c7524d1",
|
|
chainSpec: casperDevelopment,
|
|
}
|
|
]
|
|
|
|
export const ChainSelect = () => {
|
|
const {
|
|
chainId,
|
|
setChainId,
|
|
provider,
|
|
providerDetail,
|
|
providerDetails,
|
|
connectProviderDetail
|
|
} = useUnstableProvider()
|
|
|
|
const { chains: connectedChains } = useChains(provider)
|
|
|
|
const isConnected = !!Object.keys(connectedChains).find(
|
|
(connectedChainId) => connectedChainId === chainId,
|
|
)
|
|
|
|
useEffect(() => {
|
|
// TODO: make sure we are using correct extension
|
|
const maybeProvider = providerDetails?.find(obj => obj.info.rdns === "io.ghostchain.GhostWalletExtension")
|
|
if (maybeProvider && !providerDetail) {
|
|
try {
|
|
connectProviderDetail(maybeProvider)
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
}, [providerDetail, providerDetails, connectProviderDetail])
|
|
|
|
const chains = select.collection({
|
|
items: chainData,
|
|
itemToString: (item) => item.label,
|
|
itemToValue: (item) => item.value,
|
|
})
|
|
|
|
const [state, send] = useMachine(
|
|
select.machine({
|
|
id: useId(),
|
|
collection: chains,
|
|
value: [chainId],
|
|
onValueChange: (chainId) => setChainId(chainId.value[0] ?? ""),
|
|
}),
|
|
)
|
|
|
|
const api = select.connect(state, send, normalizeProps)
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Select
|
|
value={state.context.value[0]}
|
|
onValueChange={(chainId) => {
|
|
let newValue = chainData.find(obj => obj.value === chainId)
|
|
api.selectValue(newValue?.value ? newValue.value : "")
|
|
}}
|
|
>
|
|
<SelectTrigger
|
|
className={"text-muted-foreground w-[200px]"}
|
|
data-testid="chain-select"
|
|
>
|
|
<SelectValue placeholder="Select Chain" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{[...chainData, { label: "Disconnect", value: "Disconnect"}].map(({ label, value }, index) => (
|
|
<SelectItem key={index} data-testid={`chain-${label}`} value={value}>{label}</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
{state.context.value[0] && (
|
|
isConnected
|
|
? <div className="text-center text-sm text-secondary font-bold tracking-wide bg-accent rounded">Connected</div>
|
|
: <div className="text-center text-sm text-secondary font-bold tracking-wide bg-destructive rounded">Connecting...</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|