Bundlr Lens Quest

git clone -b framework https://github.com/Bundlr-Network/bundlr-quests
cd bundlr-quests/quest-2-onlybundlr/
npm install

import { WebBundlr } from "@bundlr-network/client";
import { ethers } from "ethers";
 
/**
 * Creates a new Bundlr object that will then be used by other
 * utility functions. This is where you set your node address and currency.
 *
 * @returns A reference to a Bundlr object
 */
export const getBundlr = async () => {
	const provider = new ethers.providers.Web3Provider(window.ethereum);
	const bundlr = new WebBundlr("https://devnet.bundlr.network", "matic", provider);
	await bundlr.ready();
	return bundlr;
};

import { getBundlr } from "./get-bundlr";
 
// gets the loaded balance in MATIC, not atomic units
/**
 * Gets the balance the user has already loaded on the specified
 * Bundlr node. Balance returned is in standard MATIC units, not atomic units.
 *
 * @returns Balance loaded on the node for current user.
 */
export const getBalanceMatic = async () => {
	try {
		// get a reference to the WebBundlr singleton
		const bundlr = await getBundlr();
		const atomicBalance = await bundlr.getLoadedBalance();
		return bundlr.utils.fromAtomic(atomicBalance).toString();
	} catch (e) {
		console.log("Error on getBalanceMatic ", e);
	}
	return "";
};

import { getBundlr } from "./get-bundlr";
 
/**
 * Funds a Bundlr node the specified amount.
 * Note: The currency (token) used is the currency specified when
 * creating the Bundlr object in the file `get-bundlr.js`.
 *
 * @param {*} fundAmount About to fund, value in standard units. Value will automatically
 * be coverted to atomic units.
 * @returns "Node funded" if successful or an error message.
 */
export const fundNode = async (fundAmount) => {
	try {
		// get a refernce to the WebBundlr singleton
		const bundlr = await getBundlr();
 
		const fundAmountAtomic = bundlr.utils.toAtomic(fundAmount);
		const tx = await bundlr.fund(fundAmountAtomic);
		return "Node funded";
	} catch (e) {
		console.log("Error on fund ", e);
		return "Error on fund: " + e;
	}
	return "";
};

import fileReaderStream from "filereader-stream";
import { getBundlr } from "./get-bundlr";
 
/**
 * Uploads an image to Bundlr.
 *
 * @param {*} fileToUpload The file to be uploaded.
 * @param {*} fileType The mime-type of the file to be uploaded.
 * @returns
 */
export const uploadImage = async (fileToUpload, fileType) => {
	// Get a refernce to the WebBundlr singleton
	const bundlr = await getBundlr();
 
	try {
		// Convert to a data stream
		const dataStream = fileReaderStream(fileToUpload);
		// Get the const to upload
		const price = await bundlr.getPrice(fileToUpload.size);
		// Get the amount currently funded for this user on a Bundlr node
		const balance = await bundlr.getLoadedBalance();
 
		// Only fund if needed
		if (price.isGreaterThanOrEqualTo(balance)) {
			console.log("Funding node.");
			await bundlr.fund(price);
		} else {
			console.log("Funding not needed, balance sufficient.");
		}
 
		const tx = await bundlr.upload(dataStream, {
			tags: [{ name: "Content-Type", value: fileType }],
		});
 
		console.log(`File uploaded ==> https://arweave.net/${tx.id}`);
 
		return "https://arweave.net/" + tx.id;
	} catch (e) {
		console.log("Error on upload, ", e);
	}
};

import { getBundlr } from "./get-bundlr";
 
// called to upload metadata to Bundlr, which is then passed on to Lens
/**
 * Function to upload metadata to Bundlr. The function signature is defined
 * by Lens. The Lens React hooks automatically generate metadata, which
 * is passed to this function for upload. This function then returns an URL
 * to the uploaded metadata which is automatically posted to Lens.
 *
 * @param {*} data Data to be uploaded, JSON formatted metadata
 * @returns A URL to the recently uploaded metadata.
 */
export const upload = async (data) => {
	// Set the app id (helps keep our posts from commingling with posts from other apps).
	data.appId = "onlybundlr";
 
	try {
		const bundlr = await getBundlr();
		const serialized = JSON.stringify(data);
 
		// Only fund if needed.
		const price = await bundlr.getPrice(new Blob([serialized]).size);
		const balance = await bundlr.getLoadedBalance();
 
		if (price.isGreaterThanOrEqualTo(balance)) {
			console.log("Funding.");
			await bundlr.fund(price);
		} else {
			console.log("Funding not needed, balance sufficient.");
		}
 
		const tx = await bundlr.upload(serialized, {
			tags: [{ name: "Content-Type", value: "application/json" }],
		});
 
		console.log(`Upload success content URI= https://arweave.net/${tx.id}`);
 
		return `https://arweave.net/${tx.id}`;
	} catch (e) {
		console.log("Error on upload ", e);
	}
	return "";
};

