8680620944

Committed 14 Apr 2024 05:19PM UTC coverage: 87.79% (-7.8%) from 95.576%

Build # 8680620944

Build Type

Pull #143

github

Committed by

brunomenezes

Commit Message

feat: Export and using ERC-1155 form types and components.

Pull Request Pull Request #143: Feature: ERC-1155 Transfers

Run Details

499 of 600 branches covered (83.17%)

Branch coverage included in aggregate %.

306 of 993 new or added lines in 10 files covered. (30.82%)

1 existing line in 1 file now uncovered.

6756 of 7664 relevant lines covered (88.15%)

18.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

32.34

/packages/ui/src/ERC1155DepositForm/TokenFields.tsx

import {
    useReadErc1155BalanceOf,
    useReadErc1155Uri,
} from "@cartesi/rollups-wagmi";
import {
    Accordion,
    Avatar,
    Button,
    Collapse,
    DefaultMantineColor,
    Flex,
    Group,
    JsonInput,
    Loader,
    Notification,
    NumberFormatter,
    NumberInput,
    Stack,
    Text,
    TextInput,
} from "@mantine/core";
import {
    allPass,
    complement,
    equals,
    hasPath,
    is,
    isNotNil,
    or,
    pathOr,
} from "ramda";
import { FC } from "react";
import { Address, zeroAddress } from "viem";
import { Config } from "wagmi";
import { useFormContext } from "./context";
import {
    State,
    TokenMetadataResult,
    useGetTokenMetadata,
} from "./useGetTokenMetadata";

type BalanceOf = ReturnType<
    typeof useReadErc1155BalanceOf<
        "balanceOf",
        [Address, bigint],
        Config,
        bigint
    >
>;

interface Props {
    balanceOf: BalanceOf;
    display: boolean;
}

const notIdle = complement(equals<State>("idle"));
const notFetching = complement(equals<State>("fetching"));
const hasResult = allPass([notFetching, notIdle]);

interface MetadataViewProps {
    tokenMetadata: TokenMetadataResult;
}
interface MessageProps {
    color?: DefaultMantineColor;
    title: string;
    content?: string;
}

const Message: FC<MessageProps> = ({ title, content, color }) => {
    return (
        <Notification
            color={color ?? "blue"}
            title={title}
            withCloseButton={false}
        >
            {content && <Text size="xs">{content}</Text>}
        </Notification>
    );
};

/**
 * Messages to display based on the State
 * in the token-metadata-result. Tracking only the ones of interest.
 */
const feedbackByState: Partial<Record<State, string>> = {
    http_network_error: "We could not fetch the metadata.",
    not_http: "The URI is valid, but it is not an HTTP protocol.",
    errored: "Something is wrong with the URI returned by the contract.",
} as const;

const MetadataView: FC<MetadataViewProps> = ({ tokenMetadata }) => {
    const { state, url, data } = tokenMetadata;
    const message = feedbackByState[state];
    const name = pathOr("", ["name"], data);
    const description = pathOr("", ["description"], data);
    const image = pathOr("", ["image"], data);
    const dataAsString = is(Object, data)
        ? JSON.stringify(data, null, " ")
        : data;

    return (
        <>
            {isNotNil(message) && (
                <Message
                    title={message}
                    content={or(url, "URI is not defined.")}
                />
            )}

            {state === "success" && (
                <Accordion chevronPosition="right" variant="contained" py="sm">
                    <Accordion.Item
                        key={tokenMetadata.state}
                        value={tokenMetadata.state}
                    >
                        <Accordion.Control>
                            <Group wrap="nowrap">
                                <Avatar src={image} radius="xl" size="lg">
                                    {name ?? "TK"}
                                </Avatar>
                                <div>
                                    <Text>{name}</Text>
                                    <Text
                                        size="sm"
                                        c="dimmed"
                                        fw={400}
                                        lineClamp={2}
                                    >
                                        {description}
                                    </Text>
                                </div>
                            </Group>
                        </Accordion.Control>
                        <Accordion.Panel>
                            <JsonInput
                                autosize
                                maxRows={10}
                                readOnly
                                contentEditable={false}
                                value={dataAsString}
                            />
                        </Accordion.Panel>
                    </Accordion.Item>
                </Accordion>
            )}
        </>
    );
};

