profile asset removal

src/components/organisms/AssetsTable/AssetsTable.tsx

@@ -3,11 +3,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { ReactSVG } from 'react-svg';
 
+import { messageResult } from 'api';
 import { getAssetIdsByUser, getGQLData } from 'gql';
 
 import { Button } from 'components/atoms/Button';
 import { Checkbox } from 'components/atoms/Checkbox';
+import { IconButton } from 'components/atoms/IconButton';
 import { Loader } from 'components/atoms/Loader';
+import { Notification } from 'components/atoms/Notification';
 import { Table } from 'components/molecules/Table';
 import { ASSETS, GATEWAYS, PAGINATORS, REDIRECTS, STORAGE, TAGS, URLS } from 'helpers/config';
 import { AlignType, CursorEnum, GQLNodeResponseType, GroupIndexType } from 'helpers/types';
@@ -16,10 +19,72 @@ import { useArweaveProvider } from 'providers/ArweaveProvider';
 import { useLanguageProvider } from 'providers/LanguageProvider';
 import { RootState } from 'store';
 import * as uploadActions from 'store/upload/actions';
+import { CloseHandler } from 'wrappers/CloseHandler';
 
 import * as S from './styles';
 
-export default function AssetsTable(props: { useIdAction: boolean }) {
+function AssetDropdown(props: { id: string; title: string; handleToggleUpdate: () => void }) {
+	const arProvider = useArweaveProvider();
+
+	const languageProvider = useLanguageProvider();
+	const language = languageProvider.object[languageProvider.current];
+
+	const [open, setOpen] = React.useState<boolean>(false);
+
+	const [loading, setLoading] = React.useState<boolean>(false);
+	const [response, setResponse] = React.useState<string>(null);
+
+	async function handleRemoveAsset() {
+		if (arProvider.walletAddress && arProvider.profile && arProvider.profile.id) {
+			setLoading(true);
+			try {
+				await messageResult({
+					processId: arProvider.profile.id,
+					wallet: arProvider.wallet,
+					action: 'Eval',
+					tags: [],
+					data: `table.remove(Assets, (function() for i, v in ipairs(Assets) do if v.Id == '${props.id}' then return i end end end)())`,
+					useRawData: true,
+				});
+
+				setResponse(`${language.assetRemoved}!`);
+				setOpen(false);
+
+				await new Promise((resolve) => setTimeout(resolve, 1000));
+				props.handleToggleUpdate();
+			} catch (e: any) {
+				console.error(e);
+				setResponse(language.errorOccurred);
+			}
+			setLoading(false);
+		}
+	}
+
+	return (
+		<>
+			<CloseHandler active={open} disabled={!open} callback={() => setOpen(false)}>
+				<S.DWrapper>
+					<IconButton
+						type={'primary'}
+						src={ASSETS.actionMenu}
+						handlePress={() => setOpen(!open)}
+						dimensions={{ wrapper: 27.5, icon: 18.5 }}
+					/>
+					{open && (
+						<S.DDropdown className={'border-wrapper-primary'} open={open}>
+							<S.LI onClick={handleRemoveAsset} disabled={loading}>
+								{response ? response : loading ? `${language.loading}...` : language.removeAsset}
+							</S.LI>
+						</S.DDropdown>
+					)}
+				</S.DWrapper>
+			</CloseHandler>
+			{response && <Notification message={response} callback={() => setResponse(null)} />}
+		</>
+	);
+}
+
+export default function AssetsTable(props: { useIdAction: boolean; useActions: boolean }) {
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
 
@@ -41,6 +106,8 @@ export default function AssetsTable(props: { useIdAction: boolean }) {
 	const [currentTableCursor, setCurrentTableCursor] = React.useState<string | null>(null);
 	const [currentRecords, setCurrentRecords] = React.useState<GQLNodeResponseType[] | null>(null);
 
+	const [toggleUpdate, setToggleUpdate] = React.useState<boolean>(false);
+
 	const lastRecordIndex = 1 * recordsPerPage;
 	const firstRecordIndex = lastRecordIndex - recordsPerPage;
 
@@ -94,7 +161,7 @@ export default function AssetsTable(props: { useIdAction: boolean }) {
 				}
 			}
 		})();