const lensConfig = {
	bindings: wagmiBindings(),
	environment: staging,
	sources: ["onlybundlr"],
};

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
 
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { polygonMumbai } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { bindings as wagmiBindings } from "@lens-protocol/wagmi";
import { staging, LensProvider } from "@lens-protocol/react-web";
 
import LeftNav from "./components/LeftNav";
import RightNav from "./components/RightNav";
import ContentFeedPage from "./pages/ContentFeedPage";
import ProfileFeedPage from "./pages/ProfileFeedPage";
import EditProfilePage from "./pages/EditProfilePage";
import CreatePublicationPage from "./pages/CreatePublicationPage";
 
const { chains, provider, webSocketProvider } = configureChains(
	[polygonMumbai],
	[publicProvider()],
);
const client = createClient({
	autoConnect: true,
	provider,
	webSocketProvider,
});
 
const lensConfig = {
	bindings: wagmiBindings(),
	environment: staging,
	sources: ["onlybundlr"],
};
 
function App() {
	return (
		<WagmiConfig client={client}>
			<LensProvider config={lensConfig}>
				<div className="flex flex-row">
					<LeftNav />
					<BrowserRouter>
						<Routes>
							<Route path="/" element={<ContentFeedPage />} />
							<Route path="/home" element={<ContentFeedPage />} />
							<Route path="/*" element={<ProfileFeedPage />} />
							<Route path="/edit-profile" element={<EditProfilePage />} />
							<Route
								path="/create-publication"
								element={<CreatePublicationPage />}
							/>
						</Routes>
					</BrowserRouter>
					<RightNav />
				</div>
			</LensProvider>
		</WagmiConfig>
	);
}
 
export default App;

import { useWalletLogin } from "@lens-protocol/react";
import { useAccount, useConnect, useDisconnect } from "wagmi";
import { InjectedConnector } from "wagmi/connectors/injected";
 
const LoginButton = () => {
	const {
		execute: login,
		error: loginError,
		isPending: isLoginPending,
	} = useWalletLogin();
 
	const { isConnected } = useAccount();
	const { disconnectAsync } = useDisconnect();
 
	const { connectAsync } = useConnect({
		connector: new InjectedConnector(),
	});
 
	// Called when the user clicks "login"
	const onLoginClick = async () => {
		if (isConnected) {
			await disconnectAsync();
		}
 
		const { connector } = await connectAsync();
		if (connector instanceof InjectedConnector) {
			const signer = await connector.getSigner();
			await login(signer);
		}
	};
 
	return (
		<div>
			{loginError && <p>{loginError}</p>}
			<button
				className="font-main ml-2 px-5 text-white rounded-lg bg-primary hover:bg-secondary "
				disabled={isLoginPending}
				onClick={onLoginClick}
			>
				login
			</button>
		</div>
	);
};
 
export default LoginButton;

const {
	data: profiles,
	loading: profilesLoading,
	hasMore,
	next,
} = useProfilesOwnedByMe();
const { data: activeProfile, loading: activeProfileLoading } = useActiveProfile();
const { execute: switchProfile, isPending } = useActiveProfileSwitch();

<select
	onChange={(val) => switchProfile(val.target.value)}
	className="font-main text-s px-5 text-white rounded-lg bg-background hover:bg-secondary ml-2"
	value={activeProfile?.id}
>
	{profiles &&
		profiles
			?.filter((a, i) => profiles?.findIndex((s) => a.id === s.id) === i)
			.map((profile) => (
				<option key={profile.id} value={profile.id}>
					{profile.handle}
				</option>
			))}
</select>

import React, { useState, useEffect } from "react";
 
import {
	useActiveProfile,
	useCreateProfile,
	useProfilesOwnedByMe,
	useActiveProfileSwitch,
} from "@lens-protocol/react";
 
