show upload requirements / fix default license selection

src/components/molecules/AssetInfoLicense/AssetInfoLicense.tsx

@@ -26,7 +26,6 @@ export default function AssetDetailLicenses(props: IProps) {
 	function getValue(element: string) {
 		if (!props.asset || !props.asset.license || !props.asset.license[element]) return null;
 		if (typeof props.asset.license[element] === 'object') {
-			console.log(props.asset.license[element].value);
 			return (
 				<S.LFlex>
 					<p>{getLicenseText(props.asset.license[element].value)}</p>

src/components/organisms/AssetsTable/styles.ts

@@ -41,11 +41,16 @@ export const TMessage = styled.div`
 `;
 
 export const MWrapper = styled.div`
+	width: fit-content;
 	span {
-		color: ${(props) => props.theme.colors.warning};
-		font-size: ${(props) => props.theme.typography.size.xSmall};
-		font-weight: ${(props) => props.theme.typography.weight.medium};
+		background: ${(props) => props.theme.colors.warning};
+		color: ${(props) => props.theme.colors.font.light1};
+		font-size: ${(props) => props.theme.typography.size.xxSmall};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
+		border-radius: ${STYLING.dimensions.radius.alt2};
+		text-align: right;
 		display: block;
+		padding: 2.5px 12.5px;
 		margin: 0 0 5px 0;
 	}
 `;

src/components/organisms/CollectionsTable/styles.ts

@@ -38,11 +38,16 @@ export const TMessage = styled.div`
 `;
 
 export const MWrapper = styled.div`
+	width: fit-content;
 	span {
-		color: ${(props) => props.theme.colors.warning};
-		font-size: ${(props) => props.theme.typography.size.xSmall};
-		font-weight: ${(props) => props.theme.typography.weight.medium};
+		background: ${(props) => props.theme.colors.warning};
+		color: ${(props) => props.theme.colors.font.light1};
+		font-size: ${(props) => props.theme.typography.size.xxSmall};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
+		border-radius: ${STYLING.dimensions.radius.alt2};
+		text-align: right;
 		display: block;
+		padding: 2.5px 12.5px;
 		margin: 0 0 5px 0;
 	}
 `;

src/helpers/config.ts

@@ -292,6 +292,8 @@ export const UPLOAD_CONFIG = {
 	chunkSize: 7500000,
 };
 
+export const MAX_UPLOAD_SIZE = 10000000;
+
 export const UPLOAD_STEPS: UploadStepType[] = ['details', 'license', 'checks'];
 
 export const DEFAULT_ASSET_TOPICS = [
@@ -328,6 +330,7 @@ export const REDIRECTS = {
 		profile: (id: string) => `https://ao-bazar.arweave.dev/#/profile/${id}`,
 	},
 	udl: 'https://udlicense.arweave.dev/',
+	arconnect: `https://arconnect.io`,
 };
 
 export const DRE_NODE = 'https://dre-u.warp.cc/contract';

src/helpers/language.ts

@@ -1,3 +1,6 @@
+import { MAX_UPLOAD_SIZE } from './config';
+import { getByteSizeDisplay } from './utils';
+
 export const language = {
 	en: {
 		about: `About`,
@@ -82,6 +85,7 @@ export const language = {
 		existingAssets: `Existing`,
 		fetch: `Fetch`,
 		fetching: `Fetching`,
+		fileExceedsLimit: `One or more files exceeds max ${getByteSizeDisplay(MAX_UPLOAD_SIZE)}`,
 		fileName: `Filename`,
 		filesSelected: `Files selected`,
 		follow: `Follow`,
@@ -195,6 +199,7 @@ export const language = {
 		profileCreatingInfo: `Creating profile`,
 		profileExists: `Profile Exists`,
 		profileExistsInfo: `It looks like you already have an account ! You can visit your profile directly by clicking View profile below.`,
+		profileRequired: `A profile is required for upload`,
 		profileUpdated: `Profile updated`,
 		profileUpdatedInfo: `Your profile has been updated.`,
 		readDocs: `Read docs`,
@@ -223,7 +228,9 @@ export const language = {
 		stamped: `Stamped`,
 		submit: `Submit`,
 		successfullyFunded: `Successfully funded`,
-		supportedFileTypes: `Any file type is supported for upload. The current upload size limit per file is 1 GB.`,
+		supportedFileTypes: `Any file type is supported for upload. The current upload size limit per file is ${getByteSizeDisplay(
+			MAX_UPLOAD_SIZE
+		)}.`,
 		terms: `Terms`,
 		title: `Title`,
 		titleNotFound: `Title not found`,
@@ -246,7 +253,7 @@ export const language = {
 		uploadAvatar: `Upload avatar`,
 		uploadCost: `Upload cost`,
 		uploadBanner: `Upload banner`,
-		uploadConnectionRequired: `Wallet connection required to upload`,
+		uploadConnectionRequired: `Wallet connection required for upload`,
 		uploadChecksCostInfo: `Select files to upload to determine total upload cost`,
 		uploadChecksCostTurboInfo: `Select Fetch to view your turbo balance`,
 		uploadFiles: `Upload files`,

src/helpers/utils.ts

@@ -99,11 +99,24 @@ export function getCreatorLabel(creator: ProfileType) {
 	else return formatAddress(creator.walletAddress, false);
 }
 
-export function getByteSize(bytes: number) {
+export function getByteSize(input: string | Buffer): number {
+	let sizeInBytes: number;
+	if (Buffer.isBuffer(input)) {
+		sizeInBytes = input.length;
+	} else if (typeof input === 'string') {
+		sizeInBytes = Buffer.byteLength(input, 'utf-8');
+	} else {
+		throw new Error('Input must be a string or a Buffer');
+	}
+
+	return sizeInBytes;
+}
+
+export function getByteSizeDisplay(bytes: number) {
 	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 	if (bytes === 0) return '0 Bytes';
-	const i = Math.floor(Math.log(bytes) / Math.log(1024));
-	return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
+	const i = Math.floor(Math.log(bytes) / Math.log(1000));
+	return bytes / Math.pow(1000, i) + ' ' + sizes[i];
 }
 
 export function formatTime(time: number) {

src/providers/ArweaveProvider.tsx

@@ -8,7 +8,7 @@ import { ArconnectSigner } from 'arbundles';
 import { getProfileByWalletAddress, readHandler } from 'api';
 
 import { Modal } from 'components/molecules/Modal';
-import { AO, API_CONFIG, AR_WALLETS, GATEWAYS, WALLET_PERMISSIONS } from 'helpers/config';
+import { AO, API_CONFIG, AR_WALLETS, GATEWAYS, REDIRECTS, WALLET_PERMISSIONS } from 'helpers/config';
 import { getARBalanceEndpoint, getTurboBalanceEndpoint } from 'helpers/endpoints';
 import { ProfileHeaderType, WalletEnum } from 'helpers/types';
 import { getARAmountFromWinc } from 'helpers/utils';
@@ -76,6 +76,14 @@ function WalletList(props: { handleConnect: any }) {
 					<span>{wallet.type.charAt(0).toUpperCase() + wallet.type.slice(1)}</span>
 				</S.WalletListItem>
 			))}
+			<S.WalletLink>
+				<span>
+					Don't have an Arweave Wallet? You can create one{' '}
+					<a href={REDIRECTS.arconnect} target={'_blank'}>
+						here.
+					</a>
+				</span>
+			</S.WalletLink>
 		</S.WalletListContainer>
 	);
 }

src/providers/styles.ts

@@ -4,7 +4,7 @@ export const WalletListContainer = styled.div`
 	height: 100%;
 	width: 100%;
 	display: flex;
-	padding: 20px 0 0 0;
+	padding: 10px 0 0 0;
 	flex-direction: column;
 `;
 
@@ -24,8 +24,22 @@ export const WalletListItem = styled.button`
 		margin: 0 15px 0 0;
 	}
 	span {
-		color: ${(props) => props.theme.colors.font.primary};
+		color: ${(props) => props.theme.colors.font.alt1};
 		font-size: ${(props) => props.theme.typography.size.base};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
+		font-family: ${(props) => props.theme.typography.family.alt1};
+	}
+`;
+
+export const WalletLink = styled.div`
+	margin: 0 0 20px 0;
+	padding: 0 20px;
+	a,
+	span {
+		font-size: ${(props) => props.theme.typography.size.small};
+		font-weight: ${(props) => props.theme.typography.weight.medium};
+	}
+	span {
+		color: ${(props) => props.theme.colors.font.alt1};
 	}
 `;

src/views/Upload/UploadAssets/UploadAssets.tsx

@@ -9,10 +9,10 @@ import { TextArea } from 'components/atoms/TextArea';
 import { Modal } from 'components/molecules/Modal';
 import { Table } from 'components/molecules/Table';
 import { TurboBalanceFund } from 'components/molecules/TurboBalanceFund';
-import { ALLOWED_ASSET_TYPES, ASSETS } from 'helpers/config';
+import { ALLOWED_ASSET_TYPES, ASSETS, MAX_UPLOAD_SIZE } from 'helpers/config';
 import { getTurboCostWincEndpoint } from 'helpers/endpoints';
 import { ActiveFieldAddType, AlignType, FileMetadataType, SequenceType } from 'helpers/types';
-import { formatTurboAmount, getARAmountFromWinc, stripFileExtension } from 'helpers/utils';
+import { formatTurboAmount, getARAmountFromWinc, getByteSizeDisplay, stripFileExtension } from 'helpers/utils';
 import { useArweaveProvider } from 'providers/ArweaveProvider';
 import { useLanguageProvider } from 'providers/LanguageProvider';
 import { RootState } from 'store';
@@ -314,9 +314,14 @@ export default function UploadAssets() {
 				const index = uploadReducer.data.contentList.findIndex(
 					(currentData: FileMetadataType) => currentData.file.name === data.file.name
 				);
+
+				const invalid = data.file.size > MAX_UPLOAD_SIZE;
+				let name = data.title ? data.title : stripFileExtension(data.file.name);
+				if (invalid) name += ` (File exceeds max ${getByteSizeDisplay(MAX_UPLOAD_SIZE)})`;
+
 				return {
 					data: {
-						fileName: data.title ? data.title : stripFileExtension(data.file.name),
+						fileName: name,
 						description: (
 							<S.DDataWrapper>
 								<p>{`[ ${data.description ? '✓' : 'x'} ]`}</p>

src/views/Upload/UploadSteps/UploadSteps.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Button } from 'components/atoms/Button';
-import { UPLOAD_STEPS } from 'helpers/config';
+import { MAX_UPLOAD_SIZE, UPLOAD_STEPS } from 'helpers/config';
 import { UploadStepType } from 'helpers/types';
 import { useArweaveProvider } from 'providers/ArweaveProvider';
 import { useLanguageProvider } from 'providers/LanguageProvider';
@@ -113,6 +113,13 @@ export default function UploadSteps(props: IProps) {
 		}
 	}
 
+	function getDataSizeMessage() {
+		for (const element of uploadReducer.data.contentList) {
+			if (element.file.size > MAX_UPLOAD_SIZE) return <span>{language.fileExceedsLimit}</span>;
+		}
+		return null;
+	}
+
 	return (
 		<S.Wrapper ref={scrollRef}>
 			<S.PWrapper>
@@ -140,7 +147,9 @@ export default function UploadSteps(props: IProps) {
 					<span>{language.arweaveAppUploadBlocked}</span>
 				)}
 				{!arProvider.wallet && <span>{language.uploadConnectionRequired}</span>}
+				{arProvider.profile && !arProvider.profile.id && <span>{language.profileRequired}</span>}
 				{getBalanceMessage()}
+				{getDataSizeMessage()}
 				{uploadReducer.data.contentList &&
 					uploadReducer.data.idList &&
 					uploadReducer.data.contentList.length + uploadReducer.data.idList.length <= 0 &&

src/views/Upload/UploadSteps/UploadStepsLicense/UploadStepsLicense.tsx

@@ -88,8 +88,8 @@ export default function UploadStepsLicense() {
 				};
 
 				license.accessFee = {
-					value: concatLicenseTag(licenseParams.access.options.oneTime),
-					amount: licenseAmount.toString(),
+					value: licenseParams.access.options.none,
+					amount: '0',
 				};
 
 				license.dataModelTraining = {

src/views/Upload/UploadSteps/styles.ts

@@ -37,11 +37,14 @@ export const MWrapper = styled.div`
 	width: fit-content;
 	margin: 20px 0 0 auto;
 	span {
-		color: ${(props) => props.theme.colors.warning};
-		font-size: ${(props) => props.theme.typography.size.xSmall};
-		font-weight: ${(props) => props.theme.typography.weight.medium};
+		background: ${(props) => props.theme.colors.warning};
+		color: ${(props) => props.theme.colors.font.light1};
+		font-size: ${(props) => props.theme.typography.size.xxSmall};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
+		border-radius: ${STYLING.dimensions.radius.alt2};
 		text-align: right;
 		display: block;
-		margin: 0 0 5px 0;
+		padding: 2.5px 12.5px;
+		margin: 0 0 7.5px 0;
 	}
 `;

src/views/Upload/index.tsx

@@ -11,7 +11,7 @@ import { Loader } from 'components/atoms/Loader';
 import { Modal } from 'components/molecules/Modal';
 import { AssetsTable } from 'components/organisms/AssetsTable';
 import {
-	AOS,
+	AO,
 	CONTENT_TYPES,
 	DEFAULT_UCM_BANNER,
 	DEFAULT_UCM_THUMBNAIL,
@@ -127,14 +127,15 @@ export default function Upload() {
 						if (assetIds.length > 0) {
 							setAssetsResponse(`${language.assetsCreated}!`);
 						} else {
-							setAssetsResponse(`${language.errorOccurred}`);
+							setAssetsResponseError(`${language.errorOccurred}`);
 						}
 					} catch (e: any) {
 						console.error(e);
-						setAssetsResponse(e.message ?? 'Error occurred');
+						setAssetsResponseError(e.message ?? 'Error occurred');
 					}
 					break;
 			}
+
 			dispatch(uploadActions.setUploadActive(false));
 			dispatch(uploadActions.clearUpload());
 			setUploadPercentage(0);