40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { Button, Card, Grid, Icon, Stepper } from '@/components';
|
|
import { MintCardHeader } from '../mint-card';
|
|
|
|
export const WalletStep = () => {
|
|
const { prevStep, nextStep } = Stepper.useContext();
|
|
return (
|
|
<Card.Container>
|
|
<MintCardHeader title="Connect Wallet" onClickBack={prevStep} />
|
|
<Card.Body>
|
|
<Grid css={{ rowGap: '$6' }}>
|
|
<Button
|
|
iconSpacing="52"
|
|
size="lg"
|
|
variant="ghost"
|
|
css={{
|
|
backgroundColor: '$slate4',
|
|
color: '$slate12',
|
|
py: '$2h',
|
|
}}
|
|
onClick={nextStep}
|
|
rightIcon={
|
|
<Icon
|
|
name="metamask"
|
|
css={{ color: 'white', fontSize: '$4xl' }}
|
|
/>
|
|
}
|
|
>
|
|
Metamask
|
|
</Button>
|
|
<Card.Text
|
|
css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
|
|
>
|
|
<span>Connect with the wallet you want to mint & own the NFA.</span>
|
|
</Card.Text>
|
|
</Grid>
|
|
</Card.Body>
|
|
</Card.Container>
|
|
);
|
|
};
|