const ProfileSwitcher = ({ showCreateNew }) => {
	const [message, setMessage] = useState("");
	const [txActive, setTxActive] = useState(false);
	const [createProfileMode, setCreateProfileMode] = useState(false);
	const [newProfileHandle, setNewProfileHandle] = useState("");
	const {
		data: profiles,
		loading: profilesLoading,
		hasMore,
		next,
	} = useProfilesOwnedByMe();
	const { data: activeProfile, loading: activeProfileLoading } = useActiveProfile();
	const { execute: switchProfile, isPending } = useActiveProfileSwitch();
 
	const {
		execute: createNewProfile,
		error: createNewProfileError,
		isPending: createNewProfilePending,
	} = useCreateProfile();
 
	// Called when the user clicks "save new profile"
	const doCreateProfile = async () => {
		setMessage("");
		setTxActive(true);
		try {
			setMessage("Creating profile ...");
			const tx = await createNewProfile(newProfileHandle);
			setMessage("Profile created.");
		} catch (e) {
			setMessage("Error creating profile " + e);
			console.log("Error on create profile ", e);
		}
		setTxActive(false);
		setCreateProfileMode(false);
	};
 
	useEffect(() => {
		if (!profiles || profiles.length === 0) setCreateProfileMode(true);
		else setCreateProfileMode(false);
	}, [profilesLoading]);
 
	return (
		<div className="w-fit mt-2 flex flex-col bg-primary px-1 py-1 rounded-lg">
			<div className="flex flex-col  w-full">
				<div className="flex flex-row  w-full px-5 py-2 ">
					<label className="font-main block uppercase tracking-wide text-gray-700 text-s font-bold">
						Handle:
					</label>
					{!createProfileMode && (
						<div>
							<select
								onChange={(val) => switchProfile(val.target.value)}
								className="font-main text-s px-5 text-white rounded-lg bg-background hover:bg-secondary ml-2"
								value={activeProfile?.id}
							>
								{profiles &&
									profiles
										?.filter(
											(a, i) =>
												profiles?.findIndex(
													(s) => a.id === s.id,
												) === i,
										)
										.map((profile) => (
											<option key={profile.id} value={profile.id}>
												{profile.handle}
											</option>
										))}
							</select>
							{showCreateNew && (
								<button
									className="ml-10 font-main px-5 text-white rounded-lg bg-background hover:bg-secondary "
									onClick={() => setCreateProfileMode(true)}
								>
									Create New
								</button>
							)}
						</div>
					)}
					{createProfileMode && (
						<div className="flex flex-row">
							<input
								className="bg-white ml-2 appearance-none block rounded focus:outline-none"
								id="newProfileHandle"
								type="text"
								onChange={(e) => setNewProfileHandle(e.target.value)}
							/>
 
							<button
								className="ml-10 font-main px-5 text-white rounded-lg bg-background enabled:hover:bg-secondary border border-red-500"
								disabled={txActive}
								onClick={doCreateProfile}
							>
								save new profile
							</button>
						</div>
					)}
				</div>
				<span className="font-main text-message mr-5 ml-5">{message}</span>
			</div>
		</div>
	);
};
 
export default ProfileSwitcher;

const doFund = async () => {
	if (!fundAmount) {
		setMessage("Please specify an amount to fund");
		return;
	}
	setMessage(`Funding ${fundAmount} MATIC`);
	const fundStatus = await fundNode(fundAmount);
	setMessage(fundStatus);
	setCurBalance(await getBalanceMatic());
	setFundAmount(0);
};

import React, { useState, useEffect } from "react";
import { getBalanceMatic } from "../utils/get-balance-matic";
import { fundNode } from "../utils/fund-node";
 
const BundlrBalance = () => {
	const [curBalance, setCurBalance] = useState(0);
	const [fundAmount, setFundAmount] = useState(0);
	const [message, setMessage] = useState("");
 
	useEffect(() => {
		const fetchBalance = async () => {
			setCurBalance(await getBalanceMatic());
		};
		fetchBalance();
	}, []);
 
	// Called when the "fund" button is clicked by the user
	const doFund = async () => {
		if (!fundAmount) {
			setMessage("Please specify an amount to fund");
			return;
		}
		setMessage(`Funding ${fundAmount} MATIC`);
		const fundStatus = await fundNode(fundAmount);
		setMessage(fundStatus);
		setCurBalance(await getBalanceMatic());
		setFundAmount(0);
	};
 
	return (
		<div className="w-[600px] mt-1 flex flex-col  bg-primary px-1 py-1 rounded-lg ">
			<label className="font-main block uppercase text-xs font-bold mb-2">
				Bundlr Node Balance: {curBalance}
			</label>
 
			<div className="flex flex-row justify-items-center">
				<label className="font-main block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
					Amount To Fund
				</label>
				<input
					className="ml-5 appearance-none block bg-gray-200 text-gray-700 border border-red-500 rounded py-1 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
					id="fundAmount"
					type="number"
					size="10"
					value={fundAmount || ""}
					onChange={(e) => setFundAmount(e.target.value)}
				/>
				<button
					className="ml-4 font-main px-2 h-7 text-white rounded-lg bg-background enabled:hover:bg-secondary border border-red-500"
					onClick={() => doFund()}
				>
					fund
				</button>
			</div>
 
			<span className="font-main text-message mr-5">{message}</span>
		</div>
	);
};
 
