othent / catch upload errors

.eslintrc.js

@@ -16,7 +16,16 @@ module.exports = {
 					{
 						groups: [
 							['^react', '^@?\\w'],
-							['^arweave', 'arbundles', '@irys/sdk', '^warp', '^permaweb-orderbook', '^@permaweb/stampjs', '^@?\\w'],
+							[
+								'^arweave',
+								'arbundles',
+								'@irys/sdk',
+								'^warp',
+								'^permaweb-orderbook',
+								'^permaweb-sdk',
+								'^@permaweb/stampjs',
+								'^@?\\w',
+							],
 							['^(@|api)(/.*|$)', '^(@|gql)(/.*|$)'],
 							[
 								'^(@|app)(/.*|$)',

.gitignore

@@ -1,6 +1,7 @@
 **node_modules**
 **dist**
 **package-lock.json**
+**yarn.lock**
 **dist**
 **cache**
 **logs**

package.json

@@ -24,6 +24,7 @@
 		"arbundles": "^0.10.1",
 		"arweave-wallet-connector": "^1.0.2",
 		"permaweb-orderbook": "^1.6.52",
+		"permaweb-sdk": "git+ssh://git@github.com:permaweb/permaweb-sdk.git#a0b2eadc5948084137642bf9fa9a931c2e895d01",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-redux": "^7.2.9",
@@ -34,6 +35,7 @@
 		"redux-thunk": "^2.4.2",
 		"styled-components": "^5.3.6",
 		"timers-browserify": "^2.0.12",
+		"typescript": "^5.3.3",
 		"warp-contracts": "1.4.26",
 		"warp-contracts-plugin-deploy": "1.0.8",
 		"warp-contracts-plugin-signature": "1.0.15-beta.1"

src/helpers/config.ts

@@ -23,6 +23,7 @@ import logo from 'assets/logo.svg';
 import menu from 'assets/menu.svg';
 import miniPlayerActive from 'assets/miniplayer-active.svg';
 import miniPlayerInactive from 'assets/miniplayer-inactive.svg';
+import othent from 'assets/othent.svg';
 import pause from 'assets/pause.svg';
 import play from 'assets/play.svg';
 import search from 'assets/search.svg';
@@ -84,6 +85,7 @@ export const ASSETS = {
 	wallets: {
 		arconnect: arconnect,
 		arweaveApp: arweaveApp,
+		othent: othent,
 	},
 	x: x,
 };
@@ -141,7 +143,7 @@ export const TAGS = {
 			'{"evaluationOptions":{"sourceType":"redstone-sequencer","allowBigInt":true,"internalWrites":true,"unsafeClient":"skip","useConstructor":true}}',
 		document: 'Document',
 		followDataProtocol: 'Follow',
-		license: 'yRj4a5KMctX_uOmKWCFJIjmY8DeJcusVk6-HzLiM_t8',
+		license: 'dE0rmDfl9_OWjkDznNEXHaSO_JohJkRolvMzaCroUdw',
 		profileVersions: {
 			'1': 'Account-0.3',
 		},
@@ -234,7 +236,10 @@ export const CONTENT_TYPES = {
 	textPlain: 'text/plain',
 };
 
-export const AR_WALLETS = [{ type: WalletEnum.arConnect, logo: ASSETS.wallets.arconnect }];
+export const AR_WALLETS = [
+	{ type: WalletEnum.arConnect, logo: ASSETS.wallets.arconnect },
+	{ type: WalletEnum.othent, logo: ASSETS.wallets.othent },
+];
 
 export const WALLET_PERMISSIONS = ['ACCESS_ADDRESS', 'ACCESS_PUBLIC_KEY', 'SIGN_TRANSACTION', 'DISPATCH', 'SIGNATURE'];
 

src/helpers/types.ts

@@ -132,6 +132,7 @@ export type FullProfileType = ProfileType & {
 export enum WalletEnum {
 	arConnect = 'arconnect',
 	arweaveApp = 'arweave.app',
+	othent = 'othent',
 }
 
 export type TagType = { name: string; value: string };

src/providers/ArweaveProvider.tsx

@@ -5,6 +5,7 @@ import Arweave from 'arweave';
 import { bufferTob64Url } from 'arweave/node/lib/utils.js';
 import { ArweaveWebWallet } from 'arweave-wallet-connector';
 import { ArconnectSigner } from 'arbundles';
+import { Othent } from 'permaweb-sdk/dist/helpers/wallet';
 
 import { getCurrentProfile } from 'gql';
 
@@ -84,6 +85,67 @@ export function ArweaveProvider(props: ArweaveProviderProps) {
 	const [turboBalance, setTurboBalance] = React.useState<number | string | null>(null);
 	const [profile, setProfile] = React.useState<ProfileType | null>(null);
 
+	React.useEffect(() => {
+		(async function () {
+			if (localStorage.getItem('walletType')) {
+				try {
+					await handleConnect(localStorage.getItem('walletType') as any);
+				} catch (e: any) {
+					console.error(e);
+				}
+			}
+		})();
+	}, []);
+
+	React.useEffect(() => {
+		(async function () {
+			if (walletAddress) {
+				try {
+					setAvailableBalance(await getARBalance(walletAddress));
+				} catch (e: any) {
+					console.error(e);
+				}
+			}
+		})();
+	}, [walletAddress]);
+
+	React.useEffect(() => {
+		(async function () {
+			if (wallet && walletAddress) {
+				try {
+					setProfile(await getCurrentProfile({ address: walletAddress }));
+				} catch (e: any) {
+					console.error(e);
+				}
+			}
+		})();
+	}, [wallet, walletAddress, walletType]);
+
+	async function handleConnect(walletType: WalletEnum.arConnect | WalletEnum.othent | WalletEnum.arweaveApp) {
+		let walletObj: any = null;
+		switch (walletType) {
+			case WalletEnum.arConnect:
+				handleArConnect();
+				break;
+			case WalletEnum.othent:
+				handleOthent();
+				break;
+			case WalletEnum.arweaveApp:
+				handleArweaveApp();
+				break;
+			default:
+				if (window.arweaveWallet || walletType === WalletEnum.arConnect) {
+					handleArConnect();
+					break;
+				} else {
+					handleArweaveApp();
+					break;
+				}
+		}
+		setWalletModalVisible(false);
+		return walletObj;
+	}
+
 	async function handleArConnect() {
 		if (!walletAddress) {
 			if (window.arweaveWallet) {
@@ -93,6 +155,7 @@ export function ArweaveProvider(props: ArweaveProviderProps) {
 					setWallet(window.arweaveWallet);
 					setWalletType(WalletEnum.arConnect);
 					setWalletModalVisible(false);
+					localStorage.setItem('walletType', WalletEnum.arConnect);
 				} catch (e: any) {
 					alert(e);
 				}
@@ -102,6 +165,16 @@ export function ArweaveProvider(props: ArweaveProviderProps) {
 		}
 	}
 
+	async function handleOthent() {
+		Othent.init();
+		// @ts-ignore -- othent ignores permissions, so no point passing in
+		await window.arweaveWallet.connect();
+		setWallet(window.arweaveWallet);
+		setWalletAddress(Othent.getUserInfo().walletAddress);
+		setWalletType(WalletEnum.othent);
+		localStorage.setItem('walletType', WalletEnum.othent);
+	}
+
 	async function handleArweaveApp() {
 		const wallet = new ArweaveWebWallet({
 			name: APP.name,
@@ -114,35 +187,15 @@ export function ArweaveProvider(props: ArweaveProviderProps) {
 		});
 		setWallet(wallet);
 		setWalletType(WalletEnum.arweaveApp);
-	}
-
-	async function handleConnect(walletType: WalletEnum.arConnect | WalletEnum.arweaveApp) {
-		let walletObj: any = null;
-		switch (walletType) {
-			case WalletEnum.arConnect:
-				handleArConnect();
-				break;
-			case WalletEnum.arweaveApp:
-				handleArweaveApp();
-				break;
-			default:
-				if (window.arweaveWallet || walletType === WalletEnum.arConnect) {
-					handleArConnect();
-					break;
-				} else {
-					handleArweaveApp();
-					break;
-				}
-		}
-		setWalletModalVisible(false);
-		return walletObj;
+		localStorage.setItem('walletType', WalletEnum.arweaveApp);
 	}
 
 	async function handleDisconnect() {
 		await global.window?.arweaveWallet?.disconnect();
 		setWallet(null);
 		setWalletAddress(null);
 		setProfile(null);
+		if (localStorage.getItem('walletType')) localStorage.removeItem('walletType');
 	}
 
 	async function getARBalance(walletAddress: string) {
@@ -191,44 +244,6 @@ export function ArweaveProvider(props: ArweaveProviderProps) {
 		}
 	}
 
-	React.useEffect(() => {
-		async function handleWallet() {
-			let walletAddress: string | null = null;
-			try {
-				walletAddress = await global.window.arweaveWallet.getActiveAddress();
-
-				if (walletType !== WalletEnum.arweaveApp) {
-					setWalletType(WalletEnum.arConnect);
-					setWallet(window.arweaveWallet);
-				}
-			} catch {}
-			if (walletAddress) {
-				setWalletAddress(walletAddress as any);
-				setAvailableBalance(await getARBalance(walletAddress));
-			}
-		}
-
-		handleWallet();
-
-		window.addEventListener('arweaveWalletLoaded', handleWallet);
-
-		return () => {
-			window.removeEventListener('arweaveWalletLoaded', handleWallet);
-		};
-	}, [walletType]);
-
-	React.useEffect(() => {
-		(async function () {
-			if (wallet && walletAddress) {
-				try {
-					setProfile(await getCurrentProfile({ address: walletAddress }));
-				} catch (e: any) {
-					console.error(e);
-				}
-			}
-		})();
-	}, [wallet, walletAddress, walletType]);
-
 	return (
 		<>
 			{walletModalVisible && (

src/views/Landing/Profile/Profile.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { ReactSVG } from 'react-svg';
 
-import { getFullProfile } from 'gql';
+import { getFullProfile } from 'permaweb-sdk/dist/gql';
+import { FullProfileType } from 'permaweb-sdk/dist/helpers/types';
 
 import { Button } from 'components/atoms/Button';
 import { Loader } from 'components/atoms/Loader';
 import { AssetsTable } from 'components/organisms/AssetsTable';
 import { CollectionsTable } from 'components/organisms/CollectionsTable';
 import { ASSETS, REDIRECTS } from 'helpers/config';
 import { getTxEndpoint } from 'helpers/endpoints';
-import { FullProfileType } from 'helpers/types';
 import { checkAddress, formatAddress } from 'helpers/utils';
 import { useLanguageProvider } from 'providers/LanguageProvider';
 
@@ -61,7 +61,7 @@ export default function Profile(props: { address: string }) {
 	function getHeaderDetails() {
 		return (
 			<S.HeaderHA>
-				<h4>{fullProfile.channelTitle ? fullProfile.channelTitle : formatAddress(fullProfile.walletAddress, false)}</h4>
+				<h4>{fullProfile.displayName ? fullProfile.displayName : formatAddress(fullProfile.walletAddress, false)}</h4>
 				<S.HeaderInfoDetail>
 					<span>{`${getHandle()}`}</span>
 				</S.HeaderInfoDetail>

src/views/Landing/Profile/styles.ts

@@ -126,7 +126,7 @@ export const HeaderAddress = styled.button`
 	svg {
 		width: 15px;
 		fill: ${(props) => props.theme.colors.font.primary};
-		margin: 5px 0 0 0;
+		margin: 2.5px 0 0 0;
 	}
 	&:hover {
 		opacity: 0.75;

src/views/Upload/index.tsx

@@ -267,26 +267,29 @@ export default function Upload() {
 					if (contractResponse) uploadedAssetsList.push(contractResponse);
 					if (index < uploadReducer.data.contentList.length) setUploadPercentage(0);
 				} catch (e: any) {
-					console.error(e);
+					console.error(e.message);
+					setAssetsResponseError(e.message);
+					setUploadPercentage(0);
+					dispatch(uploadActions.clearUpload());
 				}
 			}
 
-			switch (uploadReducer.uploadType) {
-				case 'collection':
-					try {
-						await handleUploadCollection(uploadedAssetsList);
-					} catch (e: any) {
-						console.error(e);
-					}
-					break;
-				case 'assets':
-					if (uploadedAssetsList.length) {
+			if (uploadedAssetsList.length) {
+				switch (uploadReducer.uploadType) {
+					case 'collection':
+						try {
+							await handleUploadCollection(uploadedAssetsList);
+						} catch (e: any) {
+							console.error(e);
+						}
+						break;
+					case 'assets':
 						setAssetsResponse(`${language.assetsCreated}!`);
 						dispatch(uploadActions.setUploadActive(false));
 						dispatch(uploadActions.clearUpload());
 						setUploadPercentage(0);
-					}
-					break;
+						break;
+				}
 			}
 		}
 	}
@@ -400,7 +403,13 @@ export default function Upload() {
 				<Modal header={assetsResponse ? assetsResponse : language.errorOccurred} handleClose={handleClear}>
 					<S.MWrapper>
 						<S.MInfo>
-							<span>{assetsResponse ? language.assetsCreatedInfo : language.errorOccurred}</span>
+							<span>
+								{assetsResponse
+									? language.assetsCreatedInfo
+									: assetsResponseError
+									? assetsResponseError
+									: language.errorOccurred}
+							</span>
 						</S.MInfo>
 						<S.MActions>
 							<Button type={'primary'} label={language.close} handlePress={handleClear} noMinWidth />

src/wallet/WalletBlock/styles.ts

@@ -15,8 +15,8 @@ export const Wrapper = styled.div`
 	padding: 40px 20px;
 	animation: ${open} ${fadeIn2};
 	p {
-		font-size: ${(props) => props.theme.typography.size.base};
-		font-weight: ${(props) => props.theme.typography.weight.medium};
+		font-size: ${(props) => props.theme.typography.size.small};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
 		text-align: center;
 	}
 	button {