@chakra-ui/react#createStandaloneToast TypeScript Examples

toast = createStandaloneToast()

initialize(config: ToastConfigType): ToastHandler {
    const toaster = createStandaloneToast(config)
    return new ToastHandler(toaster)
  }

public toast = createStandaloneToast(theme);

export function useGame(
  config: Types.Core.GameConfig,
  containerRef: React.RefObject<HTMLDivElement>,
): Game | undefined {
  const [game, setGame] = useState<Game>();
  // reload on account/chain change
  useEffect(() => {
    if (!window.ethereum) return;

    const { ethereum } = window as any;
    const toast = createStandaloneToast();

    const destroyGame = () => {
      game?.destroy(true);
      setTimeout(() => setGame(undefined));
      // setGame(undefined)
    };

    const onAccountsChanged = (accounts: string[]) => {
      toast({
        title: 'Detected account change. Reloading game...',
        description: `${accounts[0]}`,
        status: 'warning',
      });
      destroyGame();
    };

    const onChainChanged = (chainId: string | number) => {
      toast({
        title: 'Detected chain change. Reloading game...',
        description: `Chain changed to ${chainId}`,
        status: 'warning',
      });
      destroyGame();
    };

    ethereum.on('accountsChanged', onAccountsChanged);
    ethereum.on('chainChanged', onChainChanged);

    return () => {
      if (ethereum.removeListener) {
        ethereum.removeListener('accountsChanged', onAccountsChanged);
        ethereum.removeListener('chainChanged', onChainChanged);
      }
    };
  }, [game]);

  useEffect(() => {
    if (!game && containerRef.current) {
      //setTimeout(() => {
      const newGame = new Game({ ...config, parent: containerRef.current! });
      setGame(newGame);
      //})
    }
    return () => {
      game?.destroy(true);
    };
  }, [config, containerRef, game]);

  return game;
}

export default function Login(props: Props) {
    const toast = createStandaloneToast(theme);

    const [ loading, setLoading ] = useState(false);
    const [ loggedIn, setLoggedIn ] = useState(false);

    useEffect(() => {
        props.manager.events.on('loggedIn', () => setLoading(true));
    }, []);

    const login = () => {
        if ((window.ethereum as any).chainId !== '0x1') {
            toast({
                title: "Wrong network",
                description: "Please switch to the main Ethereum network",
                status: "error",
                ...toastStyle,
            });
            return;
        }

        props.authenticator.login()
            .then(() => {
                setLoggedIn(true)
                toast({
                    title: "Success",
                    description: "You have successfully logged in!",
                    status: "success",
                    ...toastStyle
                });
            })
            .catch((err) => {
                setLoggedIn(false);
                toast({
                    title: "Error " + (err.code ?? ""),
                    description: err.message ?? err,
                    status: "error",
                    ...toastStyle
                });
            });
    }

    return (
        <ChakraProvider theme={theme}>
            <Center style={{
                height: "100vh",
                backdropFilter: "brightness(50%)",
            }}>
                {loading ? <Spinner size="xl" color="white" /> : <Container style={{
                    padding: "1rem",
                    borderStyle: "solid",
                    boxShadow: "0px 0px 15px rgba(0,0,0,1)",
                    borderColor: "black",
                    borderWidth: "0px",
                    backgroundColor: "white",
                    borderRadius: "7px",
                }}>
                <VStack>
                    <Heading>
                        Please login before accessing the game
                    </Heading>
                    <br />
                    <Text>
                        To login, you need to sign a message using your wallet provider. Our personal favorite is Metamask but you can use any other extension or wallet provider.
                    </Text>
                    <UnorderedList spacing={4} style={{
                        paddingLeft: "1rem",
                    }}>
                        <ListItem>
                            Click on this button to trigger the sign message
                            <br />
                            <Button variant="primary" onClick={login}>
                                Sign
                            </Button>
                        </ListItem>
                        <ListItem>Your wallet provider will popup a dialog and you will need to press `Sign`</ListItem>
                        <ListItem>
                            Wait for this to show as logged in
                            <HStack style={{
                                paddingLeft: "1rem",
                                paddingRight: "1rem",
                            }}>
                                {loggedIn ? <CheckIcon /> : <Spinner color='red.500' />}
                                <Text style={{
                                    paddingTop: "1rem",
                                }}>{loggedIn ? 'Logged in' : 'Not logged in'}</Text>
                            </HStack>
                        </ListItem>
                        <ListItem>Press continue</ListItem>
                    </UnorderedList>
                    <Button 
                        disabled={!loggedIn}
                        onClick={() => props.manager.events.emit('loggedIn')}
                        style={{
                            position: "relative",
                            top: "30px"
                        }}
                        variant="primary"
                    >
                        Continue
                    </Button>
                </VStack>
                </Container>}
            </Center>
        </ChakraProvider>
    );
}