export default BundlrBalance;

const {
	execute: update,
	error: updateError,
	isPending: isUpdatePending,
} = useUpdateProfileDetails({ profile, upload });
const {
	execute: updateFollowPolicy,
	isPending: isUpdateFollowPolicyPending,
	error: isUpdateFollowPolicyError,
} = useUpdateFollowPolicy({ profile });

const doUpdateProfile = async () => {
	setMessage("");
	setTxActive(true);
 
	setMessage("Updating profile information ...");
 
	let coverPicture = "";
	if (fileToUpload) {
		setMessage("Uploading cover picture ...");
		coverPicture = await uploadImage(fileToUpload, fileType);
	} else {
		coverPicture = profile.coverPicture?.original.url || null;
	}
	const attributes = {
		location: "",
		website: "",
	};
	setMessage("Uploading profile information ...");
 
	await update({ name, bio, coverPicture, attributes });
	setMessage("Profile updated.");
	setTxActive(false);
 
	// only set the fee if a number greater than 0 is supplied
	if (followFee && followFee > 0) {
		await doUploadFollowPolicy();
	}
};

// Sets up the follow policy object
function resolveFollowPolicy({ followPolicyType, amount, recipient }) {
	if (followPolicyType === FollowPolicyType.CHARGE) {
		return {
			type: FollowPolicyType.CHARGE,
			amount: amount,
			recipient: recipient,
		};
	}
 
	return {
		type: FollowPolicyType[followPolicyType],
	};
}
 
// Sets the fee to follow a profile
const doUploadFollowPolicy = async () => {
	const recipient = profile.ownedBy;
 
	const erc20 = currencies.find((c) => c.symbol === chargeCurrency);
	const fee = Amount.erc20(erc20, followFee);
	await updateFollowPolicy({
		followPolicy: resolveFollowPolicy({
			amount: fee,
			followPolicyType: FollowPolicyType.CHARGE,
			recipient,
		}),
	});
};

import React, { useState, useEffect } from "react";
import { upload } from "../utils/upload";
import { uploadImage } from "../utils/upload-image";
 
import {
	Amount,
	useUpdateProfileDetails,
	useUpdateFollowPolicy,
	useCurrencies,
	FollowPolicyType,
} from "@lens-protocol/react";
 