const TokenFields: FC<Props> = ({ balanceOf, display }) => {
    const form = useFormContext();
    const { erc1155Address, tokenId } = form.getTransformedValues();
    const { data: accountBalance, isLoading: isCheckingBalance } = balanceOf;

    const { data: uri, isLoading: isCheckingURI } = useReadErc1155Uri({
        address: erc1155Address !== zeroAddress ? erc1155Address : undefined,
        args: [tokenId!],
        query: {
            enabled: tokenId !== undefined,
        },
    });

    const metadataResult = useGetTokenMetadata(uri, tokenId);

    const hasMetaResult = hasResult(metadataResult.state);
    const decimals = pathOr(0, ["decimals"], metadataResult.data);
    const name = pathOr("", ["name"], metadataResult.data);
    const symbol = pathOr("", ["symbol"], metadataResult.data);

    return (
        <Collapse in={display}>
            <Stack>
                <TextInput
                    type="number"
                    min={0}
                    step={1}
                    label="Token id"
                    description="Token identifier to deposit"
                    placeholder="1"
                    withAsterisk
                    data-testid="token-id-input"
                    rightSection={
                        metadataResult.state === "fetching" && (
                            <Loader size="xs" />
                        )
                    }
                    {...form.getInputProps("tokenId")}
                />
                <NumberInput
                    disabled={
                        hasPath(["errors", "tokenId"], form) || !hasMetaResult
                    }
                    allowDecimal={decimals > 0}
                    decimalScale={decimals}
                    hideControls
                    min={0}
                    label="Amount"
                    description="Amount of tokens to deposit"
                    placeholder="0"
                    withAsterisk
                    data-testid="amount-input"
                    rightSectionProps={{
                        style: { width: "auto", paddingRight: "0.5rem" },
                    }}
                    rightSection={
                        metadataResult.state === "fetching" ? (
                            <Loader size="xs" />
                        ) : (
                            <Text> {symbol || name} </Text>
                        )
                    }
                    {...form.getInputProps("amount")}
                />

                {!form.errors.tokenId && (
                    <>
                        <Flex
                            mt="-sm"
                            justify={"space-between"}
                            direction={"row"}
                        >
                            <Flex rowGap={6} c={"dimmed"} align="flex-start">
                                <Text fz="xs">Balance:</Text>
                                <Text id="token-balance" fz="xs" mx={4}>
                                    {isCheckingBalance
                                        ? "Checking balance..."
                                        : ""}
                                    <NumberFormatter
                                        thousandSeparator
                                        value={or(accountBalance, 0).toString()}
                                    />
                                </Text>
                                {accountBalance !== undefined &&
                                    accountBalance > 0 && (
                                        <Button
                                            h="auto"
                                            p={2}
                                            size="xs"
                                            variant="transparent"
                                            onClick={() =>
                                                form.setFieldValue(
                                                    "amount",
                                                    accountBalance?.toString(),
                                                )
                                            }
                                            data-testid="max-amount"
                                        >
                                            Max
                                        </Button>
                                    )}
                            </Flex>

                            <Text fz="xs" c="dimmed">
                                Decimals: {decimals}
                            </Text>
                        </Flex>
                    </>
                )}
                <Stack>
                    <MetadataView tokenMetadata={metadataResult} />
                </Stack>
            </Stack>
        </Collapse>
    );
};

TokenFields.displayName = "TokenFields";

export default TokenFields;