-	}, [arProvider.walletAddress, uploadReducer.uploadActive]);
+	}, [arProvider.walletAddress, uploadReducer.uploadActive, toggleUpdate]);
 
 	React.useEffect(() => {
 		(async function () {
@@ -197,6 +264,14 @@ export default function AssetsTable(props: { useIdAction: boolean }) {
 			};
 		}
 
+		if (props.useActions) {
+			header.actions = {
+				width: '15%',
+				align: 'center' as AlignType,
+				display: language.actions,
+			};
+		}
+
 		return header;
 	}
 
@@ -228,6 +303,16 @@ export default function AssetsTable(props: { useIdAction: boolean }) {
 					);
 				}
 
+				if (props.useActions) {
+					data.actions = (
+						<AssetDropdown
+							id={element.node.id}
+							title={displayTitle}
+							handleToggleUpdate={() => setToggleUpdate(!toggleUpdate)}
+						/>
+					);
+				}
+
 				return {
 					data: data,
 					active: false,

src/components/organisms/AssetsTable/styles.ts

@@ -105,3 +105,38 @@ export const EmptyLogo = styled.div`
 		border-radius: 50%;
 	}
 `;
+
+export const DWrapper = styled.div`
+	height: fit-content;
+	width: fit-content;
+	position: relative;
+	margin: 5px auto 0 auto;
+`;
+
+export const DDropdown = styled.ul<{ open: boolean }>`
+	width: 225px;
+	padding: 10px 0;
+	display: ${(props) => (props.open ? 'block' : 'none')};
+	position: absolute;
+	top: 26.5px;
+	right: 15%;
+	z-index: 1;
+`;
+
+export const LI = styled.li<{ disabled: boolean }>`
+	pointer-events: ${(props) => (props.disabled ? 'none' : 'default')};
+	text-align: center;
+	height: 32.5px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	color: ${(props) => (props.disabled ? props.theme.colors.font.alt1 : props.theme.colors.font.primary)};
+	font-size: ${(props) => props.theme.typography.size.xSmall};
+	font-weight: ${(props) => props.theme.typography.weight.bold};
+	background: ${(props) => (props.disabled ? props.theme.colors.container.primary.active : 'transparent')};
+	padding: 0 15px;
+	&:hover {
+		background: ${(props) =>
+			props.disabled ? props.theme.colors.container.primary.active : props.theme.colors.container.primary.active};
+	}
+`;

src/helpers/config.ts

@@ -327,9 +327,9 @@ export const CURRENCIES = {
 
 export const REDIRECTS = {
 	bazar: {
-		asset: (id: string) => `https://ao-bazar.arweave.net/#/asset/${id}`,
-		collection: (id: string) => `https://ao-bazar.arweave.net/#/collection/${id}`,
-		profile: (id: string) => `https://ao-bazar.arweave.net/#/profile/${id}`,
+		asset: (id: string) => `https://bazar.arweave.net/#/asset/${id}`,
+		collection: (id: string) => `https://bazar.arweave.net/#/collection/${id}`,
+		profile: (id: string) => `https://bazar.arweave.net/#/profile/${id}`,
 	},
 	udl: 'https://udlicense.arweave.net/',
 	arconnect: `https://arconnect.io`,

src/helpers/language.ts

@@ -10,6 +10,7 @@ export const language = {
 		amount: `Amount`,
 		arBalance: `AR Balance`,
 		arweaveAppUploadBlocked: `Arweave.app is not supported for upload`,
+		assetRemoved: `Asset removed`,
 		assets: `Assets`,
 		assetsCreated: `Assets created`,
 		assetsCreatedInfo: `Your assets have been created. You will now be able to view them from your profile.`,
@@ -206,6 +207,7 @@ export const language = {
 		readDocs: `Read docs`,
 		recipient: `Recipient`,
 		remove: `Remove`,
+		removeAsset: `Remove asset`,
 		removeAvatar: `Remove avatar`,
 		removeBanner: `Remove banner`,
 		removeFile: `Remove file`,

src/helpers/themes.ts

@@ -221,7 +221,7 @@ export const theme = (currentTheme: any): DefaultTheme => ({
 			},
 		},
 		indicator: {
-			active: currentTheme.primary2,
+			primary: currentTheme.primary2,
 		},
 		link: {
 			color: currentTheme.neutralA1,

src/views/Landing/Profile/Profile.tsx

@@ -145,7 +145,7 @@ export default function Profile(props: { address: string }) {
 							{fullProfile && fullProfile.id ? (
 								<>
 									<S.TWrapper>
-										<AssetsTable useIdAction={false} />
+										<AssetsTable useIdAction={false} useActions={true} />
 									</S.TWrapper>
 									<S.TWrapper>
 										<CollectionsTable />

src/views/Upload/UploadSteps/UploadStepsProgress/styles.ts

@@ -26,7 +26,7 @@ export const Step = styled.div<{ active: boolean; completed: boolean }>`
 	position: relative;
 	span {
 		color: ${(props) =>
-			props.active || props.completed ? props.theme.colors.indicator.active : props.theme.colors.font.alt1};
+			props.active || props.completed ? props.theme.colors.indicator.primary : props.theme.colors.font.alt1};
 		font-size: ${(props) => props.theme.typography.size.xSmall};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
 		display: block;
@@ -39,10 +39,10 @@ export const SIndicator = styled.div<{ active: boolean; completed: boolean }>`
 	height: 20px;
 	width: 20px;
 	background: ${(props) =>
-		props.completed ? props.theme.colors.indicator.active : props.theme.colors.container.primary.background};
+		props.completed ? props.theme.colors.indicator.primary : props.theme.colors.container.primary.background};
 	border: 2.5px solid
 		${(props) =>
-			props.active || props.completed ? props.theme.colors.indicator.active : props.theme.colors.border.alt3};
+			props.active || props.completed ? props.theme.colors.indicator.primary : props.theme.colors.border.alt3};
 	border-radius: 50%;
 	display: flex;
 	justify-content: center;
@@ -58,5 +58,5 @@ export const Line = styled.div<{ completed: boolean }>`
 	height: 2.5px;
 	width: 50%;
 	border-top: 2.5px solid
-		${(props) => (props.completed ? props.theme.colors.indicator.active : props.theme.colors.border.alt3)};
+		${(props) => (props.completed ? props.theme.colors.indicator.primary : props.theme.colors.border.alt3)};
 `;

src/views/Upload/index.tsx

@@ -588,7 +588,7 @@ export default function Upload() {
 						<UploadAssets />
 						{uploadReducer.uploadType === 'collection' && (
 							<S.TWrapper>
-								<AssetsTable useIdAction={true} />
+								<AssetsTable useIdAction={true} useActions={false} />
 							</S.TWrapper>
 						)}
 					</S.UWrapper>