const EditProfileDetails = ({ profile }) => {
	const [message, setMessage] = useState("");
	const [txActive, setTxActive] = useState(false);
	const [name, setName] = useState("");
	const [bio, setBio] = useState("  ");
	const [followFee, setFollowFee] = useState(0);
	const [chargeCurrency, setChargeCurrency] = useState(0);
	const [fileToUpload, setFileToUpload] = useState();
	const [fileType, setFileType] = useState();
	const {
		data: currencies,
		error: currenciesError,
		loading: currenciesLoading,
	} = useCurrencies();
 
	const {
		execute: update,
		error: updateError,
		isPending: isUpdatePending,
	} = useUpdateProfileDetails({ profile, upload });
 
	const {
		execute: updateFollowPolicy,
		isPending: isUpdateFollowPolicyPending,
		error: isUpdateFollowPolicyError,
	} = useUpdateFollowPolicy({ profile });
 
	useEffect(() => {
		if (profile) {
			setName(profile.name);
			setBio(profile.bio || " ");
 
			if (profile.followPolicy?.type === FollowPolicyType.CHARGE) {
				setFollowFee(profile.followPolicy?.amount.value.toString());
			} else {
				setFollowFee(0);
			}
		}
	}, [profile]);
 
	useEffect(() => {
		// If a follow-fee / currency has yet to be set, pick the first in the list
		if (currencies && !currenciesLoading) {
			if (profile.followPolicy?.type !== FollowPolicyType.CHARGE) {
				setChargeCurrency(currencies[0].symbol);
			} else {
				setChargeCurrency(profile.followPolicy?.amount.asset.symbol);
			}
		}
	}, [currenciesLoading]);
 
	// Called when a user selects a file to be uploaded
	const handleFile = async (e) => {
		const newFiles = e.target.files;
		if (newFiles.length === 0) return;
 
		setFileToUpload(newFiles[0]);
		setFileType(newFiles[0]["type"]);
	};
 
	// Called when the user clicks "save"
	const doUpdateProfile = async () => {
		setMessage("");
		setTxActive(true);
 
		setMessage("Updating profile information ...");
 
		let coverPicture = "";
		if (fileToUpload) {
			setMessage("Uploading cover picture ...");
			coverPicture = await uploadImage(fileToUpload, fileType);
		} else {
			coverPicture = profile.coverPicture?.original.url || null;
		}
		const attributes = {
			location: "",
			website: "",
		};
		setMessage("Uploading profile information ...");
 
		await update({ name, bio, coverPicture, attributes });
		setMessage("Profile updated.");
		setTxActive(false);
 
		// Only set the fee if a number greater than 0 is supplied
		if (followFee && followFee > 0) {
			await doUploadFollowPolicy();
		}
	};
 
	// Sets up the follow policy object
	function resolveFollowPolicy({ followPolicyType, amount, recipient }) {
		if (followPolicyType === FollowPolicyType.CHARGE) {
			return {
				type: FollowPolicyType.CHARGE,
				amount: amount,
				recipient: recipient,
			};
		}
 
		return {
			type: FollowPolicyType[followPolicyType],
		};
	}
 
	// Sets the fee to follow a profile
	const doUploadFollowPolicy = async () => {
		const recipient = profile.ownedBy;
 
		const erc20 = currencies.find((c) => c.symbol === chargeCurrency);
		const fee = Amount.erc20(erc20, followFee);
		await updateFollowPolicy({
			followPolicy: resolveFollowPolicy({
				amount: fee,
				followPolicyType: FollowPolicyType.CHARGE,
				recipient,
			}),
		});
	};
 
	return (
		<div className="w-[600px] mt-2 flex flex-col bg-primary px-1 py-1 rounded-lg">
			<div className="ml-2">
				<label className="font-main block uppercase text-xs font-bold mb-2">
					Personal Information
				</label>
				<label className="font-main block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
					Name
				</label>
				<input
					className="appearance-none block bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
					id="name"
					type="text"
					size="50"
					value={name || ""}
					onChange={(e) => setName(e.target.value)}
				/>
			</div>
			<div className="w-full ml-2">
				<label className="font-main block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
					Bio
				</label>
				<textarea
					className="appearance-none block bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
					id="bio"
					type="text"
					value={bio || ""}
					onChange={(e) => setBio(e.target.value)}
					rows="10"
					cols="50"
				/>
			</div>
 
			<div className="w-full ml-2 mt-5">
				<label className="font-main block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
					Subscription Fee
				</label>
				<div className="flex flex-row">
					<input
						className="appearance-none block bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
						id="fee"
						type="number"
						value={followFee}
						onChange={(e) => setFollowFee(e.target.value)}
					/>
					<select
						name="chargeCurrency"
						className="font-main ml-5 px-5 h-[25px] text-white rounded-lg bg-background enabled:hover:bg-secondary border border-red-500"
						defaultValue={
							profile.followPolicy?.type === FollowPolicyType.CHARGE
								? profile.followPolicy.amount.asset.symbol
								: undefined
						}
						onChange={(e) => setChargeCurrency(e.target.value)}
					>
						{currencies &&
							currencies.map((currency) => (
								<option
									key={currency.symbol}
									value={currency.symbol}
									selected={currency.symbol === chargeCurrency}
								>
									{currency.symbol}
								</option>
							))}
					</select>
				</div>
			</div>
			<div className="w-full mt-10 flex flex-col  bg-primary px-1 py-1 rounded-lg">
				<label className="font-main block uppercase text-xs font-bold mb-2">
					Cover Picture
				</label>
				{profile?.coverPicture && !fileToUpload && (
					<img
						width="600"
						src={profile.coverPicture?.original?.url}
						alt="profile-pic"
					/>
				)}
				{fileToUpload && (
					<img src={URL.createObjectURL(fileToUpload)} alt="profile_pic" />
				)}
				<div className="flex flex-row justify-start px-2 py-1 ">
					<input
						type="file"
						onChange={handleFile}
						className="px-2 text-sm text-white rounded-lg w-full"
						multiple="single"
						name="files[]"
					/>
				</div>
			</div>
			<div className="flex flex-row justify-end w-full bg-primary px-2 py-1 mt-1">
				<span className="font-main text-message mr-5">{message}</span>
 
				<button
					className="font-main px-5 text-white rounded-lg bg-background enabled:hover:bg-secondary border border-red-500"
					disabled={txActive}
					onClick={doUpdateProfile}
				>
					save
				</button>
			</div>
		</div>
	);
};
 
export default EditProfileDetails;

const {
	execute: updateProfileImage,
	error: updateProfileImageError,
	isPending: updateProfileImagePending,
} = useUpdateProfileImage({ profile });

const newProfileURL = await uploadImage(fileToUpload, fileType);
await updateProfileImage(newProfileURL);

import React, { useState } from "react";
import { uploadImage } from "../utils/upload-image";
import { useUpdateProfileImage } from "@lens-protocol/react";
 