1	import {	1✔
2	useReadErc1155BalanceOf,	1✔
3	useReadErc1155Uri,	1✔
4	} from "@cartesi/rollups-wagmi";	1✔
5	import {	1✔
6	Accordion,	1✔
7	Avatar,	1✔
8	Button,	1✔
9	Collapse,	1✔
10	DefaultMantineColor,	1✔
11	Flex,	1✔
12	Group,	1✔
13	JsonInput,	1✔
14	Loader,	1✔
15	Notification,	1✔
16	NumberFormatter,	1✔
17	NumberInput,	1✔
18	Stack,	1✔
19	Text,	1✔
20	TextInput,	1✔
21	} from "@mantine/core";	1✔
22	import {	1✔
23	allPass,	1✔
24	complement,	1✔
25	equals,	1✔
26	hasPath,	1✔
27	is,	1✔
28	isNotNil,	1✔
29	or,	1✔
30	pathOr,	1✔
31	} from "ramda";	1✔
32	import { FC } from "react";	1✔
33	import { Address, zeroAddress } from "viem";	1✔
34	import { Config } from "wagmi";	1✔
35	import { useFormContext } from "./context";	1✔
36	import {	1✔
37	State,	1✔
38	TokenMetadataResult,	1✔
39	useGetTokenMetadata,	1✔
40	} from "./useGetTokenMetadata";	1✔
41		1✔
42	type BalanceOf = ReturnType<	1✔
43	typeof useReadErc1155BalanceOf<	1✔
44	"balanceOf",	1✔
45	[Address, bigint],	1✔
46	Config,	1✔
47	bigint	1✔
48	>	1✔
49	>;	1✔
50		1✔
51	interface Props {	1✔
52	balanceOf: BalanceOf;	1✔
53	display: boolean;	1✔
54	}	1✔
55		1✔
56	const notIdle = complement(equals<State>("idle"));	1✔
57	const notFetching = complement(equals<State>("fetching"));	1✔
58	const hasResult = allPass([notFetching, notIdle]);	1✔
59		1✔
60	interface MetadataViewProps {	1✔
61	tokenMetadata: TokenMetadataResult;	1✔
62	}	1✔
63	interface MessageProps {	1✔
64	color?: DefaultMantineColor;	1✔
65	title: string;	1✔
66	content?: string;	1✔
67	}	1✔
68		1✔
69	const Message: FC<MessageProps> = ({ title, content, color }) => {	1✔
NEW 70	return (	×
NEW 71	<Notification	×
NEW 72	color={color ?? "blue"}	×
NEW 73	title={title}	×
NEW 74	withCloseButton={false}	×
NEW 75	>	×
NEW 76	{content && <Text size="xs">{content}</Text>}	×
NEW 77	</Notification>	×
NEW 78	);	×
NEW 79	};	×
80		1✔
81	/**	1✔
82	* Messages to display based on the State	1✔
83	* in the token-metadata-result. Tracking only the ones of interest.	1✔
84	*/	1✔
85	const feedbackByState: Partial<Record<State, string>> = {	1✔
86	http_network_error: "We could not fetch the metadata.",	1✔
87	not_http: "The URI is valid, but it is not an HTTP protocol.",	1✔
88	errored: "Something is wrong with the URI returned by the contract.",	1✔
89	} as const;	1✔
90		1✔
91	const MetadataView: FC<MetadataViewProps> = ({ tokenMetadata }) => {	1✔
NEW 92	const { state, url, data } = tokenMetadata;	×
NEW 93	const message = feedbackByState[state];	×
NEW 94	const name = pathOr("", ["name"], data);	×
NEW 95	const description = pathOr("", ["description"], data);	×
NEW 96	const image = pathOr("", ["image"], data);	×
NEW 97	const dataAsString = is(Object, data)	×
NEW 98	? JSON.stringify(data, null, " ")	×
NEW 99	: data;	×
NEW 100		×
NEW 101	return (	×
NEW 102	<>	×
NEW 103	{isNotNil(message) && (	×
NEW 104	<Message	×
NEW 105	title={message}	×
NEW 106	content={or(url, "URI is not defined.")}	×
NEW 107	/>	×
NEW 108	)}	×
NEW 109		×
NEW 110	{state === "success" && (	×
NEW 111	<Accordion chevronPosition="right" variant="contained" py="sm">	×
NEW 112	<Accordion.Item	×
NEW 113	key={tokenMetadata.state}	×
NEW 114	value={tokenMetadata.state}	×
NEW 115	>	×
NEW 116	<Accordion.Control>	×
NEW 117	<Group wrap="nowrap">	×
NEW 118	<Avatar src={image} radius="xl" size="lg">	×
NEW 119	{name ?? "TK"}	×
NEW 120	</Avatar>	×
NEW 121	<div>	×
NEW 122	<Text>{name}</Text>	×
NEW 123	<Text	×
NEW 124	size="sm"	×
NEW 125	c="dimmed"	×
NEW 126	fw={400}	×
NEW 127	lineClamp={2}	×
NEW 128	>	×
NEW 129	{description}	×
NEW 130	</Text>	×
NEW 131	</div>	×
NEW 132	</Group>	×
NEW 133	</Accordion.Control>	×
NEW 134	<Accordion.Panel>	×
NEW 135	<JsonInput	×
NEW 136	autosize	×
NEW 137	maxRows={10}	×
NEW 138	readOnly	×
NEW 139	contentEditable={false}	×
NEW 140	value={dataAsString}	×
NEW 141	/>	×
NEW 142	</Accordion.Panel>	×
NEW 143	</Accordion.Item>	×
NEW 144	</Accordion>	×
NEW 145	)}	×
NEW 146	</>	×
NEW 147	);	×
NEW 148	};	×
149		1✔
150	const TokenFields: FC<Props> = ({ balanceOf, display }) => {	1✔
NEW 151	const form = useFormContext();	×
NEW 152	const { erc1155Address, tokenId } = form.getTransformedValues();	×
NEW 153	const { data: accountBalance, isLoading: isCheckingBalance } = balanceOf;	×
NEW 154		×
NEW 155	const { data: uri, isLoading: isCheckingURI } = useReadErc1155Uri({	×
NEW 156	address: erc1155Address !== zeroAddress ? erc1155Address : undefined,	×
NEW 157	args: [tokenId!],	×
NEW 158	query: {	×
NEW 159	enabled: tokenId !== undefined,	×
NEW 160	},	×
NEW 161	});	×
NEW 162		×
NEW 163	const metadataResult = useGetTokenMetadata(uri, tokenId);	×
NEW 164		×
NEW 165	const hasMetaResult = hasResult(metadataResult.state);	×
NEW 166	const decimals = pathOr(0, ["decimals"], metadataResult.data);	×
NEW 167	const name = pathOr("", ["name"], metadataResult.data);	×
NEW 168	const symbol = pathOr("", ["symbol"], metadataResult.data);	×
NEW 169		×
NEW 170	return (	×
NEW 171	<Collapse in={display}>	×
NEW 172	<Stack>	×
NEW 173	<TextInput	×
NEW 174	type="number"	×
NEW 175	min={0}	×
NEW 176	step={1}	×
NEW 177	label="Token id"	×
NEW 178	description="Token identifier to deposit"	×
NEW 179	placeholder="1"	×
NEW 180	withAsterisk	×
NEW 181	data-testid="token-id-input"	×
NEW 182	rightSection={	×
NEW 183	metadataResult.state === "fetching" && (	×
NEW 184	<Loader size="xs" />	×
NEW 185	)	×
NEW 186	}	×
NEW 187	{...form.getInputProps("tokenId")}	×
NEW 188	/>	×
NEW 189	<NumberInput	×
NEW 190	disabled={	×
NEW 191	hasPath(["errors", "tokenId"], form) \|\| !hasMetaResult	×
NEW 192	}	×
NEW 193	allowDecimal={decimals > 0}	×
NEW 194	decimalScale={decimals}	×
NEW 195	hideControls	×
NEW 196	min={0}	×
NEW 197	label="Amount"	×
NEW 198	description="Amount of tokens to deposit"	×
NEW 199	placeholder="0"	×
NEW 200	withAsterisk	×
NEW 201	data-testid="amount-input"	×
NEW 202	rightSectionProps={{	×
NEW 203	style: { width: "auto", paddingRight: "0.5rem" },	×
NEW 204	}}	×
NEW 205	rightSection={	×
NEW 206	metadataResult.state === "fetching" ? (	×
NEW 207	<Loader size="xs" />	×
NEW 208	) : (	×
NEW 209	<Text> {symbol \|\| name} </Text>	×
NEW 210	)	×
NEW 211	}	×
NEW 212	{...form.getInputProps("amount")}	×
NEW 213	/>	×
NEW 214		×
NEW 215	{!form.errors.tokenId && (	×
NEW 216	<>	×
NEW 217	<Flex	×
NEW 218	mt="-sm"	×
NEW 219	justify={"space-between"}	×
NEW 220	direction={"row"}	×
NEW 221	>	×
NEW 222	<Flex rowGap={6} c={"dimmed"} align="flex-start">	×
NEW 223	<Text fz="xs">Balance:</Text>	×
NEW 224	<Text id="token-balance" fz="xs" mx={4}>	×
NEW 225	{isCheckingBalance	×
NEW 226	? "Checking balance..."	×
NEW 227	: ""}	×
NEW 228	<NumberFormatter	×
NEW 229	thousandSeparator	×
NEW 230	value={or(accountBalance, 0).toString()}	×
NEW 231	/>	×
NEW 232	</Text>	×
NEW 233	{accountBalance !== undefined &&	×
NEW 234	accountBalance > 0 && (	×
NEW 235	<Button	×
NEW 236	h="auto"	×
NEW 237	p={2}	×
NEW 238	size="xs"	×
NEW 239	variant="transparent"	×
NEW 240	onClick={() =>	×
NEW 241	form.setFieldValue(	×
NEW 242	"amount",	×
NEW 243	accountBalance?.toString(),	×
NEW 244	)	×
NEW 245	}	×
NEW 246	data-testid="max-amount"	×
NEW 247	>	×
NEW 248	Max	×
NEW 249	</Button>	×
NEW 250	)}	×
NEW 251	</Flex>	×
NEW 252		×
NEW 253	<Text fz="xs" c="dimmed">	×
NEW 254	Decimals: {decimals}	×
NEW 255	</Text>	×
NEW 256	</Flex>	×
NEW 257	</>	×
NEW 258	)}	×
NEW 259	<Stack>	×
NEW 260	<MetadataView tokenMetadata={metadataResult} />	×
NEW 261	</Stack>	×
NEW 262	</Stack>	×
NEW 263	</Collapse>	×
NEW 264	);	×
NEW 265	};	×
266		1✔
267	TokenFields.displayName = "TokenFields";	1✔
268		1✔
269	export default TokenFields;	1✔

cartesi / rollups-explorer / 8680620944

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous