150 lines
3.9 KiB
TypeScript
150 lines
3.9 KiB
TypeScript
import { useQuery } from '@apollo/client';
|
|
import { ethers } from 'ethers';
|
|
import { useEffect } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useAccount } from 'wagmi';
|
|
|
|
import {
|
|
Button,
|
|
CardTag,
|
|
Flex,
|
|
Form,
|
|
NFAIcon,
|
|
RowData,
|
|
Spinner,
|
|
Stepper,
|
|
Text,
|
|
} from '@/components';
|
|
import { getNFADocument } from '@/graphclient';
|
|
import { useAppDispatch } from '@/store';
|
|
import { bunnyCDNActions, useBunnyCDNStore } from '@/store/features/bunny-cdn';
|
|
import { AppLog } from '@/utils';
|
|
import { parseNumberToHexColor } from '@/utils/color';
|
|
|
|
import { CreateAccessPoint } from '../create-ap.context';
|
|
import { useAccessPointFormContext } from './create-ap.form.context';
|
|
|
|
export const SelectedNFA: React.FC = () => {
|
|
const { nfa } = CreateAccessPoint.useContext();
|
|
|
|
return (
|
|
<RowData
|
|
leftIcon={
|
|
<NFAIcon
|
|
image={nfa.logo}
|
|
color={`#${parseNumberToHexColor(nfa.color)}57`}
|
|
/>
|
|
}
|
|
label={nfa.name}
|
|
rightComponent={<CardTag css={{ minWidth: '$28' }}>Selected NFA</CardTag>}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const CreateAccessPointFormBody: React.FC = () => {
|
|
const { id } = useParams();
|
|
const { address } = useAccount();
|
|
const { nextStep } = Stepper.useContext();
|
|
const { nfa, setNfa, billing } = CreateAccessPoint.useContext();
|
|
const { setArgs } = CreateAccessPoint.useTransactionContext();
|
|
const { state } = useBunnyCDNStore();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const {
|
|
form: {
|
|
domain: {
|
|
value: [domain],
|
|
},
|
|
isValid: [isValid],
|
|
},
|
|
} = useAccessPointFormContext();
|
|
|
|
const {
|
|
form: { domain: domainContext },
|
|
} = useAccessPointFormContext();
|
|
|
|
const { loading: nfaLoading } = useQuery(getNFADocument, {
|
|
skip: id === undefined,
|
|
variables: {
|
|
id: ethers.utils.hexlify(Number(id)),
|
|
},
|
|
onCompleted(data) {
|
|
if (data.token && id) {
|
|
const { name, tokenId, logo, color, externalURL: domain } = data.token;
|
|
setNfa({ name, tokenId, logo, color, domain });
|
|
} else {
|
|
AppLog.errorToast("We couldn't find the NFA you are looking for");
|
|
}
|
|
},
|
|
onError(error) {
|
|
AppLog.errorToast('Error fetching NFA', error);
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (state === 'success') {
|
|
nextStep();
|
|
dispatch(bunnyCDNActions.setState(undefined));
|
|
}
|
|
}, [state, nextStep, dispatch]);
|
|
|
|
if (nfaLoading) {
|
|
return (
|
|
<Flex
|
|
css={{
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '$48',
|
|
}}
|
|
>
|
|
<Spinner />
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
const handleContinueClick = (): void => {
|
|
if (!address) {
|
|
AppLog.errorToast('No address found. Please connect your wallet.');
|
|
return;
|
|
}
|
|
|
|
if (nfa && domain) {
|
|
try {
|
|
setArgs([Number(nfa.tokenId), domain, { value: billing }]);
|
|
dispatch(
|
|
bunnyCDNActions.createBunnyCDN({
|
|
domain: 'domain',
|
|
targetDomain: domain,
|
|
})
|
|
);
|
|
} catch (e) {
|
|
AppLog.errorToast('Error setting transaction arguments');
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Flex css={{ flexDirection: 'column', gap: '$6' }}>
|
|
<SelectedNFA />
|
|
<Text css={{ fontSize: '$sm', color: '$slate11' }}>
|
|
Enter the domain you want to host the NFA. You will need access to the
|
|
DNS settings in the next step.
|
|
</Text>
|
|
<Form.Field context={domainContext}>
|
|
<Form.Label>Domain</Form.Label>
|
|
<Form.Input placeholder="mydomain.com" />
|
|
<Form.Overline />
|
|
</Form.Field>
|
|
<Button
|
|
disabled={!isValid || nfa.tokenId === ''}
|
|
isLoading={state === 'loading'}
|
|
colorScheme="blue"
|
|
variant="solid"
|
|
onClick={handleContinueClick}
|
|
>
|
|
Continue
|
|
</Button>
|
|
</Flex>
|
|
);
|
|
};
|