const EditProfilePicture = ({ profile }) => {
	const [message, setMessage] = useState("");
	const [txActive, setTxActive] = useState(false);
	const [fileToUpload, setFileToUpload] = useState();
	const [fileType, setFileType] = useState();
	const {
		execute: updateProfileImage,
		error: updateProfileImageError,
		isPending: updateProfileImagePending,
	} = useUpdateProfileImage({
		profile,
	});
 
	// Called when the user selects a file to be uploaded
	const handleFile = async (e) => {
		const newFiles = e.target.files;
		if (newFiles.length === 0) return;
 
		setFileToUpload(newFiles[0]);
		setFileType(newFiles[0]["type"]);
	};
 
	// Called when the user clicks "upload"
	const doUpdateProfilePicture = async () => {
		setMessage("");
		setTxActive(true);
		if (!fileToUpload) {
			setMessage("Please select an image first");
			setTxActive(false);
			return;
		}
 
		try {
			setMessage("Uploading image ...");
			const newProfileURL = await uploadImage(fileToUpload, fileType);
			setMessage("Linking image with profile ...");
			await updateProfileImage(newProfileURL);
		} catch (e) {
			console.log("Error on update ", e);
		}
		setMessage("Profile image uploded.");
		setTxActive(false);
	};
 
	return (
		<div className="w-[600px] mt-10 flex flex-col  bg-primary px-1 py-1 rounded-lg mb-10">
			<label className="font-main block uppercase text-xs font-bold mb-2">
				Profile Picture
			</label>
			{profile?.picture && !fileToUpload && (
				<img width="600" src={profile.picture?.original.url} alt="profile_pic" />
			)}
			{fileToUpload && (
				<img src={URL.createObjectURL(fileToUpload)} alt="profile_pic" />
			)}
			<div className="flex flex-row justify-start px-2 py-1 ">
				<input
					type="file"
					onChange={handleFile}
					className="px-2 text-sm text-white rounded-lg w-full"
					multiple="single"
					name="files[]"
				/>
				<div className="flex flex-row justify-end align-start w-full bg-primary ">
					<span className="font-main text-message mr-5">{message}</span>
 
					<button
						className="font-main px-5 text-white rounded-lg bg-background enabled:hover:bg-secondary border border-red-500"
						disabled={txActive}
						onClick={() => doUpdateProfilePicture()}
					>
						upload
					</button>
				</div>
			</div>
		</div>
	);
};
 
export default EditProfilePicture;

const { data: profile, loading } = useProfile({ handle });

import React, { useState, useEffect } from "react";
import { useProfile } from "@lens-protocol/react";
 
const SuggestedProfile = ({ handle }) => {
	const { data: profile, loading } = useProfile({ handle });
	const [profilePicture, setProfilePicture] = useState("");
	const [coverPicture, setCoverPicture] = useState("");
 
	useEffect(() => {
		if (profile) {
			setProfilePicture(profile.picture?.original.url);
			setCoverPicture(profile.coverPicture?.original.url);
			console.log(profile);
		}
	}, [loading]);
 
	return (
		<div className="relative" key={profile?.id}>
			{coverPicture && (
				<img
					className="rounded-lg absolute top-0 left-0 h-32 w-full object-cover px-1 py-1 "
					src={coverPicture}
				/>
			)}
 
			<div className="h-32 w-full ">
				<div className="mx-2 mt-2 flex flex-row bg-secondary opacity-90 rounded-xl">
					{profilePicture && (
						<img
							className="inline-block h-8 w-8 mb-1 mt-1 ml-1 rounded-full ring-2 ring-white"
							src={profilePicture}
							alt={handle}
						/>
					)}
 
					<h2 className="ml-2 self-center">
						<a
							className="font-main underline decoration-contast"
							href={"/" + handle}
						>
							{handle}
						</a>
					</h2>
				</div>
			</div>
		</div>
	);
};
 
export default SuggestedProfile;

import React, { useState, useEffect } from "react";
import SuggestedProfile from "../components/SuggestedProfile";
import { useExploreProfiles } from "@lens-protocol/react";
import { useAccount, useConnect, useDisconnect } from "wagmi";
import { SiSpringCreators } from "react-icons/si";
 
