40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import { Button, Icon } from '@/components';
|
|
import { githubActions, useAppDispatch, useGithubStore } from '@/store';
|
|
import { Mint } from '@/views/mint/mint.context';
|
|
import { useCallback } from 'react';
|
|
|
|
export const GithubButton = () => {
|
|
const { state } = useGithubStore();
|
|
const dispatch = useAppDispatch();
|
|
const { setGithubStep } = Mint.useContext();
|
|
|
|
const handleGithubLogin = useCallback(() => {
|
|
dispatch(githubActions.login())
|
|
.then(() => setGithubStep(2))
|
|
.catch((error) => {
|
|
//TODO show toast with error message
|
|
console.log(error);
|
|
});
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<Button
|
|
iconSpacing="59"
|
|
size="lg"
|
|
variant="ghost"
|
|
css={{
|
|
backgroundColor: '$slate4',
|
|
color: '$slate12',
|
|
py: '$2h',
|
|
}}
|
|
onClick={handleGithubLogin}
|
|
disabled={state === 'loading'}
|
|
rightIcon={
|
|
<Icon name="github" css={{ color: 'white', fontSize: '$4xl' }} />
|
|
}
|
|
>
|
|
GitHub
|
|
</Button>
|
|
);
|
|
};
|