add fractional token check

permaweb · Jan 16, 2024 · a7180b0 · a7180b0
1 parent 18cb0e5
commit a7180b0
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 23 deletions.
diff --git a/src/helpers/language.ts b/src/helpers/language.ts
@@ -48,8 +48,9 @@ export const language = {
 		comment: `Comment`,
 		comments: `Comments`,
 		community: `Community`,
-		contentTokens: `Content tokens`,
-		contentTokensInfo: `This balance will be assigned to each newly created asset.`,
+		contentTokens: `Fractional tokens`,
+		contentTokensInfo: `Atomic assets can be fractionalized by inputting a number greater than one. This enables multiple users to own fractions of the same atomic asset.`,
+		contentTokensCheckInfo: `These assets will use fractionalized tokens`,
 		conversion: `Conversion`,
 		connect: `Connect`,
 		connectToContinue: `Connect your wallet to continue`,

diff --git a/src/helpers/types.ts b/src/helpers/types.ts
@@ -176,6 +176,7 @@ export type UploadPayloadType =
 	| 'description'
 	| 'collectionCode'
 	| 'contentTokens'
+	| 'useFractionalTokens'
 	| 'topics'
 	| 'content'
 	| 'contentList'
@@ -200,6 +201,8 @@ export type UploadReduxType = {
 		title: string;
 		description: string;
 		collectionCode: string;
+		contentTokens: number;
+		useFractionalTokens: boolean;
 		thumbnail: any;
 		topics: string[];
 		type: string;

diff --git a/src/store/upload/reducers.ts b/src/store/upload/reducers.ts
@@ -24,6 +24,7 @@ const initStateUploadReducer = {
 		description: '',
 		collectionCode: '',
 		contentTokens: 100,
+		useFractionalTokens: true,
 		banner: null,
 		thumbnail: null,
 		topics: [],
@@ -84,6 +85,7 @@ export function uploadReducer(state: UploadReduxType = initStateUploadReducer, a
 					description: '',
 					collectionCode: '',
 					contentTokens: 100,
+					useFractionalTokens: true,
 					banner: null,
 					thumbnail: null,
 					topics: [],
@@ -110,6 +112,7 @@ export function uploadReducer(state: UploadReduxType = initStateUploadReducer, a
 					description: '',
 					collectionCode: '',
 					contentTokens: 100,
+					useFractionalTokens: true,
 					banner: null,
 					thumbnail: null,
 					topics: [],

diff --git a/src/views/Upload/UploadSteps/UploadStepsDetails/UploadStepsDetails.tsx b/src/views/Upload/UploadSteps/UploadStepsDetails/UploadStepsDetails.tsx
@@ -5,6 +5,7 @@ import { ReactSVG } from 'react-svg';
 import { checkDuplicateTitle } from 'gql';
 
 import { Button } from 'components/atoms/Button';
+import { Checkbox } from 'components/atoms/Checkbox';
 import { FormField } from 'components/atoms/FormField';
 import { TextArea } from 'components/atoms/TextArea';
 import { Modal } from 'components/molecules/Modal';
@@ -103,6 +104,17 @@ export default function UploadStepsDetails() {
 		);
 	}
 
+	function handleUseFractionalChange() {
+		dispatch(
+			uploadActions.setUpload([
+				{
+					field: 'useFractionalTokens',
+					data: !uploadReducer.data.useFractionalTokens,
+				},
+			])
+		);
+	}
+
 	function handleTopicChange(topic: string) {
 		let topics = [...uploadReducer.data.topics];
 		if (topics.includes(topic)) {
@@ -184,16 +196,29 @@ export default function UploadStepsDetails() {
 						/>
 					</>
 				)}
-				<FormField
-					type={'number'}
-					label={language.contentTokens}
-					value={uploadReducer.data.contentTokens}
-					onChange={(e: any) => handleInputChange(e, 'contentTokens')}
-					disabled={false}
-					invalid={getInvalidContentTokens()}
-					tooltip={language.contentTokensInfo}
-					required
-				/>
+				<S.COWrapper className={'border-wrapper-alt1'}>
+					<S.CWrapper>
+						<span>{language.contentTokensCheckInfo}</span>
+						<Checkbox
+							checked={uploadReducer.data.useFractionalTokens}
+							handleSelect={handleUseFractionalChange}
+							disabled={false}
+						/>
+					</S.CWrapper>
+					{uploadReducer.data.useFractionalTokens && (
+						<FormField
+							type={'number'}
+							label={language.contentTokens}
+							value={uploadReducer.data.useFractionalTokens ? uploadReducer.data.contentTokens : 1}
+							onChange={(e: any) => handleInputChange(e, 'contentTokens')}
+							disabled={!uploadReducer.data.useFractionalTokens}
+							invalid={getInvalidContentTokens()}
+							tooltip={language.contentTokensInfo}
+							required
+							hideErrorMessage
+						/>
+					)}
+				</S.COWrapper>
 				{uploadReducer.uploadType === 'collection' && (
 					<FormField
 						label={language.collectionCode}

diff --git a/src/views/Upload/UploadSteps/UploadStepsDetails/styles.ts b/src/views/Upload/UploadSteps/UploadStepsDetails/styles.ts
@@ -13,6 +13,24 @@ export const Wrapper = styled.div`
 	}
 `;
 
+export const COWrapper = styled.div`
+	padding: 15px;
+	margin: 0 0 25px 0;
+	border: none;
+`;
+
+export const CWrapper = styled.div`
+	display: flex;
+	align-items: center;
+	span {
+		color: ${(props) => props.theme.colors.font.primary};
+		font-size: ${(props) => props.theme.typography.size.xSmall};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
+		display: block;
+		margin: 0 5px 0 0;
+	}
+`;
+
 export const TWrapper = styled.div``;
 
 export const THeader = styled.div`

diff --git a/src/views/Upload/index.tsx b/src/views/Upload/index.tsx
@@ -41,18 +41,19 @@ export default function Upload() {
 	const [collectionResponse, setCollectionResponse] = React.useState<string | null>(null);
 	const [collectionResponseError, setCollectionResponseError] = React.useState<string | null>(null);
 
-	React.useEffect(() => {
-		const handleBeforeUnload = (e: any) => {
-			e.preventDefault();
-			e.returnValue = '';
-		};
+	// TODO: add
+	// React.useEffect(() => {
+	// 	const handleBeforeUnload = (e: any) => {
+	// 		e.preventDefault();
+	// 		e.returnValue = '';
+	// 	};
 
-		window.addEventListener('beforeunload', handleBeforeUnload);
+	// 	window.addEventListener('beforeunload', handleBeforeUnload);
 
-		return () => {
-			window.removeEventListener('beforeunload', handleBeforeUnload);
-		};
-	}, [uploadReducer]);
+	// 	return () => {
+	// 		window.removeEventListener('beforeunload', handleBeforeUnload);
+	// 	};
+	// }, [uploadReducer]);
 
 	React.useEffect(() => {
 		if (!arProvider.wallet) dispatch(uploadActions.setUploadDisabled(true));
@@ -219,11 +220,12 @@ export default function Upload() {
 					? uploadReducer.data.description
 					: data.file.name;
 				const type = data.file.type;
+				const balance = uploadReducer.data.useFractionalTokens ? Number(uploadReducer.data.contentTokens) : 1;
 
 				try {
 					let initStateAssetJson: any = {
 						balances: {
-							[arProvider.walletAddress]: Number(uploadReducer.data.contentTokens),
+							[arProvider.walletAddress]: balance,
 						},
 						title: title,
 						description: description,