const RightNav = () => {
	const [suggestedProfileHandles, setSuggestedProfileHandles] = useState([]);
	const { isConnected } = useAccount();
 
	useEffect(() => {
		// Hardcoded list of profiles to follow
		const profiles = [
			"llamakahlo.test",
			"llamaanime.test",
			"llamablackandwhite.test",
			"llamafigurine.test",
			"llamabasquiat.test",
		];
		// Shuffle the order
		for (let i = profiles.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[profiles[i], profiles[j]] = [profiles[j], profiles[i]];
		}
		// Pick just 4
		setSuggestedProfileHandles(profiles.slice(0, 4));
	}, []);
 
	return (
		<div className="w-3/6 h-screen sticky top-0 pt-5 bg-background px-4">
			{isConnected && (
				<>
					<div className="flex flex-row justify-center font-logo text-6xl mb-3">
						<SiSpringCreators /> OnlyBundlr
					</div>
 
					<h1 className="font-main bg-primary rounded-xl pl-1">
						Suggested Profiles
					</h1>
					<div className="flex flex-col">
						{suggestedProfileHandles.map((suggestedProfileHandle, id) => {
							return (
								<SuggestedProfile
									key={id}
									handle={suggestedProfileHandle}
								/>
							);
						})}
					</div>
				</>
			)}
		</div>
	);
};
 
export default RightNav;

import React from "react";
 
const Publication = ({ id, content, description, media, publisher }) => {
	return (
		<div
			className="w-[580px] flex flex-col justify-center bg-primary my-5 bg-slate-300 px-1 py-1 rounded-xl"
			key={id}
		>
			<div className="flex flex-row bg-secondary">
				<img
					className="inline-block h-8 w-8 mb-1 mt-1 ml-1 rounded-full ring-2 ring-white"
					src={publisher.picture?.original.url}
					alt={publisher.handle}
				/>
				<h2 className="ml-2 self-center font-main text-bold">
					<a
						className="underline decoration-contast"
						href={"/" + publisher.handle}
					>
						{publisher.handle}
					</a>
				</h2>
			</div>
			{media &&
				media.map((picture, id) => {
					return (
						<img
							width="600"
							className="bg-primary px-1 py-1 rounded-xl"
							src={picture.original?.url}
						/>
					);
				})}
			<h2 className="ml-2 font-main">{content}</h2>
			<p className="ml-2 font-main">{description}</p>
		</div>
	);
};
 
export default Publication;

const {
	data: publications,
	error,
	loading,
	hasMore,
} = usePublications({ profileId: profile.id });

import React from "react";
import Publication from "../components/Publication";
import { usePublications } from "@lens-protocol/react";
 
const PublicationFeed = ({ profile }) => {
	const {
		data: publications,
		error,
		loading,
		hasMore,
	} = usePublications({ profileId: profile.id });
 
	return (
		<div className="flex flex-col">
			{!loading &&
				publications &&
				publications.map((publication) => {
					return (
						<Publication
							key={publication.id}
							content={publication.metadata?.content}
							description={publication.metadata?.description}
							media={publication.metadata?.media}
							publisher={profile}
						/>
					);
				})}
		</div>
	);
};
 
export default PublicationFeed;

import React from "react";
import Publication from "../components/Publication";
import { useActiveProfile, useWalletLogin, useFeed } from "@lens-protocol/react";
import { useAccount } from "wagmi";
import LoginButton from "../components/LoginButton";
import ProfileSwitcher from "../components/ProfileSwitcher";
import { SiSpringCreators } from "react-icons/si";
 
const ContentFeedPage = () => {
	const { data: activeProfile, loading: profileLoading } = useActiveProfile();
	const { login, error: loginError, isPending: isLoginPending } = useWalletLogin();
	const { isConnected } = useAccount();
 
	const {
		data: feed,
		loading,
		hasMore,
		next,
	} = useFeed({
		profileId: activeProfile?.id,
		limit: 10,
	});
 
	return (
		<div className="flex flex-col w-3/6 bg-background px-5">
			{!isConnected && (
				<div className="object-center self-center mt-5">
					<span className="flex flex-row justify-start font-logo text-2xl mb-3">
						Welcome to:
					</span>
					<div className="flex flex-row justify-center font-logo text-6xl mb-3">
						<SiSpringCreators /> OnlyBundlr
					</div>
					<LoginButton />
				</div>
			)}
			{!activeProfile && (
				<div className="font-main object-center self-center mt-[5%] text-xl ml-5">
					you don't have an active profile, please{" "}
					<a href="/edit-profile" className="underline">
						create one
					</a>
				</div>
			)}
			{isConnected && activeProfile && (
				<div>
					<ProfileSwitcher showCreateNew={false} />
 
					{!feed ||
						(feed.length === 0 && (
							<div className="font-main object-center self-center mt-[5%] text-xl ml-5">
								your feed appears to be empty, try following more accounts
							</div>
						))}
					{feed &&
						feed.map((publication, id) => {
							return (
								<Publication
									key={publication.root.id}
									content={publication.root.metadata?.content}
									description={publication.root.metadata?.description}
									media={publication.root.metadata?.media}
									publisher={publication.root.profile}
								/>
							);
						})}
				</div>
			)}
		</div>
	);
};
 
export default ContentFeedPage;

await create({
	content: caption,
	contentFocus: ContentFocus.TEXT,
	locale: "en",
	reference: { type: ReferencePolicyType.FOLLOWERS_ONLY }, // only followers can interact
});

await create({
	content: caption,
	contentFocus: ContentFocus.IMAGE,
	locale: "en",
	collect: {
		type: CollectPolicyType.NO_COLLECT,
	},
	reference: { type: ReferencePolicyType.FOLLOWERS_ONLY }, // only followers can interact
	media: [
		{
			url: imageUrl,
			mimeType: fileType,
		},
	],
});

import React, { useState, useEffect } from "react";
import { upload } from "../utils/upload";
import { uploadImage } from "../utils/upload-image";
import {
	ContentFocus,
	CollectPolicyType,
	ReferencePolicyType,
	useCreatePost,
} from "@lens-protocol/react";
import ProfileSwitcher from "./ProfileSwitcher";
 
const PublicationComposer = ({ publisher }) => {
	const [message, setMessage] = useState("");
	const [txActive, setTxActive] = useState(false);
	const [fileToUpload, setFileToUpload] = useState(null);
	const [fileType, setFileType] = useState();
	const [caption, setCaption] = useState("");
	const { execute: create, error, isPending } = useCreatePost({ publisher, upload });
 
	// Called when the user selects a file to upload
	const handleFile = async (e) => {
		const newFiles = e.target.files;
		if (newFiles.length === 0) return; // should never happen
 
		// only accept image/png, image/jpeg
		if (newFiles[0]["type"] !== "image/png" && newFiles[0]["type"] !== "image/jpeg") {
			return;
		}
		setFileToUpload(newFiles[0]);
		setFileType(newFiles[0]["type"]);
	};
 
	// Called when the user clicks "Post"
	const createPublication = async () => {
		setTxActive(true);
		setMessage("");
 
		if (fileToUpload) {
			// image post
			// STEP 1: Upload image
			setMessage("Uploading image ....");
			const imageUrl = await uploadImage(fileToUpload, fileType);
			// STEP 2: Create post
			setMessage("Creating image publication ....");
			try {
				await create({
					content: caption,
					contentFocus: ContentFocus.IMAGE,
					locale: "en",
					collect: {
						type: CollectPolicyType.NO_COLLECT,
					},
					reference: { type: ReferencePolicyType.FOLLOWERS_ONLY }, // only followers can interact
					media: [
						{
							url: imageUrl,
							mimeType: fileType,
						},
					],
				});
				setCaption("");
				setFileToUpload(null);
				setFileType("");
				setMessage("Publication posted.");
			} catch (e) {
				setMessage("Error on post " + e);
			}
		} else {
			setMessage("Creating text publication ....");
			// text post
			try {
				await create({
					content: caption,
					contentFocus: ContentFocus.TEXT,
					locale: "en",
					reference: { type: ReferencePolicyType.FOLLOWERS_ONLY }, // only followers can interact
				});
				setCaption("");
				setMessage("Publication posted.");
			} catch (e) {
				setMessage("Error on post " + e);
			}
		}
		setTxActive(false);
	};
 
	return (
		<div className="mt-5 flex flex-wrap flex-col pb-10">
			<ProfileSwitcher showCreateNew={false} />
			<div className="bg-primary px-2 mt-5 rounded-xl">
				<label className="font-main block uppercase text-xs font-bold mb-2">
					Choose a photo and click post.
				</label>
				<div className="px-2 py-2 text-sm text-white rounded-lg bg-secondary">
					{fileToUpload && (
						<img
							src={URL.createObjectURL(fileToUpload)}
							alt="preview of publication image"
						/>
					)}
					<input
						className={fileToUpload ? "mt-2" : ""}
						type="file"
						onChange={handleFile}
						multiple="single"
						name="files[]"
					/>
				</div>
				<label className="font-main block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
					Caption
				</label>
				<input
					className="font-main w-full appearance-none block bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
					id="name"
					type="text"
					value={caption || ""}
					onChange={(e) => setCaption(e.target.value)}
				/>
 
				<div className="flex flex-row justify-end w-full bg-primary pb-2">
					<span className="font-main text-message mr-5">{message}</span>
					<button
						className="font-main px-5 text-white rounded-lg bg-background enabled:hover:bg-secondary border border-red-500"
						disabled={txActive}
						onClick={createPublication}
					>
						post
					</button>
				</div>
			</div>
		</div>
	);
};
 
export default PublicationComposer;