{profile.name ?? profile.handle}
+@{formatHandle(profile.handle)}
++ {truncateByWords(profile?.bio ?? '', 30)} +
+
+
+ {profile.stats.totalPosts} Posts
+ {profile.stats.totalComments} Replies
+ {profile.stats.totalFollowing} Following
+ {profile.stats.totalFollowers} Followers
+ {profile.stats.totalMirrors} Mirrors
+ + +
+
+ {publications?.map((publication) => {
+ const { __typename } = publication;
+ return (
+
+
+ );
+};
+
+export default Profile;
diff --git a/lenster-main/apps/prerender/src/components/Publication.tsx b/lenster-main/apps/prerender/src/components/Publication.tsx
new file mode 100644
index 0000000..141b69c
--- /dev/null
+++ b/lenster-main/apps/prerender/src/components/Publication.tsx
@@ -0,0 +1,75 @@
+import { DEFAULT_OG } from '@lenster/data/constants';
+import type { Comment } from '@lenster/lens';
+import { Publication } from '@lenster/lens';
+import getStampFyiURL from '@lenster/lib/getStampFyiURL';
+import sanitizeDStorageUrl from '@lenster/lib/sanitizeDStorageUrl';
+import truncateByWords from '@lenster/lib/truncateByWords';
+import type { FC } from 'react';
+import { BASE_URL } from 'src/constants';
+
+import DefaultTags from './Shared/DefaultTags';
+import SinglePublication from './Shared/SinglePublication';
+import Tags from './Shared/Tags';
+
+interface PublicationProps {
+ publication: Publication;
+ comments: Comment[];
+}
+
+const Publication: FC
+
+ );
+ })}
+
+ {comments?.map((comment) => {
+ const { id } = comment;
+ return (
+
+
+ );
+};
+
+export default Publication;
diff --git a/lenster-main/apps/prerender/src/components/Shared/DefaultTags.tsx b/lenster-main/apps/prerender/src/components/Shared/DefaultTags.tsx
new file mode 100644
index 0000000..f61026a
--- /dev/null
+++ b/lenster-main/apps/prerender/src/components/Shared/DefaultTags.tsx
@@ -0,0 +1,21 @@
+import { APP_NAME, DEFAULT_OG, DESCRIPTION } from '@lenster/data/constants';
+import type { FC } from 'react';
+import { BASE_URL } from 'src/constants';
+
+import Tags from './Tags';
+
+const DefaultTags: FC = () => {
+ return (
+ <>
+
+
+ );
+ })}
+ {APP_NAME}
+
+ );
+};
+
+export default DefaultTags;
diff --git a/lenster-main/apps/prerender/src/components/Shared/SinglePublication.tsx b/lenster-main/apps/prerender/src/components/Shared/SinglePublication.tsx
new file mode 100644
index 0000000..39eccf7
--- /dev/null
+++ b/lenster-main/apps/prerender/src/components/Shared/SinglePublication.tsx
@@ -0,0 +1,100 @@
+import type { Publication } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import getStampFyiURL from '@lenster/lib/getStampFyiURL';
+import sanitizeDStorageUrl from '@lenster/lib/sanitizeDStorageUrl';
+import truncateByWords from '@lenster/lib/truncateByWords';
+import type { FC } from 'react';
+import { BASE_URL } from 'src/constants';
+
+interface PublicationProps {
+ publication: Publication;
+ h1Content?: boolean;
+}
+
+const SinglePublication: FC
+
+ 
+
+
+
+
+
+ {h1Content ? (
+
+ + {content ?? ''} +
+ ) : ( +
+ {content ?? ''}
+
+ )}
+ {attachment ? (
+
+ 
+
+ ) : null}
+
+
+
+
+ );
+};
+
+export default SinglePublication;
diff --git a/lenster-main/apps/prerender/src/components/Shared/Tags.tsx b/lenster-main/apps/prerender/src/components/Shared/Tags.tsx
new file mode 100644
index 0000000..11e54fe
--- /dev/null
+++ b/lenster-main/apps/prerender/src/components/Shared/Tags.tsx
@@ -0,0 +1,62 @@
+import Head from 'next/head';
+import type { FC } from 'react';
+
+interface TagsProps {
+ title: string;
+ description: string;
+ image: string;
+ cardType?: 'summary' | 'summary_large_image';
+ schema?: any;
+ url: string;
+ publishedTime?: string;
+}
+
+const Tags: FC{commentsCount} Comments
+ {likesCount} Likes
+ {publication.collectModule.__typename !==
+ 'RevertCollectModuleSettings' ? (
+ {collectsCount} Collects
+ ) : null}
+ {mirrorsCount} Mirrors
+ +
Prerender App
;
+};
+
+export default Home;
diff --git a/lenster-main/apps/prerender/src/pages/posts/[id].tsx b/lenster-main/apps/prerender/src/pages/posts/[id].tsx
new file mode 100644
index 0000000..16360ab
--- /dev/null
+++ b/lenster-main/apps/prerender/src/pages/posts/[id].tsx
@@ -0,0 +1,67 @@
+import Publication from '@components/Publication';
+import {
+ CommentFeedDocument,
+ CommentOrderingTypes,
+ CommentRankingFilter,
+ CustomFiltersTypes,
+ PublicationDocument
+} from '@lenster/lens';
+import { lensApolloNodeClient } from '@lenster/lens/apollo';
+import type { GetServerSidePropsContext } from 'next';
+
+export const config = {
+ unstable_runtimeJS: false
+};
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const id = context.params?.id;
+
+ // Cache the response for 60 days
+ context.res.setHeader('Cache-Control', 'public, max-age=5184000');
+
+ if (!id) {
+ return {
+ props: { data: null }
+ };
+ }
+
+ const { data: publicationData } = await lensApolloNodeClient.query({
+ query: PublicationDocument,
+ variables: { request: { publicationId: id } }
+ });
+
+ if (publicationData.publication) {
+ const profileId = null;
+ const reactionRequest = { profileId };
+ const { publication } = publicationData;
+ const id =
+ publication.__typename === 'Mirror'
+ ? publication.mirrorOf.id
+ : publication.id;
+
+ const { data: commentsData } = await lensApolloNodeClient.query({
+ query: CommentFeedDocument,
+ variables: {
+ request: {
+ commentsOf: id,
+ customFilters: [CustomFiltersTypes.Gardeners],
+ commentsOfOrdering: CommentOrderingTypes.Ranking,
+ commentsRankingFilter: CommentRankingFilter.Relevant,
+ limit: 30
+ },
+ reactionRequest,
+ profileId
+ }
+ });
+
+ return {
+ props: { publication, comments: commentsData.publications?.items }
+ };
+ }
+
+ return {
+ props: { publication: null, comments: null }
+ };
+}
+
+export default Publication;
diff --git a/lenster-main/apps/prerender/src/pages/u/[handle].tsx b/lenster-main/apps/prerender/src/pages/u/[handle].tsx
new file mode 100644
index 0000000..70b3713
--- /dev/null
+++ b/lenster-main/apps/prerender/src/pages/u/[handle].tsx
@@ -0,0 +1,69 @@
+import Profile from '@components/Profile';
+import { HANDLE_SUFFIX, LENSPROTOCOL_HANDLE } from '@lenster/data/constants';
+import {
+ CustomFiltersTypes,
+ ProfileDocument,
+ ProfileFeedDocument
+} from '@lenster/lens';
+import { lensApolloNodeClient } from '@lenster/lens/apollo';
+import type { GetServerSidePropsContext } from 'next';
+
+export const config = {
+ unstable_runtimeJS: false
+};
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const handle = context.params?.handle;
+
+ // Cache the response for 60 days
+ context.res.setHeader('Cache-Control', 'public, max-age=5184000');
+
+ if (!handle) {
+ return {
+ props: { data: null }
+ };
+ }
+
+ let processedHandle;
+ if (handle.includes(HANDLE_SUFFIX)) {
+ processedHandle = handle;
+ } else {
+ processedHandle =
+ handle === LENSPROTOCOL_HANDLE ? handle : handle.concat(HANDLE_SUFFIX);
+ }
+ const { data: profileData } = await lensApolloNodeClient.query({
+ query: ProfileDocument,
+ variables: { request: { handle: processedHandle } }
+ });
+
+ if (profileData.profile) {
+ const profileId = profileData.profile.id;
+ const reactionRequest = { profileId };
+
+ const { data: profilePublicationsData } = await lensApolloNodeClient.query({
+ query: ProfileFeedDocument,
+ variables: {
+ request: {
+ profileId,
+ customFilters: [CustomFiltersTypes.Gardeners],
+ limit: 30
+ },
+ reactionRequest,
+ profileId
+ }
+ });
+
+ return {
+ props: {
+ profile: profileData.profile,
+ publications: profilePublicationsData.publications?.items
+ }
+ };
+ }
+
+ return {
+ props: { profile: null, publications: null }
+ };
+}
+
+export default Profile;
diff --git a/lenster-main/apps/prerender/tests/constants.ts b/lenster-main/apps/prerender/tests/constants.ts
new file mode 100644
index 0000000..19a9a03
--- /dev/null
+++ b/lenster-main/apps/prerender/tests/constants.ts
@@ -0,0 +1 @@
+export const PRERENDER_BASE_URL = 'http://localhost:4784';
diff --git a/lenster-main/apps/prerender/tests/profile.spec.ts b/lenster-main/apps/prerender/tests/profile.spec.ts
new file mode 100644
index 0000000..1781477
--- /dev/null
+++ b/lenster-main/apps/prerender/tests/profile.spec.ts
@@ -0,0 +1,29 @@
+import { APP_NAME } from '@lenster/data/constants';
+import { expect, test } from '@playwright/test';
+import { PRERENDER_BASE_URL } from 'tests/constants';
+
+test.beforeEach(async ({ page }) => {
+ await page.goto(`${PRERENDER_BASE_URL}/u/yoginth`);
+});
+
+test('should have page title', async ({ page }) => {
+ await expect(page).toHaveTitle(`Yoginth (@yoginth.lens) • ${APP_NAME}`);
+});
+
+test('should have name', async ({ page }) => {
+ await expect(page.getByTestId('profile-name')).toContainText('Yoginth');
+});
+
+test('should have handle', async ({ page }) => {
+ await expect(page.getByTestId('profile-handle')).toContainText('@yoginth');
+});
+
+test('should have bio', async ({ page }) => {
+ await expect(page.getByTestId('profile-bio')).toContainText(
+ 'opinions are mine'
+ );
+});
+
+test('should have feed', async ({ page }) => {
+ await expect(page.getByTestId('profile-feed')).toBeVisible();
+});
diff --git a/lenster-main/apps/prerender/tests/publication.spec.ts b/lenster-main/apps/prerender/tests/publication.spec.ts
new file mode 100644
index 0000000..10ab4bc
--- /dev/null
+++ b/lenster-main/apps/prerender/tests/publication.spec.ts
@@ -0,0 +1,21 @@
+import { APP_NAME } from '@lenster/data/constants';
+import { expect, test } from '@playwright/test';
+import { PRERENDER_BASE_URL } from 'tests/constants';
+
+test.beforeEach(async ({ page }) => {
+ await page.goto(`${PRERENDER_BASE_URL}/posts/0x0d-0x01`);
+});
+
+test('should have page title', async ({ page }) => {
+ await expect(page).toHaveTitle(`Post by @yoginth.lens • ${APP_NAME}`);
+});
+
+test('should have publication', async ({ page }) => {
+ await expect(page.getByTestId('publication-0x0d-0x01')).toContainText(
+ 'gm frens 👋'
+ );
+});
+
+test('should have comment feed', async ({ page }) => {
+ await expect(page.getByTestId('comment-feed')).toBeVisible();
+});
diff --git a/lenster-main/apps/prerender/tsconfig.json b/lenster-main/apps/prerender/tsconfig.json
new file mode 100644
index 0000000..3ae87b2
--- /dev/null
+++ b/lenster-main/apps/prerender/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "extends": "@lenster/config/react.tsconfig.json",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@components*": ["src/components*"],
+ "@lib*": ["src/lib*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}
diff --git a/lenster-main/apps/web/.env.example b/lenster-main/apps/web/.env.example
new file mode 100644
index 0000000..5b1aba9
--- /dev/null
+++ b/lenster-main/apps/web/.env.example
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_IS_PRODUCTION=false
+NEXT_PUBLIC_LENS_NETWORK="sandbox" # "mainnet" or "sandbox"
+NEXT_PUBLIC_SENTRY_DSN=""
diff --git a/lenster-main/apps/web/.eslintrc.js b/lenster-main/apps/web/.eslintrc.js
new file mode 100644
index 0000000..8ffa6be
--- /dev/null
+++ b/lenster-main/apps/web/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: [require.resolve('@lenster/config/eslint/react.js')]
+};
diff --git a/lenster-main/apps/web/.gitignore b/lenster-main/apps/web/.gitignore
new file mode 100644
index 0000000..fcfbb80
--- /dev/null
+++ b/lenster-main/apps/web/.gitignore
@@ -0,0 +1,4 @@
+src/locales/**/*.js
+
+# Sentry Auth Token
+.sentryclirc
diff --git a/lenster-main/apps/web/.prettierignore b/lenster-main/apps/web/.prettierignore
new file mode 100644
index 0000000..f2bbf70
--- /dev/null
+++ b/lenster-main/apps/web/.prettierignore
@@ -0,0 +1,2 @@
+.next
+src/locales
diff --git a/lenster-main/apps/web/README.md b/lenster-main/apps/web/README.md
new file mode 100644
index 0000000..572b207
--- /dev/null
+++ b/lenster-main/apps/web/README.md
@@ -0,0 +1 @@
+# Lenster Web
diff --git a/lenster-main/apps/web/lingui.config.js b/lenster-main/apps/web/lingui.config.js
new file mode 100644
index 0000000..4b9c3d4
--- /dev/null
+++ b/lenster-main/apps/web/lingui.config.js
@@ -0,0 +1,20 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+ format: 'po',
+ orderBy: 'origin',
+ locales: ['en', 'zh', 'fr', 'ru', 'ta'],
+ sourceLocale: 'en',
+ catalogs: [
+ {
+ path: 'src/locales/{locale}/messages',
+ include: ['src']
+ }
+ ],
+ fallbackLocales: {
+ default: 'en'
+ },
+ formatOptions: {
+ origins: true,
+ lineNumbers: false
+ }
+};
diff --git a/lenster-main/apps/web/next-env.d.ts b/lenster-main/apps/web/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/lenster-main/apps/web/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+
+ )
+ )}
+ {comments?.map((comment, index) =>
+ comment?.__typename === 'Comment' && comment.hidden ? null : (
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/lenster-main/apps/web/src/components/Common/MetaTags.tsx b/lenster-main/apps/web/src/components/Common/MetaTags.tsx
new file mode 100644
index 0000000..f24a753
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Common/MetaTags.tsx
@@ -0,0 +1,50 @@
+import { APP_NAME, DEFAULT_OG, DESCRIPTION } from '@lenster/data/constants';
+import Head from 'next/head';
+import type { FC } from 'react';
+
+interface MetaTagsProps {
+ title?: string;
+ description?: string;
+}
+
+const MetaTags: FC
+ {
+ if (!restricted) {
+ reset();
+ }
+ setRestricted(!restricted);
+ }}
+ description={t`Add restrictions on who can view this post`}
+ />
+ {restricted ? (
+ <>
+
+ {
+ if (
+ !collectToView &&
+ collectModule.type === CollectModules.RevertCollectModule
+ ) {
+ return toast.error(
+ t`Enable collect first to use collect based token gating`
+ );
+ }
+ setCollectToView(!collectToView);
+ }}
+ heading={t`Collectors can view`}
+ description={t`People need to collect it first to be able to view it`}
+ icon={
+
+ setFollowToView(!followToView)}
+ heading={t`Followers can view`}
+ description={t`People need to follow you to be able to view it`}
+ icon={
+
+ ) : null}
+
+ );
+};
+
+export default BasicSettings;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/AccessSettings/index.tsx b/lenster-main/apps/web/src/components/Composer/Actions/AccessSettings/index.tsx
new file mode 100644
index 0000000..00a2e40
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/AccessSettings/index.tsx
@@ -0,0 +1,61 @@
+import { LockClosedIcon } from '@heroicons/react/outline';
+import { HelpTooltip, Modal, Tooltip } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useAccessSettingsStore } from 'src/store/access-settings';
+
+import BasicSettings from './BasicSettings';
+
+const AccessSettings: FC = () => {
+ const restricted = useAccessSettingsStore((state) => state.restricted);
+ const hasConditions = useAccessSettingsStore((state) => state.hasConditions);
+ const reset = useAccessSettingsStore((state) => state.reset);
+ const [showModal, setShowModal] = useState(false);
+
+ return (
+ <>
+
+
+
+
+
+ {
+ setCollectType({
+ type: collectModule.amount?.value
+ ? CollectModules.SimpleCollectModule
+ : collectModule.recipients?.length
+ ? CollectModules.MultirecipientFeeCollectModule
+ : CollectModules.SimpleCollectModule,
+ amount: collectModule.amount?.value
+ ? null
+ : { currency: DEFAULT_COLLECT_TOKEN, value: '1' }
+ });
+ }}
+ heading={t`Charge for collecting`}
+ description={t`Get paid whenever someone collects your post`}
+ icon={
+ );
+};
+
+export default AmountConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CarbonConfig.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CarbonConfig.tsx
new file mode 100644
index 0000000..abb0f05
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CarbonConfig.tsx
@@ -0,0 +1,145 @@
+import Beta from '@components/Shared/Badges/Beta';
+import New from '@components/Shared/Badges/New';
+import VeryNew from '@components/Shared/Badges/VeryNew';
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import {
+ PlusIcon,
+ SwitchHorizontalIcon,
+ UsersIcon,
+ XCircleIcon,
+ GlobeIcon,
+ HeartIcon
+} from '@heroicons/react/outline';
+import { HANDLE_SUFFIX, LENSPROTOCOL_HANDLE } from '@lenster/data/constants';
+import { CollectModules, useProfileLazyQuery } from '@lenster/lens';
+import isValidEthAddress from '@lenster/lib/isValidEthAddress';
+import splitNumber from '@lenster/lib/splitNumber';
+import { Button, Input } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import type { FC } from 'react';
+import { useAppStore } from 'src/store/app';
+import { useCollectModuleStore } from 'src/store/collect-module';
+import type { Erc20 } from '@lenster/lens';
+import { DEFAULT_CARBON_POOL_TOKEN } from '@lenster/data/constants';
+
+
+
+interface CarbonConfigProps {
+ //isRecipientsDuplicated: () => boolean;
+ enabledModuleCurrencies?: Erc20[];
+ setCollectType: (data: any) => void;
+}
+
+const CarbonConfig: FC
+
+ ) : null}
+
+ {
+ setCollectType({
+ amount: {
+ currency: collectModule.amount?.currency,
+ value: event.target.value ? event.target.value : '0'
+ }
+ });
+ }}
+ />
+
+
+
+
+ Select currency
+
+
+
+ {
+ setCollectType({
+ type:
+ collectModule.carbonRetirement?.split
+ ? CollectModules.SimpleCollectModule
+ : CollectModules.SimpleCollectModule,
+ //TODO: Find a way to include carbon module without having to hack node_modules directory
+ //CollectModules.PartialCarbonRetirementCollectModule,
+ carbonRetirement:
+ collectModule.carbonRetirement?.split
+ ? null
+ : { pooltoken: DEFAULT_CARBON_POOL_TOKEN, split: '10' }
+ });
+ }}
+ heading={
+
+ );
+};
+
+export default CarbonConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CollectForm.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CollectForm.tsx
new file mode 100644
index 0000000..420a149
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CollectForm.tsx
@@ -0,0 +1,145 @@
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import { CollectModules, useEnabledModulesQuery } from '@lenster/lens';
+import isValidEthAddress from '@lenster/lib/isValidEthAddress';
+import { Button, ErrorMessage, Spinner } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import type { Dispatch, FC, SetStateAction } from 'react';
+import type { CollectModuleType } from 'src/store/collect-module';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+import AmountConfig from './AmountConfig';
+import CollectLimitConfig from './CollectLimitConfig';
+import FollowersConfig from './FollowersConfig';
+import ReferralConfig from './ReferralConfig';
+import SplitConfig from './SplitConfig';
+import TimeLimitConfig from './TimeLimitConfig';
+import CarbonConfig from './CarbonConfig';
+
+interface CollectFormProps {
+ setShowModal: Dispatch
+
+ Retire carbon
+
+
+ }
+ description={t`Send a fraction of income to carbon retirement`}
+ icon={
+
+ ) : null}
+
+
+
+ {
+ setCollectType({
+ carbonRetirement: {
+ pooltoken: collectModule.carbonRetirement?.poolToken,
+ split: event.target.value ? event.target.value : '0'
+ }
+ })
+ }}
+ />
+
+
+ {parseFloat(collectModule.carbonRetirement.split)}%
+
+
+
+ Carbon token
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ Loading collect settings
+
+
+
+ );
+};
+
+export default CollectForm;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CollectLimitConfig.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CollectLimitConfig.tsx
new file mode 100644
index 0000000..0eae7fa
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/CollectLimitConfig.tsx
@@ -0,0 +1,51 @@
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import { StarIcon } from '@heroicons/react/outline';
+import { Input } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+interface CollectLimitConfigProps {
+ setCollectType: (data: any) => void;
+}
+
+const CollectLimitConfig: FC
+
+ ) : null}
+
+
+
+
+
+
+ setCollectType({
+ collectLimit: collectModule.collectLimit ? null : '1'
+ })
+ }
+ heading={t`Limited edition`}
+ description={t`Make the collects exclusive`}
+ icon={
+ );
+};
+
+export default CollectLimitConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/FollowersConfig.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/FollowersConfig.tsx
new file mode 100644
index 0000000..c0df5b4
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/FollowersConfig.tsx
@@ -0,0 +1,27 @@
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import { UserGroupIcon } from '@heroicons/react/outline';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+interface ReferralConfigProps {
+ setCollectType: (data: any) => void;
+}
+
+const FollowersConfig: FC
+ {
+ setCollectType({
+ collectLimit: event.target.value ? event.target.value : '1'
+ });
+ }}
+ />
+
+ ) : null}
+
+ setCollectType({ followerOnlyCollect: true })}
+ heading={t`Who can collect`}
+ description={t`Only followers can collect`}
+ icon={
+ );
+};
+
+export default FollowersConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/ReferralConfig.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/ReferralConfig.tsx
new file mode 100644
index 0000000..0a09ec6
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/ReferralConfig.tsx
@@ -0,0 +1,56 @@
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import { SwitchHorizontalIcon } from '@heroicons/react/outline';
+import { CollectModules } from '@lenster/lens';
+import { Input } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+interface ReferralConfigProps {
+ setCollectType: (data: any) => void;
+}
+
+const ReferralConfig: FC
+
+ setCollectType({
+ type: collectModule.recipients?.length
+ ? CollectModules.MultirecipientFeeCollectModule
+ : CollectModules.SimpleCollectModule,
+ referralFee: collectModule.referralFee ? 0 : 25
+ })
+ }
+ heading={t`Mirror referral reward`}
+ description={t`Share your fee with people who amplify your content`}
+ icon={
+ );
+};
+
+export default ReferralConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
new file mode 100644
index 0000000..2fe03e5
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/SplitConfig.tsx
@@ -0,0 +1,209 @@
+import Beta from '@components/Shared/Badges/Beta';
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import {
+ PlusIcon,
+ SwitchHorizontalIcon,
+ UsersIcon,
+ XCircleIcon
+} from '@heroicons/react/outline';
+import { HANDLE_SUFFIX, LENSPROTOCOL_HANDLE } from '@lenster/data/constants';
+import { CollectModules, useProfileLazyQuery } from '@lenster/lens';
+import isValidEthAddress from '@lenster/lib/isValidEthAddress';
+import splitNumber from '@lenster/lib/splitNumber';
+import { Button, Input } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import type { FC } from 'react';
+import { useAppStore } from 'src/store/app';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+interface SplitConfigProps {
+ isRecipientsDuplicated: () => boolean;
+ setCollectType: (data: any) => void;
+}
+
+const SplitConfig: FC
+ {
+ setCollectType({
+ referralFee: parseInt(
+ event.target.value ? event.target.value : '0'
+ )
+ });
+ }}
+ />
+
+ ) : null}
+
+ 0}
+ setOn={() => {
+ setCollectType({
+ type:
+ recipients.length > 0
+ ? CollectModules.SimpleCollectModule
+ : CollectModules.MultirecipientFeeCollectModule,
+ recipients:
+ recipients.length > 0
+ ? []
+ : [{ recipient: currentProfile?.ownedBy, split: 100 }]
+ });
+ }}
+ heading={
+
+ );
+};
+
+export default SplitConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/TimeLimitConfig.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/TimeLimitConfig.tsx
new file mode 100644
index 0000000..95ef1ca
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/TimeLimitConfig.tsx
@@ -0,0 +1,31 @@
+import ToggleWithHelper from '@components/Shared/ToggleWithHelper';
+import { ClockIcon } from '@heroicons/react/outline';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+interface TimeLimitConfigProps {
+ setCollectType: (data: any) => void;
+}
+
+const TimeLimitConfig: FC
+
+ Split revenue
+
+
+ }
+ description={t`Set multiple recipients for the collect fee`}
+ icon={
+
+ ) : null}
+
+ {recipients.map((recipient, index) => (
+
+
+ 0 &&
+ !isValidEthAddress(recipient.recipient)
+ }
+ onChange={(event) =>
+ onChangeRecipientOrSplit(
+ index,
+ event.target.value,
+ 'recipient'
+ )
+ }
+ />
+
+ ))}
+
+
+ onChangeRecipientOrSplit(
+ index,
+ event.target.value,
+ 'split'
+ )
+ }
+ />
+
+
+
+ {recipients.length >= 5 ? (
+
+ ) : (
+ }
+ onClick={() => {
+ setCollectType({
+ recipients: [...recipients, { recipient: '', split: 0 }]
+ });
+ }}
+ >
+ Add recipient
+
+ )}
+
+ }
+ onClick={splitEvenly}
+ >
+ Split evenly
+
+
+ {splitTotal > 100 ? (
+
+
+ Splits cannot exceed 100%. Total: {splitTotal}%
+
+
+ ) : null}
+ {isRecipientsDuplicated() ? (
+
+ Duplicate recipient address found
+
+ ) : null}
+
+
+ setCollectType({
+ timeLimit: collectModule.timeLimit ? false : true
+ })
+ }
+ heading={t`Time limit`}
+ description={t`Limit collecting to the first 24h`}
+ icon={
+ );
+};
+
+export default TimeLimitConfig;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
new file mode 100644
index 0000000..c08c6a5
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/CollectSettings/index.tsx
@@ -0,0 +1,42 @@
+import { CollectionIcon } from '@heroicons/react/outline';
+import { Modal, Tooltip } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useCollectModuleStore } from 'src/store/collect-module';
+
+import CollectForm from './CollectForm';
+
+const CollectSettings: FC = () => {
+ const reset = useCollectModuleStore((state) => state.reset);
+ const [showModal, setShowModal] = useState(false);
+
+ return (
+ <>
+
+ {categories?.map((category: Category) => (
+
+ ))}
+
+ );
+};
+
+export default Categories;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/Gif/GifSelector.tsx b/lenster-main/apps/web/src/components/Composer/Actions/Gif/GifSelector.tsx
new file mode 100644
index 0000000..2db2bfd
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/Gif/GifSelector.tsx
@@ -0,0 +1,49 @@
+import type { IGif } from '@lenster/types/giphy';
+import { Input } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import type { Dispatch, FC, SetStateAction } from 'react';
+import { useState } from 'react';
+import { useDebounce } from 'usehooks-ts';
+
+import Categories from './Categories';
+import Gifs from './Gifs';
+
+interface GifSelectorProps {
+ setGifAttachment: (gif: IGif) => void;
+ setShowModal: Dispatch
+ setSearchText(event.target.value)}
+ />
+
+
+ {debouncedGifInput ? (
+
+
+ );
+};
+
+export default GifSelector;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/Gif/Gifs.tsx b/lenster-main/apps/web/src/components/Composer/Actions/Gif/Gifs.tsx
new file mode 100644
index 0000000..a0a2a60
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/Gif/Gifs.tsx
@@ -0,0 +1,81 @@
+import { GIPHY_KEY } from '@lenster/data/constants';
+import type { IGif } from '@lenster/types/giphy';
+import axios from 'axios';
+import type { FC } from 'react';
+import { useInfiniteQuery } from 'wagmi';
+
+interface CategoriesProps {
+ debouncedGifInput: string;
+ setGifAttachment: (gif: IGif) => void;
+ setSearchText: (searchText: string) => void;
+ setShowModal: (showModal: boolean) => void;
+}
+
+const Gifs: FC
+ {Array.from(Array(12).keys()).map((_, index) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+
+ {gifs?.pages.map((page: any) =>
+ page.data.map((gif: IGif) => (
+
+ ))
+ )}
+
+ );
+};
+
+export default Gifs;
diff --git a/lenster-main/apps/web/src/components/Composer/Actions/Gif/index.tsx b/lenster-main/apps/web/src/components/Composer/Actions/Gif/index.tsx
new file mode 100644
index 0000000..e53107a
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Actions/Gif/index.tsx
@@ -0,0 +1,64 @@
+import Loader from '@components/Shared/Loader';
+import { PhotographIcon } from '@heroicons/react/outline';
+import { PUBLICATION } from '@lenster/data/tracking';
+import type { IGif } from '@lenster/types/giphy';
+import { Modal, Tooltip } from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
+import type { FC } from 'react';
+import { useState } from 'react';
+import { usePublicationStore } from 'src/store/publication';
+
+const GifSelector = dynamic(() => import('./GifSelector'), {
+ loading: () =>
+
+
+
+
+
+
+
+ }
+ onClick={() => setShowPollLengthModal(true)}
+ outline
+ >
+ {pollConfig.length}{' '}
+
+
+
+
+
+
+ setPollConfig({
+ ...pollConfig,
+ length: Number(e.target.value)
+ })
+ }
+ />
+
+
+
+
+
+
+
+ {pollConfig.choices.map((choice, index) => (
+
+
+ {
+ const newChoices = [...pollConfig.choices];
+ newChoices[index] = event.target.value;
+ setPollConfig({ ...pollConfig, choices: newChoices });
+ }}
+ iconRight={
+ index > 1 ? (
+
+ ) : null
+ }
+ />
+
+ ))}
+ {pollConfig.choices.length !== 10 ? (
+
+ ) : null}
+
+
+
+
+ {selected ? {icon}
+ {title}
+
+
+ Choose Thumbnail
+
+
+ );
+};
+
+export default ChooseThumbnail;
diff --git a/lenster-main/apps/web/src/components/Composer/Editor/index.tsx b/lenster-main/apps/web/src/components/Composer/Editor/index.tsx
new file mode 100644
index 0000000..41a18f0
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/Editor/index.tsx
@@ -0,0 +1,104 @@
+import MentionsPlugin from '@components/Shared/Lexical/Plugins/AtMentionsPlugin';
+import LexicalAutoLinkPlugin from '@components/Shared/Lexical/Plugins/AutoLinkPlugin';
+import EmojiPickerPlugin from '@components/Shared/Lexical/Plugins/EmojiPicker';
+import EmojisPlugin from '@components/Shared/Lexical/Plugins/EmojisPlugin';
+import ImagesPlugin from '@components/Shared/Lexical/Plugins/ImagesPlugin';
+import ToolbarPlugin from '@components/Shared/Lexical/Plugins/ToolbarPlugin';
+import { Errors } from '@lenster/data/errors';
+import {
+ $convertToMarkdownString,
+ TEXT_FORMAT_TRANSFORMERS
+} from '@lexical/markdown';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { t, Trans } from '@lingui/macro';
+import {
+ COMMAND_PRIORITY_NORMAL,
+ INSERT_LINE_BREAK_COMMAND,
+ INSERT_PARAGRAPH_COMMAND
+} from 'lexical';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { toast } from 'react-hot-toast';
+import useUploadAttachments from 'src/hooks/useUploadAttachments';
+import { usePublicationStore } from 'src/store/publication';
+
+const TRANSFORMERS = [...TEXT_FORMAT_TRANSFORMERS];
+
+const Editor: FC = () => {
+ const setPublicationContent = usePublicationStore(
+ (state) => state.setPublicationContent
+ );
+ const showPollEditor = usePublicationStore((state) => state.showPollEditor);
+ const attachments = usePublicationStore((state) => state.attachments);
+ const { handleUploadAttachments } = useUploadAttachments();
+ const [editor] = useLexicalComposerContext();
+
+ const handlePaste = async (pastedFiles: FileList) => {
+ if (
+ attachments.length === 4 ||
+ attachments.length + pastedFiles.length > 4
+ ) {
+ return toast.error(t`Please choose either 1 video or up to 4 photos.`);
+ }
+
+ if (pastedFiles) {
+ await handleUploadAttachments(pastedFiles);
+ }
+ };
+
+ useEffect(() => {
+ return editor.registerCommand(
+ INSERT_PARAGRAPH_COMMAND,
+ () => {
+ editor.dispatchCommand(INSERT_LINE_BREAK_COMMAND, false);
+ return true;
+ },
+ COMMAND_PRIORITY_NORMAL
+ );
+ }, [editor]);
+
+ return (
+
+
+ {!thumbnails.length ?
+
+ {
+ editorState.read(() => {
+ const markdown = $convertToMarkdownString(TRANSFORMERS);
+ setPublicationContent(markdown);
+ });
+ }}
+ />
+
+ );
+};
+
+export default Editor;
diff --git a/lenster-main/apps/web/src/components/Composer/NewPublication.tsx b/lenster-main/apps/web/src/components/Composer/NewPublication.tsx
new file mode 100644
index 0000000..54d0515
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Composer/NewPublication.tsx
@@ -0,0 +1,953 @@
+import QuotedPublication from '@components/Publication/QuotedPublication';
+import Attachments from '@components/Shared/Attachments';
+import { AudioPublicationSchema } from '@components/Shared/Audio';
+import Wrapper from '@components/Shared/Embed/Wrapper';
+import withLexicalContext from '@components/Shared/Lexical/withLexicalContext';
+import { ChatAlt2Icon, PencilAltIcon } from '@heroicons/react/outline';
+import type {
+ CollectCondition,
+ EncryptedMetadata,
+ FollowCondition,
+ LensEnvironment
+} from '@lens-protocol/sdk-gated';
+import { LensGatedSDK } from '@lens-protocol/sdk-gated';
+import type {
+ AccessConditionOutput,
+ CreatePublicPostRequest
+} from '@lens-protocol/sdk-gated/dist/graphql/types';
+import { LensHub } from '@lenster/abis';
+import {
+ ALLOWED_AUDIO_TYPES,
+ ALLOWED_IMAGE_TYPES,
+ ALLOWED_VIDEO_TYPES,
+ APP_NAME,
+ LENSHUB_PROXY,
+ LIT_PROTOCOL_ENVIRONMENT
+} from '@lenster/data/constants';
+import { Errors } from '@lenster/data/errors';
+import { PUBLICATION } from '@lenster/data/tracking';
+import type {
+ CreatePublicCommentRequest,
+ MetadataAttributeInput,
+ Publication,
+ PublicationMetadataMediaInput,
+ PublicationMetadataV2Input
+} from '@lenster/lens';
+import {
+ CollectModules,
+ PublicationDocument,
+ PublicationMainFocus,
+ PublicationMetadataDisplayTypes,
+ ReferenceModules,
+ useBroadcastDataAvailabilityMutation,
+ useBroadcastMutation,
+ useCreateCommentTypedDataMutation,
+ useCreateCommentViaDispatcherMutation,
+ useCreateDataAvailabilityCommentTypedDataMutation,
+ useCreateDataAvailabilityCommentViaDispatcherMutation,
+ useCreateDataAvailabilityPostTypedDataMutation,
+ useCreateDataAvailabilityPostViaDispatcherMutation,
+ useCreatePostTypedDataMutation,
+ useCreatePostViaDispatcherMutation,
+ usePublicationLazyQuery
+} from '@lenster/lens';
+import { useApolloClient } from '@lenster/lens/apollo';
+import getSignature from '@lenster/lib/getSignature';
+import type { IGif } from '@lenster/types/giphy';
+import type { NewLensterAttachment } from '@lenster/types/misc';
+import { Button, Card, ErrorMessage, Spinner } from '@lenster/ui';
+import { $convertFromMarkdownString } from '@lexical/markdown';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import collectModuleParams from '@lib/collectModuleParams';
+import errorToast from '@lib/errorToast';
+import getTextNftUrl from '@lib/getTextNftUrl';
+import getUserLocale from '@lib/getUserLocale';
+import { Leafwatch } from '@lib/leafwatch';
+import uploadToArweave from '@lib/uploadToArweave';
+import { t } from '@lingui/macro';
+import clsx from 'clsx';
+import { useUnmountEffect } from 'framer-motion';
+import { $getRoot } from 'lexical';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { OptmisticPublicationType } from 'src/enums';
+import useCreatePoll from 'src/hooks/useCreatePoll';
+import useEthersWalletClient from 'src/hooks/useEthersWalletClient';
+import { useAccessSettingsStore } from 'src/store/access-settings';
+import { useAppStore } from 'src/store/app';
+import { useCollectModuleStore } from 'src/store/collect-module';
+import { useGlobalModalStateStore } from 'src/store/modals';
+import { useNonceStore } from 'src/store/nonce';
+import { usePublicationStore } from 'src/store/publication';
+import { useReferenceModuleStore } from 'src/store/reference-module';
+import { useTransactionPersistStore } from 'src/store/transaction';
+import { useEffectOnce, useUpdateEffect } from 'usehooks-ts';
+import { v4 as uuid } from 'uuid';
+import { useContractWrite, usePublicClient, useSignTypedData } from 'wagmi';
+
+import PollEditor from './Actions/PollSettings/PollEditor';
+import Editor from './Editor';
+import Discard from './Post/Discard';
+
+const Attachment = dynamic(
+ () => import('@components/Composer/Actions/Attachment'),
+ {
+ loading: () =>
+ }
+);
+const Gif = dynamic(() => import('@components/Composer/Actions/Gif'), {
+ loading: () =>
+});
+const CollectSettings = dynamic(
+ () => import('@components/Composer/Actions/CollectSettings'),
+ {
+ loading: () =>
+ }
+);
+const ReferenceSettings = dynamic(
+ () => import('@components/Composer/Actions/ReferenceSettings'),
+ {
+ loading: () =>
+ }
+);
+const AccessSettings = dynamic(
+ () => import('@components/Composer/Actions/AccessSettings'),
+ {
+ loading: () =>
+ }
+);
+const PollSettings = dynamic(
+ () => import('@components/Composer/Actions/PollSettings'),
+ {
+ loading: () =>
+ }
+);
+
+interface NewPublicationProps {
+ publication: Publication;
+}
+
+const NewPublication: FC
+ {showPollEditor ? (
+ Ask a question...
+ ) : (
+ What's happening?
+ )}
+
+ }
+ ErrorBoundary={() => {Errors.SomethingWentWrong}
}
+ />
+
+ {publicationContentError}
+
+ ) : null}
+ {showPollEditor ?
+
+
+ setGifAttachment(gif)} />
+ {!publication?.isDataAvailability ? (
+ <>
+
+
+
+ ) : isComment ? (
+
+
+
+
+ push(`/u/${currentProfile?.handle}`)}
+ alt={formatHandle(currentProfile?.handle)}
+ />
+
+
+
+ {algorithms.map((algorithm) => (
+
+ );
+};
+
+export default List;
diff --git a/lenster-main/apps/web/src/components/Home/Algorithms/Tabs.tsx b/lenster-main/apps/web/src/components/Home/Algorithms/Tabs.tsx
new file mode 100644
index 0000000..2b65045
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Algorithms/Tabs.tsx
@@ -0,0 +1,55 @@
+import { algorithms } from '@lenster/data/algorithms';
+import type { HomeFeedType } from '@lenster/data/enums';
+import { HOME } from '@lenster/data/tracking';
+import { TabButton } from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import type { Dispatch, FC, SetStateAction } from 'react';
+import { useEnabledAlgorithmsPersistStore } from 'src/store/enabled-algorithms';
+
+interface FeedTypeProps {
+ setFeedType: Dispatch
+ {
+ const enabled = enabledAlgorithms.includes(algorithm.feedType);
+ if (!enabled) {
+ enableAlgorithm(algorithm.feedType);
+ } else {
+ disableAlgorithm(algorithm.feedType);
+ }
+ Leafwatch.track(HOME.ALGORITHMS.TOGGLE_ALGORITHM, {
+ algorithm: algorithm.feedType,
+ enabled: !enabled
+ });
+ }}
+ />
+
+ ))}
+
+
+
+ 
+
+
+
+
+ {algorithm.name}
+
+
+
+
+ {algorithm.isPersonalized ? (
+
+ by {algorithm.by}
+
+ {algorithm.description}
+
+
+ {sanitizedEnabledAlgorithms.map((algorithm) => {
+ return (
+
+ );
+};
+
+export default Tabs;
diff --git a/lenster-main/apps/web/src/components/Home/Algorithms/index.tsx b/lenster-main/apps/web/src/components/Home/Algorithms/index.tsx
new file mode 100644
index 0000000..f761461
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Algorithms/index.tsx
@@ -0,0 +1,39 @@
+import { SparklesIcon } from '@heroicons/react/outline';
+import { HOME } from '@lenster/data/tracking';
+import { Modal, Tooltip } from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useState } from 'react';
+
+import List from './List';
+
+const Algorithms: FC = () => {
+ const [showAlgorithmsModal, setShowAlgorithmsModal] = useState(false);
+
+ return (
+ <>
+
+
+
+ {getTitle()}
+{getDescription()}
+
+
+
+
+
+
+ );
+};
+
+export default FeedType;
diff --git a/lenster-main/apps/web/src/components/Home/ForYou.tsx b/lenster-main/apps/web/src/components/Home/ForYou.tsx
new file mode 100644
index 0000000..69de606
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/ForYou.tsx
@@ -0,0 +1,96 @@
+import QueuedPublication from '@components/Publication/QueuedPublication';
+import SinglePublication from '@components/Publication/SinglePublication';
+import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
+import { SparklesIcon } from '@heroicons/react/outline';
+import type { Publication, PublicationForYouRequest } from '@lenster/lens';
+import { useForYouQuery } from '@lenster/lens';
+import { Card, EmptyState, ErrorMessage } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useInView } from 'react-cool-inview';
+import { OptmisticPublicationType } from 'src/enums';
+import { useAppStore } from 'src/store/app';
+import { useTimelineStore } from 'src/store/timeline';
+import { useTransactionPersistStore } from 'src/store/transaction';
+
+const ForYou: FC = () => {
+ const currentProfile = useAppStore((state) => state.currentProfile);
+ const txnQueue = useTransactionPersistStore((state) => state.txnQueue);
+ const seeThroughProfile = useTimelineStore(
+ (state) => state.seeThroughProfile
+ );
+
+ // Variables
+ const request: PublicationForYouRequest = {
+ for: seeThroughProfile?.id ?? currentProfile?.id,
+ limit: 10
+ };
+ const reactionRequest = currentProfile
+ ? { profileId: currentProfile?.id }
+ : null;
+ const profileId = currentProfile?.id ?? null;
+
+ const { data, loading, error, fetchMore } = useForYouQuery({
+ variables: { request, reactionRequest, profileId }
+ });
+
+ const publications = data?.forYou?.items;
+ const pageInfo = data?.forYou?.pageInfo;
+ const hasMore = pageInfo?.next;
+
+ const { observe } = useInView({
+ onChange: async ({ inView }) => {
+ if (!inView || !hasMore) {
+ return;
+ }
+
+ await fetchMore({
+ variables: {
+ request: { ...request, cursor: pageInfo?.next },
+ reactionRequest,
+ profileId
+ }
+ });
+ }
+ });
+
+ if (loading) {
+ return
+
+
+ {feedType === HomeFeedType.FOLLOWING ||
+ feedType === HomeFeedType.HIGHLIGHTS ? (
+
+
+
+ ) : null
+ )}
+ {publications?.map((publication, index) => (
+ 
+
+
+
+ Support Lenster on Gitcoin Grants Round 18
+
+
+ Leafwatch.track(MISCELLANEOUS.OPEN_GITCOIN)}
+ >
+ Contribute now
+
+
+
+
+ );
+};
+
+export default Hero;
diff --git a/lenster-main/apps/web/src/components/Home/Highlights.tsx b/lenster-main/apps/web/src/components/Home/Highlights.tsx
new file mode 100644
index 0000000..3ca8395
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Highlights.tsx
@@ -0,0 +1,95 @@
+import QueuedPublication from '@components/Publication/QueuedPublication';
+import SinglePublication from '@components/Publication/SinglePublication';
+import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
+import { LightBulbIcon } from '@heroicons/react/outline';
+import type { FeedHighlightsRequest, Publication } from '@lenster/lens';
+import { useFeedHighlightsQuery } from '@lenster/lens';
+import { Card, EmptyState, ErrorMessage } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useInView } from 'react-cool-inview';
+import { OptmisticPublicationType } from 'src/enums';
+import { useAppStore } from 'src/store/app';
+import { useTimelineStore } from 'src/store/timeline';
+import { useTransactionPersistStore } from 'src/store/transaction';
+
+const Highlights: FC = () => {
+ const currentProfile = useAppStore((state) => state.currentProfile);
+ const txnQueue = useTransactionPersistStore((state) => state.txnQueue);
+ const seeThroughProfile = useTimelineStore(
+ (state) => state.seeThroughProfile
+ );
+
+ // Variables
+ const request: FeedHighlightsRequest = {
+ profileId: seeThroughProfile?.id ?? currentProfile?.id,
+ limit: 10
+ };
+ const reactionRequest = currentProfile
+ ? { profileId: currentProfile?.id }
+ : null;
+
+ const { data, loading, error, fetchMore } = useFeedHighlightsQuery({
+ variables: { request, reactionRequest, profileId: currentProfile?.id }
+ });
+
+ const publications = data?.feedHighlights?.items;
+ const pageInfo = data?.feedHighlights?.pageInfo;
+ const hasMore = pageInfo?.next;
+
+ const { observe } = useInView({
+ onChange: async ({ inView }) => {
+ if (!inView || !hasMore) {
+ return;
+ }
+
+ await fetchMore({
+ variables: {
+ request: { ...request, cursor: pageInfo?.next },
+ reactionRequest,
+ profileId: currentProfile?.id
+ }
+ });
+ }
+ });
+
+ if (loading) {
+ return
+
+
+
+
+
+ Welcome to {APP_NAME} 👋
+
+
+
+ {APP_NAME} is a decentralized, and permissionless social media app
+ built with Lens Protocol 🌿
+
+
+
+
+ ) : null
+ )}
+ {publications?.map((publication, index) => (
+
+
+ );
+};
+
+const RecommendedProfiles: FC = () => {
+ const isWTF2Enabled = isFeatureEnabled(FeatureFlag.WTF2);
+ const currentProfile = useAppStore((state) => state.currentProfile);
+ const seeThroughProfile = useTimelineStore(
+ (state) => state.seeThroughProfile
+ );
+ const [showSuggestedModal, setShowSuggestedModal] = useState(false);
+
+ const { data, loading, error } = useRecommendedProfilesQuery({
+ variables: {
+ options: {
+ profileId: isWTF2Enabled
+ ? seeThroughProfile?.id ?? currentProfile?.id
+ : null
+ }
+ }
+ });
+
+ if (loading) {
+ return (
+ <>
+
+ Who to follow
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Set default profile here
+
+
+
+ {finished ? (
+
+);
+
+const SetProfile: FC = () => {
+ const profiles = useAppStore((state) => state.profiles);
+ const currentProfile = useAppStore((state) => state.currentProfile);
+ const hasDefaultProfile = Boolean(profiles.find((o) => o.isDefault));
+ const doneSetup =
+ Boolean(currentProfile?.name) &&
+ Boolean(currentProfile?.bio) &&
+ Boolean(currentProfile?.picture) &&
+ Boolean(currentProfile?.interests?.length);
+
+ if (!hasDefaultProfile || doneSetup) {
+ return null;
+ }
+
+ return (
+
+ {title}
+
+
+
+
+
+
+
+
+ Leafwatch.track(ONBOARDING.NAVIGATE_UPDATE_PROFILE_INTERESTS)
+ }
+ href="/settings/interests"
+ >
+
+
+ Update profile now
+
+
+
+ {
+ return (
+
+
+ );
+ }}
+ />
+
+ );
+};
+
+export default Suggested;
diff --git a/lenster-main/apps/web/src/components/Home/Tags.tsx b/lenster-main/apps/web/src/components/Home/Tags.tsx
new file mode 100644
index 0000000..00d2e6b
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Tags.tsx
@@ -0,0 +1,77 @@
+import Alpha from '@components/Shared/Badges/Alpha';
+import { TagIcon } from '@heroicons/react/outline';
+import { Card } from '@lenster/ui';
+import { Trans } from '@lingui/macro';
+import clsx from 'clsx';
+import type { FC } from 'react';
+import { useExploreStore } from 'src/store/explore';
+
+const Title = () => {
+ return (
+
+
+
+
+ );
+};
+
+const Tags: FC = () => {
+ const selectedTag = useExploreStore((state) => state.selectedTag);
+ const setSelectedTag = useExploreStore((state) => state.setSelectedTag);
+
+ const tags = [
+ { tag: 'arts_&_culture', name: 'Arts & Culture' },
+ { tag: 'business_&_entrepreneurs', name: 'Business & Entrepreneurs' },
+ { tag: 'celebrity_&_pop_culture', name: 'Celebrity & Pop Culture' },
+ { tag: 'diaries_&_daily_life', name: 'Diaries & Daily Life' },
+ { tag: 'family', name: 'Family' },
+ { tag: 'fashion_&_style', name: 'Fashion & Style' },
+ { tag: 'filmtv&_video', name: 'Film & Video' },
+ { tag: 'fitness_&_health', name: 'Fitness & Health' },
+ { tag: 'food_&_dining', name: 'Food & Dining' },
+ { tag: 'gaming', name: 'Gaming' },
+ { tag: 'learning_&_educational', name: 'Learning & Educational' },
+ { tag: 'music', name: 'Music' },
+ { tag: 'news_&_social_concern', name: 'News & Social Concern' },
+ { tag: 'other_hobbies', name: 'Other Hobbies' },
+ { tag: 'relationships', name: 'Relationships' },
+ { tag: 'science_&_technology', name: 'Science & Technology' },
+ { tag: 'sports', name: 'Sports' },
+ { tag: 'travel_&_adventure', name: 'Travel & Adventure' },
+ { tag: 'youth_&_student_life', name: 'Youth & Student Life' }
+ ];
+
+ return (
+ <>
+
+ Tags
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default Collected;
diff --git a/lenster-main/apps/web/src/components/Home/Timeline/EventType/Combined.tsx b/lenster-main/apps/web/src/components/Home/Timeline/EventType/Combined.tsx
new file mode 100644
index 0000000..e2c2322
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Timeline/EventType/Combined.tsx
@@ -0,0 +1,94 @@
+import Profiles from '@components/Shared/Profiles';
+import { SparklesIcon } from '@heroicons/react/outline';
+import type { FeedItem } from '@lenster/lens';
+import { Trans } from '@lingui/macro';
+import type { FC } from 'react';
+
+interface CombinedProps {
+ feedItem: FeedItem;
+}
+
+const Combined: FC
+
+ );
+};
+
+export default Combined;
diff --git a/lenster-main/apps/web/src/components/Home/Timeline/EventType/Commented.tsx b/lenster-main/apps/web/src/components/Home/Timeline/EventType/Commented.tsx
new file mode 100644
index 0000000..4dd3174
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Timeline/EventType/Commented.tsx
@@ -0,0 +1,27 @@
+import ThreadBody from '@components/Publication/ThreadBody';
+import type { FeedItem } from '@lenster/lens';
+import type { FC } from 'react';
+
+interface CommentedProps {
+ feedItem: FeedItem;
+}
+
+const Commented: FC
+ {mirrorsLength ? (
+
+
+ mirrored
+ {totalActions < 3 ? (totalActions !== 1 ? ' and ' : '') : ', '}
+
+
+ ) : null}
+ {commentsLength ? (
+
+
+ commented
+ {totalActions < 3
+ ? collectsLength && reactionsLength
+ ? ' and '
+ : !mirrorsLength && totalActions !== 1
+ ? ' and '
+ : ''
+ : ', '}
+ {totalActions >= 3 && (!collectsLength || !reactionsLength)
+ ? ' and '
+ : ''}
+
+
+ ) : null}
+ {collectsLength ? (
+
+
+ collected
+ {totalActions >= 3 && reactionsLength
+ ? ' and '
+ : reactionsLength
+ ? ' and '
+ : ''}
+
+
+ ) : null}
+ {reactionsLength ? (
+
+ liked
+
+ ) : null}
+
+
+
+ );
+};
+
+export default Liked;
diff --git a/lenster-main/apps/web/src/components/Home/Timeline/EventType/Mirrored.tsx b/lenster-main/apps/web/src/components/Home/Timeline/EventType/Mirrored.tsx
new file mode 100644
index 0000000..5d43d06
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Timeline/EventType/Mirrored.tsx
@@ -0,0 +1,29 @@
+import Profiles from '@components/Shared/Profiles';
+import { SwitchHorizontalIcon } from '@heroicons/react/outline';
+import type { MirrorEvent } from '@lenster/lens';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+
+interface MirroredProps {
+ mirrors: MirrorEvent[];
+}
+
+const Mirrored: FC
+
+ );
+};
+
+export default Mirrored;
diff --git a/lenster-main/apps/web/src/components/Home/Timeline/EventType/index.tsx b/lenster-main/apps/web/src/components/Home/Timeline/EventType/index.tsx
new file mode 100644
index 0000000..f0b40e9
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Home/Timeline/EventType/index.tsx
@@ -0,0 +1,54 @@
+import type { FeedItem } from '@lenster/lens';
+import stopEventPropagation from '@lenster/lib/stopEventPropagation';
+import type { FC } from 'react';
+
+import Collected from './Collected';
+import Combined from './Combined';
+import Commented from './Commented';
+import Liked from './Liked';
+import Mirrored from './Mirrored';
+
+const getCanCombined = (aggregations: number[]) => {
+ // show combined reactions if more than 2 items in aggregations
+ return aggregations.filter((n) => n > 0).length > 1;
+};
+
+interface ActionTypeProps {
+ feedItem: FeedItem;
+}
+
+const ActionType: FC
+
+ ) : null
+ )}
+ {publications?.map((publication, index) => (
+
+
+ );
+};
+
+const Trending: FC = () => {
+ const { data, loading, error } = useTrendingQuery({
+ variables: { request: { limit: 7, sort: TagSortCriteria.MostPopular } }
+ });
+
+ if (loading) {
+ return (
+ <>
+
+ Trending
+
+
+
+ Leafwatch.track(MISCELLANEOUS.OPEN_TRENDING_TAG, {
+ trending_tag: tag?.tag
+ })
+ }
+ >
+
+ ) : null
+ )}
+ {tag?.tag}
+
+ {nFormatter(tag?.total)}{' '}
+
+
+ 
+
+
+
+ Join the waitlist to get early access to the vibrant Lens community!
+
+
+
+ }
+ onClick={() => Leafwatch.track(MISCELLANEOUS.OPEN_LENS_WAITLIST)}
+ >
+ Join waitlist
+
+
+
+
+
+ {feedType === HomeFeedType.FOR_YOU ? (
+
+
+
+ );
+};
+
+/**
+ * This component is for displaying the attachment preview in the messages
+ * list before it's uploaded and sent to the network. It matches how the
+ * attachment is rendered when retrieved from the network.
+ */
+const AttachmentPreviewInline: FC<
+ Pick
+
+ );
+};
+
+const Composer: FC
+ {attachment && !sending ? (
+
+ );
+};
+
+export default Composer;
diff --git a/lenster-main/apps/web/src/components/Messages/Message.tsx b/lenster-main/apps/web/src/components/Messages/Message.tsx
new file mode 100644
index 0000000..db7006a
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Messages/Message.tsx
@@ -0,0 +1,223 @@
+import MetaTags from '@components/Common/MetaTags';
+import MessageHeader from '@components/Messages/MessageHeader';
+import Loader from '@components/Shared/Loader';
+import { APP_NAME } from '@lenster/data/constants';
+import { PAGEVIEW } from '@lenster/data/tracking';
+import formatHandle from '@lenster/lib/formatHandle';
+import sanitizeDisplayName from '@lenster/lib/sanitizeDisplayName';
+import { Card, GridItemEight, GridLayout } from '@lenster/ui';
+import { parseConversationKey } from '@lib/conversationKey';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import useGetMessages from 'src/hooks/useGetMessages';
+import { useGetProfile } from 'src/hooks/useMessageDb';
+import type {
+ FailedMessage,
+ PendingMessage
+} from 'src/hooks/useSendOptimisticMessage';
+import useSendOptimisticMessage from 'src/hooks/useSendOptimisticMessage';
+import useStreamMessages from 'src/hooks/useStreamMessages';
+import Custom404 from 'src/pages/404';
+import { useAppStore } from 'src/store/app';
+import { useMessageStore } from 'src/store/message';
+import { useEffectOnce } from 'usehooks-ts';
+
+import Composer from './Composer';
+import MessagesList from './MessagesList';
+import PreviewList from './PreviewList';
+
+interface MessageProps {
+ conversationKey: string;
+}
+
+const Message: FC
+
+
+ onChangeCallback(event.target.value)}
+ />
+
+
+
+
+ ) : (
+ <>
+
+
+ );
+};
+
+export default MessageHeader;
diff --git a/lenster-main/apps/web/src/components/Messages/MessageIcon.tsx b/lenster-main/apps/web/src/components/Messages/MessageIcon.tsx
new file mode 100644
index 0000000..ffeceda
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Messages/MessageIcon.tsx
@@ -0,0 +1,148 @@
+import { MailIcon } from '@heroicons/react/outline';
+import type { DecodedMessage } from '@xmtp/xmtp-js';
+import { fromNanoString, SortDirection } from '@xmtp/xmtp-js';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import useXmtpClient from 'src/hooks/useXmtpClient';
+import { useAppStore } from 'src/store/app';
+import { useMessagePersistStore } from 'src/store/message';
+
+const MessageIcon: FC = () => {
+ const currentProfile = useAppStore((state) => state.currentProfile);
+ const clearMessagesBadge = useMessagePersistStore(
+ (state) => state.clearMessagesBadge
+ );
+ const viewedMessagesAtNs = useMessagePersistStore(
+ (state) => state.viewedMessagesAtNs
+ );
+ const showMessagesBadge = useMessagePersistStore(
+ (state) => state.showMessagesBadge
+ );
+ const setShowMessagesBadge = useMessagePersistStore(
+ (state) => state.setShowMessagesBadge
+ );
+ const { client: cachedClient } = useXmtpClient(true);
+
+ const shouldShowBadge = (
+ viewedAt: string | undefined,
+ messageSentAt: Date | undefined
+ ): boolean => {
+ if (!messageSentAt) {
+ return false;
+ }
+
+ const viewedMessagesAt = fromNanoString(viewedAt);
+
+ return (
+ !viewedMessagesAt ||
+ (viewedMessagesAt.getTime() < messageSentAt.getTime() &&
+ messageSentAt.getTime() < new Date().getTime())
+ );
+ };
+
+ useEffect(() => {
+ if (!cachedClient || !currentProfile) {
+ return;
+ }
+
+ const fetchShowBadge = async () => {
+ const convos = await cachedClient.conversations.list();
+
+ if (convos.length <= 0) {
+ return;
+ }
+
+ const topics = convos.map((convo) => convo.topic);
+ const queryResults = await cachedClient.apiClient.batchQuery(
+ topics.map((topic) => ({
+ contentTopic: topic,
+ pageSize: 1,
+ direction: SortDirection.SORT_DIRECTION_DESCENDING
+ }))
+ );
+ const mostRecentTimestamp = queryResults.reduce(
+ (lastTimestamp: string | null, envelopes) => {
+ if (!envelopes.length || !envelopes[0]?.timestampNs) {
+ return lastTimestamp;
+ }
+ if (!lastTimestamp || envelopes[0]?.timestampNs > lastTimestamp) {
+ return envelopes[0].timestampNs;
+ }
+ return lastTimestamp;
+ },
+ null
+ );
+ // No messages have been sent or received by the user, ever
+ const sentAt = fromNanoString(mostRecentTimestamp ?? undefined);
+ const showBadge = shouldShowBadge(
+ viewedMessagesAtNs.get(currentProfile.id),
+ sentAt
+ );
+ showMessagesBadge.set(currentProfile.id, showBadge);
+ setShowMessagesBadge(new Map(showMessagesBadge));
+ };
+
+ let messageStream: AsyncGenerator
+
+ {profile ? (
+
+ {!following ? (
+
+ ) : null}
+
+
+ );
+};
+
+interface DateDividerBorderProps {
+ children: ReactNode;
+}
+
+const DateDividerBorder: FC
+ {address !== message.senderAddress ? (
+
+
+
+
+
+
+ {statusIcon}
+ {statusContent}
+
+
+
+
+
+ {formatDate(date)}
+
+
+
+);
+
+const MissingXmtpAuth: FC = () => (
+
+
+
+
+
+
+ This is the beginning of the conversation
+
+
+);
+
+const LoadingMore: FC = () => (
+
+ Loading...
+
+);
+
+interface MessageListProps {
+ conversationKey?: string;
+ messages: (DecodedMessage | PendingMessage | FailedMessage)[];
+ fetchNextMessages: () => void;
+ profile?: Profile;
+ currentProfile?: Profile | null;
+ hasMore: boolean;
+ missingXmtpAuth: boolean;
+}
+
+const MessagesList: FC
+
+ );
+};
+
+export default memo(MessagesList);
diff --git a/lenster-main/apps/web/src/components/Messages/Preview.tsx b/lenster-main/apps/web/src/components/Messages/Preview.tsx
new file mode 100644
index 0000000..746e589
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Messages/Preview.tsx
@@ -0,0 +1,118 @@
+import { BadgeCheckIcon, ExclamationCircleIcon } from '@heroicons/react/solid';
+import type { Profile } from '@lenster/lens';
+import formatAddress from '@lenster/lib/formatAddress';
+import formatHandle from '@lenster/lib/formatHandle';
+import getAvatar from '@lenster/lib/getAvatar';
+import getStampFyiURL from '@lenster/lib/getStampFyiURL';
+import hasMisused from '@lenster/lib/hasMisused';
+import sanitizeDisplayName from '@lenster/lib/sanitizeDisplayName';
+import { Image } from '@lenster/ui';
+import { formatTime, getTimeFromNow } from '@lib/formatTime';
+import isVerified from '@lib/isVerified';
+import type { DecodedMessage } from '@xmtp/xmtp-js';
+import { ContentTypeText } from '@xmtp/xmtp-js';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { useAppStore } from 'src/store/app';
+import type { RemoteAttachment } from 'xmtp-content-type-remote-attachment';
+import { ContentTypeRemoteAttachment } from 'xmtp-content-type-remote-attachment';
+
+interface PreviewProps {
+ ensName?: string;
+ profile?: Profile;
+ message?: DecodedMessage;
+ conversationKey: string;
+ isSelected: boolean;
+}
+
+interface MessagePreviewProps {
+ message: DecodedMessage;
+}
+
+const MessagePreview: FC
+
+
+ {missingXmtpAuth ?
+
+
+ );
+ lastMessageDate = msg.sent;
+ return messageDiv;
+ })}
+ {hasMore ?
+ onConversationSelected(profile?.id ? profile.id : conversationKey)
+ }
+ aria-hidden="true"
+ >
+
+ )
+ );
+};
+
+export default Preview;
diff --git a/lenster-main/apps/web/src/components/Messages/PreviewList.tsx b/lenster-main/apps/web/src/components/Messages/PreviewList.tsx
new file mode 100644
index 0000000..6df2162
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Messages/PreviewList.tsx
@@ -0,0 +1,223 @@
+import Preview from '@components/Messages/Preview';
+import Following from '@components/Profile/Following';
+import Loader from '@components/Shared/Loader';
+import Search from '@components/Shared/Navbar/Search';
+import { MailIcon, PlusCircleIcon } from '@heroicons/react/outline';
+import { Errors } from '@lenster/data/errors';
+import { MESSAGES } from '@lenster/data/tracking';
+import type { Profile } from '@lenster/lens';
+import {
+ Card,
+ EmptyState,
+ ErrorMessage,
+ GridItemFour,
+ Modal,
+ TabButton
+} from '@lenster/ui';
+import buildConversationId from '@lib/buildConversationId';
+import { buildConversationKey } from '@lib/conversationKey';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { MessageTabs } from 'src/enums';
+import useGetMessagePreviews from 'src/hooks/useGetMessagePreviews';
+import { useMessageDb } from 'src/hooks/useMessageDb';
+import useMessagePreviews from 'src/hooks/useMessagePreviews';
+import { useAppStore } from 'src/store/app';
+import type { TabValues } from 'src/store/message';
+import { useMessagePersistStore, useMessageStore } from 'src/store/message';
+
+interface PreviewListProps {
+ className?: string;
+ selectedConversationKey?: string;
+}
+
+const PreviewList: FC
+
+
+
+
+
+
+ {address === message?.senderAddress ? 'You: ' : null}
+
+
+ {message?.sent ? (
+
+ {getTimeFromNow(message.sent)}
+
+ ) : null}
+
+ {profile?.name
+ ? sanitizeDisplayName(profile?.name) ??
+ formatHandle(profile.handle)
+ : ensName ?? formatAddress(conversationKey?.split('/')[0])}
+
+ {isVerified(profile?.id) ? (
+
+
+ Messages
+ {currentProfile && !showAuthenticating && !showLoading ? (
+
+ ) : null}
+ {previewsLoading ? (
+
+ ) : null}
+
+
+
+ {
+ setSelectedTab(MessageTabs.Inbox);
+ Leafwatch.track(MESSAGES.SWITCH_INBOX_TAB);
+ }}
+ showOnSm
+ />
+ {
+ setSelectedTab(MessageTabs.Following);
+ Leafwatch.track(MESSAGES.SWITCH_FOLLOWING_TAB);
+ }}
+ showOnSm
+ />
+
+
+ {showAuthenticating ? (
+ {
+ const message = messages.get(key);
+ return (
+
+
+
+ ) : showLoading ? (
+
+
+ ) : profilesError ? (
+
+
+ {currentProfile ? (
+
+ {attachment ?
+ );
+};
+
+export default RemoteAttachmentPreview;
diff --git a/lenster-main/apps/web/src/components/Messages/index.tsx b/lenster-main/apps/web/src/components/Messages/index.tsx
new file mode 100644
index 0000000..4aa3c78
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Messages/index.tsx
@@ -0,0 +1,57 @@
+import MetaTags from '@components/Common/MetaTags';
+import { APP_NAME } from '@lenster/data/constants';
+import { PAGEVIEW } from '@lenster/data/tracking';
+import { Card, GridItemEight, GridLayout } from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import { t, Trans } from '@lingui/macro';
+import type { NextPage } from 'next';
+import Custom404 from 'src/pages/404';
+import { useAppStore } from 'src/store/app';
+import { useEffectOnce } from 'usehooks-ts';
+
+import PreviewList from './PreviewList';
+
+const NoConversationSelected = () => {
+ useEffectOnce(() => {
+ Leafwatch.track(PAGEVIEW, { page: 'messages' });
+ });
+
+ return (
+
+
+ ) : null}
+ {redactionReason}
+ +
+
+ );
+};
+
+const Messages: NextPage = () => {
+ const currentProfile = useAppStore((state) => state.currentProfile);
+
+ if (!currentProfile) {
+ return
+ 👋
+
+
+
+
+ Select a conversation
+
+
+
+
+ Publication filters
+
+
+
+
+ togglePublicationType(PublicationTypes.Post)}
+ checked={publicationTypes.includes(PublicationTypes.Post)}
+ name="posts"
+ label={t`Posts`}
+ />
+ togglePublicationType(PublicationTypes.Comment)}
+ checked={publicationTypes.includes(PublicationTypes.Comment)}
+ name="comments"
+ label={t`Comments`}
+ />
+
+
+
+ Media filters
+
+
+
+
+
+ toggleMainContentFocus(PublicationMainFocus.Article)
+ }
+ checked={mainContentFocus.includes(
+ PublicationMainFocus.Article
+ )}
+ name="articles"
+ label={t`Articles`}
+ />
+
+ toggleMainContentFocus(PublicationMainFocus.Audio)
+ }
+ checked={mainContentFocus.includes(PublicationMainFocus.Audio)}
+ name="audio"
+ label={t`Audio`}
+ />
+
+ toggleMainContentFocus(PublicationMainFocus.Embed)
+ }
+ checked={mainContentFocus.includes(PublicationMainFocus.Embed)}
+ name="embeds"
+ label={t`Embeds`}
+ />
+
+ toggleMainContentFocus(PublicationMainFocus.Image)
+ }
+ checked={mainContentFocus.includes(PublicationMainFocus.Image)}
+ name="images"
+ label={t`Images`}
+ />
+
+ toggleMainContentFocus(PublicationMainFocus.Link)
+ }
+ checked={mainContentFocus.includes(PublicationMainFocus.Link)}
+ name="links"
+ label={t`Links`}
+ />
+
+ toggleMainContentFocus(PublicationMainFocus.TextOnly)
+ }
+ checked={mainContentFocus.includes(
+ PublicationMainFocus.TextOnly
+ )}
+ name="text"
+ label={t`Text`}
+ />
+
+ toggleMainContentFocus(PublicationMainFocus.Video)
+ }
+ checked={mainContentFocus.includes(PublicationMainFocus.Video)}
+ name="videos"
+ label={t`Videos`}
+ />
+
+
+
+ Custom filters
+
+
+
+ {
+ if (customFilters.includes(CustomFiltersTypes.Gardeners)) {
+ setCustomFilters(
+ customFilters.filter(
+ (type) => type !== CustomFiltersTypes.Gardeners
+ )
+ );
+ } else {
+ setCustomFilters([
+ ...customFilters,
+ CustomFiltersTypes.Gardeners
+ ]);
+ }
+ }}
+ checked={customFilters.includes(CustomFiltersTypes.Gardeners)}
+ name="gardeners"
+ label={t`Gardeners`}
+ />
+
+
+
+ );
+};
+
+export default FeedType;
diff --git a/lenster-main/apps/web/src/components/Notification/List.tsx b/lenster-main/apps/web/src/components/Notification/List.tsx
new file mode 100644
index 0000000..15ca0c5
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/List.tsx
@@ -0,0 +1,183 @@
+import { BellIcon } from '@heroicons/react/outline';
+import type {
+ NewCollectNotification,
+ NewCommentNotification,
+ NewFollowerNotification,
+ NewMentionNotification,
+ NewMirrorNotification,
+ NewReactionNotification,
+ NotificationRequest
+} from '@lenster/lens';
+import {
+ CustomFiltersTypes,
+ NotificationTypes,
+ useNotificationsQuery
+} from '@lenster/lens';
+import { Card, EmptyState, ErrorMessage } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import type { FC } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { NotificationType } from 'src/enums';
+import { useAppStore } from 'src/store/app';
+import { usePreferencesStore } from 'src/store/preferences';
+
+import NotificationShimmer from './Shimmer';
+import CollectNotification from './Type/CollectNotification';
+import CommentNotification from './Type/CommentNotification';
+import FollowerNotification from './Type/FollowerNotification';
+import LikeNotification from './Type/LikeNotification';
+import MentionNotification from './Type/MentionNotification';
+import MirrorNotification from './Type/MirrorNotification';
+
+interface ListProps {
+ feedType: string;
+}
+
+const List: FC
+
+
+ {sanitizeDisplayName(profile?.name) ?? formatHandle(profile?.handle)}
+
+ {isVerified(profile.id) ? (
+
+
+
+
+ );
+};
+
+export default Settings;
diff --git a/lenster-main/apps/web/src/components/Notification/Shimmer.tsx b/lenster-main/apps/web/src/components/Notification/Shimmer.tsx
new file mode 100644
index 0000000..b726e06
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Shimmer.tsx
@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+
+const NotificationShimmer: FC = () => {
+ return (
+
+
+ );
+};
+
+export default NotificationShimmer;
diff --git a/lenster-main/apps/web/src/components/Notification/Type/CollectNotification/Amount.tsx b/lenster-main/apps/web/src/components/Notification/Type/CollectNotification/Amount.tsx
new file mode 100644
index 0000000..378c147
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/CollectNotification/Amount.tsx
@@ -0,0 +1,45 @@
+import { CurrencyDollarIcon } from '@heroicons/react/outline';
+import type { NewCollectNotification } from '@lenster/lens';
+import getTokenImage from '@lenster/lib/getTokenImage';
+import humanize from '@lenster/lib/humanize';
+import { Trans } from '@lingui/macro';
+import type { FC } from 'react';
+
+interface CollectedAmountProps {
+ notification: NewCollectNotification;
+}
+
+const CollectedAmount: FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+ })
+
+ )}
+
+ );
+};
+
+export default CollectedAmount;
diff --git a/lenster-main/apps/web/src/components/Notification/Type/CollectNotification/Content.tsx b/lenster-main/apps/web/src/components/Notification/Type/CollectNotification/Content.tsx
new file mode 100644
index 0000000..b1acf25
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/CollectNotification/Content.tsx
@@ -0,0 +1,21 @@
+import Markup from '@components/Shared/Markup';
+import type { NewCollectNotification } from '@lenster/lens';
+import Link from 'next/link';
+import type { FC } from 'react';
+
+interface CollectedContentProps {
+ notification: NewCollectNotification;
+}
+
+const CollectedContent: FCCollected for free
+ ) : (
+ <>
+
+
+ Collected for {humanize(parseFloat(amount))} {currency}
+
+
+
+
+ );
+};
+
+export default memo(CollectNotification);
diff --git a/lenster-main/apps/web/src/components/Notification/Type/CommentNotification.tsx b/lenster-main/apps/web/src/components/Notification/Type/CommentNotification.tsx
new file mode 100644
index 0000000..218d43b
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/CommentNotification.tsx
@@ -0,0 +1,85 @@
+import Markup from '@components/Shared/Markup';
+import UserPreview from '@components/Shared/UserPreview';
+import { ChatAlt2Icon } from '@heroicons/react/solid';
+import type { NewCommentNotification } from '@lenster/lens';
+import type { MessageDescriptor } from '@lenster/types/misc';
+import { formatTime, getTimeFromNow } from '@lib/formatTime';
+import { defineMessage } from '@lingui/macro';
+import { Trans } from '@lingui/react';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import { NotificationProfileAvatar, NotificationProfileName } from '../Profile';
+
+const messages: Record
+
+
+
+
+
+
+ ) : (
+
+
+ {getTimeFromNow(notification?.createdAt)}
+
+
+
+
+
+ );
+};
+
+export default memo(CommentNotification);
diff --git a/lenster-main/apps/web/src/components/Notification/Type/FollowerNotification.tsx b/lenster-main/apps/web/src/components/Notification/Type/FollowerNotification.tsx
new file mode 100644
index 0000000..b269e64
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/FollowerNotification.tsx
@@ -0,0 +1,85 @@
+import UserPreview from '@components/Shared/UserPreview';
+import { UserAddIcon } from '@heroicons/react/solid';
+import type { NewFollowerNotification } from '@lenster/lens';
+import { formatTime, getTimeFromNow } from '@lib/formatTime';
+import { defineMessage } from '@lingui/macro';
+import { Trans } from '@lingui/react';
+import type { FC } from 'react';
+import { memo } from 'react';
+import { useAppStore } from 'src/store/app';
+
+import { NotificationProfileAvatar, NotificationProfileName } from '../Profile';
+import {
+ NotificationWalletProfileAvatar,
+ NotificationWalletProfileName
+} from '../WalletProfile';
+
+const messageFollow = defineMessage({
+ id: '<0><1/> followed you'
+});
+
+const messageSuperFollow = defineMessage({
+ id: '<0><1/> super followed you'
+});
+
+interface FollowerNotificationProps {
+ notification: NewFollowerNotification;
+}
+
+const FollowerNotification: FC
+
+
+
+
+
+
+
+
+ {getTimeFromNow(notification?.createdAt)}
+
+
+ {notification?.comment?.metadata?.content}
+
+
+
+
+ );
+};
+
+export default memo(FollowerNotification);
diff --git a/lenster-main/apps/web/src/components/Notification/Type/LikeNotification.tsx b/lenster-main/apps/web/src/components/Notification/Type/LikeNotification.tsx
new file mode 100644
index 0000000..45b2b87
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/LikeNotification.tsx
@@ -0,0 +1,86 @@
+import Markup from '@components/Shared/Markup';
+import UserPreview from '@components/Shared/UserPreview';
+import { HeartIcon } from '@heroicons/react/solid';
+import type { NewReactionNotification } from '@lenster/lens';
+import type { MessageDescriptor } from '@lenster/types/misc';
+import { formatTime, getTimeFromNow } from '@lib/formatTime';
+import { defineMessage } from '@lingui/macro';
+import { Trans } from '@lingui/react';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import { NotificationProfileAvatar, NotificationProfileName } from '../Profile';
+
+const messages: Record
+
+
+
+
+ {isSuperFollow ? (
+
+
+ ) : (
+
+
+ {getTimeFromNow(notification?.createdAt)}
+
+
+
+
+
+ );
+};
+
+export default memo(LikeNotification);
diff --git a/lenster-main/apps/web/src/components/Notification/Type/MentionNotification.tsx b/lenster-main/apps/web/src/components/Notification/Type/MentionNotification.tsx
new file mode 100644
index 0000000..cd0359a
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/MentionNotification.tsx
@@ -0,0 +1,85 @@
+import Markup from '@components/Shared/Markup';
+import UserPreview from '@components/Shared/UserPreview';
+import { AtSymbolIcon } from '@heroicons/react/solid';
+import type { NewMentionNotification } from '@lenster/lens';
+import type { MessageDescriptor } from '@lenster/types/misc';
+import { formatTime, getTimeFromNow } from '@lib/formatTime';
+import { defineMessage } from '@lingui/macro';
+import { Trans } from '@lingui/react';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import { NotificationProfileAvatar, NotificationProfileName } from '../Profile';
+
+const messages: Record
+
+
+
+
+
+
+
+
+ {getTimeFromNow(notification?.createdAt)}
+
+
+ {notification?.publication?.metadata?.content}
+
+
+
+
+ );
+};
+
+export default memo(MentionNotification);
diff --git a/lenster-main/apps/web/src/components/Notification/Type/MirrorNotification.tsx b/lenster-main/apps/web/src/components/Notification/Type/MirrorNotification.tsx
new file mode 100644
index 0000000..dd437cf
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/Type/MirrorNotification.tsx
@@ -0,0 +1,85 @@
+import Markup from '@components/Shared/Markup';
+import UserPreview from '@components/Shared/UserPreview';
+import { SwitchHorizontalIcon } from '@heroicons/react/solid';
+import type { NewMirrorNotification } from '@lenster/lens';
+import type { MessageDescriptor } from '@lenster/types/misc';
+import { formatTime, getTimeFromNow } from '@lib/formatTime';
+import { defineMessage } from '@lingui/macro';
+import { Trans } from '@lingui/react';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import { NotificationProfileAvatar, NotificationProfileName } from '../Profile';
+
+const messages: Record
+
+
+
+
+
+
+
+
+ {getTimeFromNow(notification?.createdAt)}
+
+
+
+ {notification?.mentionPublication?.metadata?.content}
+
+
+
+
+
+ );
+};
+
+export default memo(MirrorNotification);
diff --git a/lenster-main/apps/web/src/components/Notification/WalletProfile.tsx b/lenster-main/apps/web/src/components/Notification/WalletProfile.tsx
new file mode 100644
index 0000000..0b575ad
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/WalletProfile.tsx
@@ -0,0 +1,49 @@
+import { POLYGONSCAN_URL } from '@lenster/data/constants';
+import type { Wallet } from '@lenster/lens';
+import formatAddress from '@lenster/lib/formatAddress';
+import getStampFyiURL from '@lenster/lib/getStampFyiURL';
+import { Image } from '@lenster/ui';
+import Link from 'next/link';
+import type { FC } from 'react';
+
+interface NotificationWalletProfileProps {
+ wallet: Wallet;
+}
+
+export const NotificationWalletProfileAvatar: FC<
+ NotificationWalletProfileProps
+> = ({ wallet }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {getTimeFromNow(notification?.createdAt)}
+
+
+ {notification?.publication?.metadata?.content}
+
+
+ {formatAddress(wallet?.address)}
+
+ );
+};
diff --git a/lenster-main/apps/web/src/components/Notification/index.tsx b/lenster-main/apps/web/src/components/Notification/index.tsx
new file mode 100644
index 0000000..2862240
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Notification/index.tsx
@@ -0,0 +1,53 @@
+import MetaTags from '@components/Common/MetaTags';
+import { APP_NAME } from '@lenster/data/constants';
+import { PAGEVIEW } from '@lenster/data/tracking';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { useState } from 'react';
+import Custom404 from 'src/pages/404';
+import { useAppStore } from 'src/store/app';
+import { useEffectOnce } from 'usehooks-ts';
+
+import FeedType from './FeedType';
+import List from './List';
+import Settings from './Settings';
+
+const Notification: FC = () => {
+ const {
+ query: { type }
+ } = useRouter();
+ const currentProfile = useAppStore((state) => state.currentProfile);
+ const [feedType, setFeedType] = useState(
+ type &&
+ ['all', 'mentions', 'comments', 'likes', 'collects'].includes(
+ type as string
+ )
+ ? type.toString().toUpperCase()
+ : 'ALL'
+ );
+
+ useEffectOnce(() => {
+ Leafwatch.track(PAGEVIEW, { page: 'notifications' });
+ });
+
+ if (!currentProfile) {
+ return
+
+ );
+};
+
+export default Notification;
diff --git a/lenster-main/apps/web/src/components/Pages/Contact.tsx b/lenster-main/apps/web/src/components/Pages/Contact.tsx
new file mode 100644
index 0000000..483ea8c
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Pages/Contact.tsx
@@ -0,0 +1,138 @@
+import MetaTags from '@components/Common/MetaTags';
+import SettingsHelper from '@components/Shared/SettingsHelper';
+import { PencilAltIcon } from '@heroicons/react/outline';
+import { CheckCircleIcon } from '@heroicons/react/solid';
+import { APP_NAME, FRESHDESK_WORKER_URL } from '@lenster/data/constants';
+import { PAGEVIEW } from '@lenster/data/tracking';
+import {
+ Button,
+ Card,
+ EmptyState,
+ Form,
+ GridItemEight,
+ GridItemFour,
+ GridLayout,
+ Input,
+ Spinner,
+ TextArea,
+ useZodForm
+} from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import { t, Trans } from '@lingui/macro';
+import axios from 'axios';
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useEffectOnce } from 'usehooks-ts';
+import { object, string } from 'zod';
+
+const newContactSchema = object({
+ email: string().email({ message: t`Email is not valid` }),
+ subject: string()
+ .min(1, { message: t`Subject should not be empty` })
+ .max(260, {
+ message: t`Subject should not exceed 260 characters`
+ }),
+ message: string()
+ .min(1, { message: t`Message should not be empty` })
+ .max(1000, {
+ message: t`Message should not exceed 1000 characters`
+ })
+});
+
+const Contact: FC = () => {
+ const [submitted, setSubmitted] = useState(false);
+ const [submitting, setSubmitting] = useState(false);
+
+ const form = useZodForm({
+ schema: newContactSchema
+ });
+
+ useEffectOnce(() => {
+ Leafwatch.track(PAGEVIEW, { page: 'contact' });
+ });
+
+ const submitToFreshdesk = async (
+ email: string,
+ subject: string,
+ body: string
+ ) => {
+ setSubmitting(true);
+ try {
+ const { data } = await axios.post(FRESHDESK_WORKER_URL, {
+ email,
+ subject,
+ body
+ });
+
+ if (data.success) {
+ setSubmitted(true);
+ }
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ + Privacy Policy +
+
+
+
+ Updated {updatedAt}
+
+
+
+
+ );
+};
+
+export default Privacy;
diff --git a/lenster-main/apps/web/src/components/Pages/Terms.tsx b/lenster-main/apps/web/src/components/Pages/Terms.tsx
new file mode 100644
index 0000000..91f7e45
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Pages/Terms.tsx
@@ -0,0 +1,407 @@
+import MetaTags from '@components/Common/MetaTags';
+import Footer from '@components/Shared/Footer';
+import { APP_NAME } from '@lenster/data/constants';
+import { PAGEVIEW } from '@lenster/data/tracking';
+import { Leafwatch } from '@lib/leafwatch';
+import { t, Trans } from '@lingui/macro';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { useEffectOnce } from 'usehooks-ts';
+
+const Terms: FC = () => {
+ const updatedAt = 'December 11, 2022';
+
+ useEffectOnce(() => {
+ Leafwatch.track(PAGEVIEW, { page: 'terms' });
+ });
+
+ return (
+ <>
+
+
+
+
+
+ {/* 1. Overview beings */}
+
+
+ 1. Overview
+
+
+
+ {/* 1. Overview ends */}
+ {/* 2. Information Collection beings */}
+
+
+
+
+ 2. Information Collection
+
+
+
+ {/* 2. Information Collection ends */}
+ {/* 3. Use of Information begins */}
+
+
-
+
-
+
+ Information you provide such as feedback, question and + issues reports. + +
+
+
+
-
+
-
+
+ Log Files, to record events or errors that occur + when using our Site. + +
+ -
+
+ Cookies, small data stored on your device that are + necessary for you to browse the Site. + +
+ -
+
+ Public Information, data from activity that is + publicly visible and/or accessible on blockchains. This + may include blockchain addresses and information regarding + the NFTs in wallets. + +
+
+ 3. Use of Information
+
+
+
+ 4. Third-Parties
+
+
+
+ 5. Analytics
+
+
+
+ {/* 5. Analytics ends */}
+ {/* 6. Your Rights and Choices begins */}
+
+
+
+
+ 6. Your Rights and Choices
+
+
+
+ {/* 6. Your Rights and Choices ends */}
+ {/* 7. Data Security begins */}
+
+
-
+
-
+
+ Cookies. We will only use strictly necessary + cookies. These cookies are essential for you to browse the + Site and use its features, including accessing secure + areas of the Site. + +
+ -
+
+ Do Not Track. Your browser settings may allow you + to automatically transmit a “Do Not Track” signal to the + online services you visit. Note, however, there is no + industry consensus as to what Site and app operators + should do with regard to these signals. Accordingly, + unless and until the law is interpreted to require us to + do so, we do not monitor or take action with respect to + “Do Not Track” signals. For more information on “Do Not + Track,” visit{' '} + + https://allaboutdnt.com + + . + +
+
+ 7. Data Security
+
+
+
+ 8. Children
+
+
+
+ 9. Changes to Policy
+
+
+
+ 10. Contact
+
+
+
+
+
+
+
+
+
+
+
+
+ Terms & Conditions
+
+
+
+
+ Updated {updatedAt}
+
+
+
+
+ );
+};
+
+export default Terms;
diff --git a/lenster-main/apps/web/src/components/Pages/Thanks.tsx b/lenster-main/apps/web/src/components/Pages/Thanks.tsx
new file mode 100644
index 0000000..d019578
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Pages/Thanks.tsx
@@ -0,0 +1,103 @@
+import MetaTags from '@components/Common/MetaTags';
+import Footer from '@components/Shared/Footer';
+import { HeartIcon } from '@heroicons/react/outline';
+import { APP_NAME, STATIC_IMAGES_URL } from '@lenster/data/constants';
+import { PAGEVIEW } from '@lenster/data/tracking';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import Link from 'next/link';
+import { useTheme } from 'next-themes';
+import type { FC, ReactNode } from 'react';
+import { useEffectOnce } from 'usehooks-ts';
+
+interface BrandProps {
+ name: string;
+ logo: string;
+ url: string;
+ size: number;
+ type: 'svg' | 'png';
+ children: ReactNode;
+}
+
+const Brand: FC
+
+
+
+
+ {/* 1. Overview beings */}
+
+
+ 1. Overview
+
+
+
+ {/* 1. Overview ends */}
+ {/* 2. General Conditions beings */}
+
+
+
+
+
+ 2. General Conditions
+
+
+
+ 3. Services
+
+
+
+ {/* 3. Services ends */}
+ {/* 4. Accuracy, Completeness and Timeliness of information begins */}
+
+
+
+
-
+
-
+
Your profile your responsibility. +
+ -
+
+ You are responsible for securing the wallet that contains + your profiles. + +
+ -
+
+ You bear sole responsibility for evaluating the Site and + features before using them. + +
+
+
+
+
+
+
+ 4. Accuracy, Completeness and Timeliness of information
+
+
+
+
+ {/* 4. Accuracy, Completeness and Timeliness of information ends */}
+ {/* 5. Modification of Services begins */}
+
+
+
+ 5. Modification of Services
+
+
+
+ 6. Third-Party Services & Websites
+
+
+
+ {/* 6. Third-Party Services & Websites ends */}
+ {/* 7. Personal Information begins */}
+
+
+
+ 7. Personal Information
+
+
+
+ 8. Prohibited Usage
+
+
+
+ {/* 8. Prohibited Usage ends */}
+ {/* 9. Assumption of Risk begins */}
+
+
+
-
+
-
+
+ for any unlawful purpose and to solicit others to perform + or participate in any unlawful acts; + +
+ -
+
+ to violate any international, federal, provincial or state + regulations, rules, laws, or local ordinances; + +
+ -
+
+ to infringe upon or violate our intellectual property + rights or the intellectual property rights of others; + +
+ -
+
+ to harass, abuse, insult, harm, defame, slander, + disparage, intimidate, or discriminate based on gender, + sexual orientation, religion, ethnicity, race, age, + national origin, or disability; + +
+ -
+
+ to submit false or misleading information or to upload or + transmit viruses or any other type of malicious code that + will or may be used in any way that will affect the + functionality or operation of the Site or of any related + website, other websites, or the Internet; + +
+ -
+
+ to collect or track the personal information of others to + spam, phish, pretext, crawl, or scrape; + +
+ -
+
+ for any obscene or immoral purpose or to interfere with or + circumvent the security features of the Site or any + related website, other websites, or the Internet. We + reserve the right to terminate your use of the Site or any + related website for violating any of the prohibited uses. + +
+
+ 9. Assumption of Risk
+
+
+
+ 10. Disclaimer of Warranties
+
+
+
+ 11. Termination and Cancellation
+
+
+
+ {/* 11. Termination and Cancellation ends */}
+ {/* 12. Contact Information begins */}
+
+
+
+ 12. Contact Information
+
+
+
+
+
+
+ 
+
+ );
+};
+
+const Thanks: FC = () => {
+ return (
+ <>
+ {children}
+
+
+ ➜ Go to {name}
+
+
+
+
+
+
+
+
+ Thank you!
+ for supporting our community
+
+
+
+ );
+};
+
+export default Thanks;
diff --git a/lenster-main/apps/web/src/components/Profile/Achievements/Streaks.tsx b/lenster-main/apps/web/src/components/Profile/Achievements/Streaks.tsx
new file mode 100644
index 0000000..1d21fad
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Achievements/Streaks.tsx
@@ -0,0 +1,58 @@
+import { ACHIEVEMENTS_WORKER_URL } from '@lenster/data/constants';
+import type { Profile } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import { Card } from '@lenster/ui';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import type { FC } from 'react';
+import type { Activity } from 'react-activity-calendar';
+import ActivityCalendar from 'react-activity-calendar';
+
+interface StreaksProps {
+ profile: Profile;
+}
+
+const Streaks: FC
+
+
+
+
+
+ Vercel combines the best developer experience with an obsessive
+ focus on end-user performance. Vercel platform enables frontend
+ teams to do their best work.
+
+
+ 4EVERLAND is a Web 3.0 cloud computing platform that integrates
+ storage, computing, and network core capabilities.
+
+
+
+
+
+ Loading
+ No events today
+
+ Latest events
+
+
+
+
+ {data.map((streak: { id: string; event: string; date: string }) => (
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default Achievements;
diff --git a/lenster-main/apps/web/src/components/Profile/Badges/Ens.tsx b/lenster-main/apps/web/src/components/Profile/Badges/Ens.tsx
new file mode 100644
index 0000000..9912f38
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Badges/Ens.tsx
@@ -0,0 +1,37 @@
+import { STATIC_IMAGES_URL } from '@lenster/data/constants';
+import type { Profile } from '@lenster/lens';
+import { Tooltip } from '@lenster/ui';
+import { Trans } from '@lingui/macro';
+import type { FC } from 'react';
+
+interface EnsProps {
+ profile: Profile;
+}
+
+const Ens: FC
+ 
+ 
+ 
+
+
+
+ );
+};
+
+export default Badges;
diff --git a/lenster-main/apps/web/src/components/Profile/Cover.tsx b/lenster-main/apps/web/src/components/Profile/Cover.tsx
new file mode 100644
index 0000000..b9a0d69
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Cover.tsx
@@ -0,0 +1,31 @@
+import { COVER, STATIC_IMAGES_URL } from '@lenster/data/constants';
+import imageKit from '@lenster/lib/imageKit';
+import sanitizeDStorageUrl from '@lenster/lib/sanitizeDStorageUrl';
+import type { FC } from 'react';
+import colors from 'tailwindcss/colors';
+
+interface CoverProps {
+ cover: string;
+}
+
+const Cover: FC
+ {icon}
+
+ );
+
+ const followType = profile?.followModule?.__typename;
+ const misuseDetails = getMisuseDetails(profile.id);
+
+ return (
+ {children}
+
+
+ );
+};
+
+export default Details;
diff --git a/lenster-main/apps/web/src/components/Profile/Feed.tsx b/lenster-main/apps/web/src/components/Profile/Feed.tsx
new file mode 100644
index 0000000..129d80e
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Feed.tsx
@@ -0,0 +1,167 @@
+import SinglePublication from '@components/Publication/SinglePublication';
+import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
+import { CollectionIcon } from '@heroicons/react/outline';
+import type {
+ Profile,
+ Publication,
+ PublicationsQueryRequest
+} from '@lenster/lens';
+import {
+ PublicationMainFocus,
+ PublicationTypes,
+ useProfileFeedQuery
+} from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import { Card, EmptyState, ErrorMessage } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useInView } from 'react-cool-inview';
+import { ProfileFeedType } from 'src/enums';
+import { useAppStore } from 'src/store/app';
+import { useProfileFeedStore } from 'src/store/profile-feed';
+
+interface FeedProps {
+ profile: Profile;
+ type:
+ | ProfileFeedType.Feed
+ | ProfileFeedType.Replies
+ | ProfileFeedType.Media
+ | ProfileFeedType.Collects;
+}
+
+const Feed: FC
+ setExpandedImage(getAvatar(profile, EXPANDED_AVATAR))}
+ src={getAvatar(profile)}
+ className="h-32 w-32 cursor-pointer rounded-xl bg-gray-200 ring-8 ring-gray-50 dark:bg-gray-700 dark:ring-black sm:h-52 sm:w-52"
+ height={128}
+ width={128}
+ alt={formatHandle(profile?.handle)}
+ data-testid="profile-avatar"
+ />
+ setExpandedImage(null)}
+ />
+
+
+
+ {profile?.bio ? (
+
+
+
+ ) : null}
+ {hasMisused(profile.id) ? (
+
+
+ ) : null}
+
+
+ {sanitizeDisplayName(profile?.name) ??
+ formatHandle(profile?.handle)}
+
+ {isVerified(profile.id) ? (
+
+ {profile?.name ? (
+
+
+ Follows you
+
+ ) : null}
+
+ {profile?.bio}
+
+ ) : null}
+
+
+ {profile.invitedBy ? (
+ <>
+
+
+ {currentProfile?.id === profile.id ? (
+
+ }
+ outline
+ >
+ Edit Profile
+
+
+ ) : followType !== 'RevertFollowModuleSettings' ? (
+ following ? (
+ <>
+
+ {currentProfile?.id !== profile.id ? (
+ <>
+
+
+
+ {parseInt(profile.id)}
+
+
+
+ {getProfileAttribute(profile?.attributes, 'location') ? (
+ 
+ )
+ }
+ dataTestId="profile-meta-x"
+ >
+
+ {getProfileAttribute(profile?.attributes, 'x')?.replace(
+ 'https://x.com/',
+ ''
+ )}
+
+
+ ) : null}
+
+
+ )
+ }
+ dataTestId="profile-meta-x"
+ >
+
+ {getProfileAttribute(profile?.attributes, 'x')?.replace(
+ 'https://x.com/',
+ ''
+ )}
+
+
+ ) : null}
+
+
+ );
+};
+
+export default FeedType;
diff --git a/lenster-main/apps/web/src/components/Profile/Filters/MediaFilter.tsx b/lenster-main/apps/web/src/components/Profile/Filters/MediaFilter.tsx
new file mode 100644
index 0000000..4deaa94
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Filters/MediaFilter.tsx
@@ -0,0 +1,91 @@
+import MenuTransition from '@components/Shared/MenuTransition';
+import { Menu } from '@headlessui/react';
+import { AdjustmentsIcon } from '@heroicons/react/outline';
+import { Checkbox, Tooltip } from '@lenster/ui';
+import { t } from '@lingui/macro';
+import clsx from 'clsx';
+import type { ChangeEvent } from 'react';
+import { useProfileFeedStore } from 'src/store/profile-feed';
+
+const MediaFilter = () => {
+ const mediaFeedFilters = useProfileFeedStore(
+ (state) => state.mediaFeedFilters
+ );
+ const setMediaFeedFilters = useProfileFeedStore(
+ (state) => state.setMediaFeedFilters
+ );
+
+ const handleChange = (e: ChangeEvent
+
+ {feedType === ProfileFeedType.Media ?
+
+ );
+};
+
+export default FollowModal;
diff --git a/lenster-main/apps/web/src/components/Profile/Followerings.tsx b/lenster-main/apps/web/src/components/Profile/Followerings.tsx
new file mode 100644
index 0000000..483c9ad
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Followerings.tsx
@@ -0,0 +1,90 @@
+import { UsersIcon } from '@heroicons/react/outline';
+import { PROFILE } from '@lenster/data/tracking';
+import type { Profile } from '@lenster/lens';
+import humanize from '@lenster/lib/humanize';
+import { Modal } from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import { Plural, t } from '@lingui/macro';
+import type { FC } from 'react';
+import { useState } from 'react';
+
+import Followers from './Followers';
+import Following from './Following';
+
+interface FolloweringsProps {
+ profile: Profile;
+}
+
+const Followerings: FC
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default Followerings;
diff --git a/lenster-main/apps/web/src/components/Profile/Followers.tsx b/lenster-main/apps/web/src/components/Profile/Followers.tsx
new file mode 100644
index 0000000..dde3c2e
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Followers.tsx
@@ -0,0 +1,110 @@
+import Loader from '@components/Shared/Loader';
+import UserProfile from '@components/Shared/UserProfile';
+import WalletProfile from '@components/Shared/WalletProfile';
+import { UsersIcon } from '@heroicons/react/outline';
+import { FollowUnfollowSource } from '@lenster/data/tracking';
+import type { FollowersRequest, Profile, Wallet } from '@lenster/lens';
+import { useFollowersQuery } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import { EmptyState, ErrorMessage } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import type { FC } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { useAppStore } from 'src/store/app';
+
+interface FollowersProps {
+ profile: Profile;
+}
+
+const Followers: FC
+ {
+ return (
+
+ {follower?.wallet?.defaultProfile ? (
+
+ );
+ }}
+ />
+
+ );
+};
+
+export default Followers;
diff --git a/lenster-main/apps/web/src/components/Profile/Following.tsx b/lenster-main/apps/web/src/components/Profile/Following.tsx
new file mode 100644
index 0000000..44555b7
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Following.tsx
@@ -0,0 +1,117 @@
+import Loader from '@components/Shared/Loader';
+import UserProfile from '@components/Shared/UserProfile';
+import { UsersIcon } from '@heroicons/react/outline';
+import { FollowUnfollowSource } from '@lenster/data/tracking';
+import type { FollowingRequest, Profile } from '@lenster/lens';
+import { useFollowingQuery } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import { EmptyState, ErrorMessage } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import type { FC } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+interface FollowingProps {
+ profile: Profile;
+ onProfileSelected?: (profile: Profile) => void;
+}
+
+const Following: FC
+ {
+ return (
+ {
+ onProfileSelected(following.profile as Profile);
+ }
+ : undefined
+ }
+ aria-hidden="true"
+ >
+
+ );
+ }}
+ />
+
+ );
+};
+
+export default Following;
diff --git a/lenster-main/apps/web/src/components/Profile/InvitedBy.tsx b/lenster-main/apps/web/src/components/Profile/InvitedBy.tsx
new file mode 100644
index 0000000..1ad75f3
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/InvitedBy.tsx
@@ -0,0 +1,37 @@
+import Slug from '@components/Shared/Slug';
+import type { Profile } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import getAvatar from '@lenster/lib/getAvatar';
+import { Image } from '@lenster/ui';
+import { Trans } from '@lingui/macro';
+import Link from 'next/link';
+import type { FC } from 'react';
+
+interface InvitedByProps {
+ profile: Profile;
+}
+
+const InvitedBy: FC
+
+
+ Invited by
+
+
+
+ );
+};
+
+export default InvitedBy;
diff --git a/lenster-main/apps/web/src/components/Profile/Menu/Report.tsx b/lenster-main/apps/web/src/components/Profile/Menu/Report.tsx
new file mode 100644
index 0000000..7d80f07
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/Menu/Report.tsx
@@ -0,0 +1,35 @@
+import { FlagIcon } from '@heroicons/react/outline';
+import type { Profile } from '@lenster/lens';
+import { Trans } from '@lingui/macro';
+import clsx from 'clsx';
+import type { FC } from 'react';
+import { useGlobalModalStateStore } from 'src/store/modals';
+
+interface ReportProfileProps {
+ profile: Profile;
+}
+
+const Report: FC
+
+
+ Copy link
+
+
+
+ );
+};
+
+export default MutualFollowersList;
diff --git a/lenster-main/apps/web/src/components/Profile/MutualFollowers/index.tsx b/lenster-main/apps/web/src/components/Profile/MutualFollowers/index.tsx
new file mode 100644
index 0000000..8affd4c
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/MutualFollowers/index.tsx
@@ -0,0 +1,109 @@
+import type { Profile } from '@lenster/lens';
+import { useMutualFollowersQuery } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import getAvatar from '@lenster/lib/getAvatar';
+import { Image } from '@lenster/ui';
+import { Trans } from '@lingui/macro';
+import type { Dispatch, FC, ReactNode, SetStateAction } from 'react';
+import { useAppStore } from 'src/store/app';
+
+interface MutualFollowersProps {
+ setShowMutualFollowersModal?: Dispatch
+ {profiles?.map((profile, index) => (
+
+
+ ))}
+
+ {hasMore ? : null}
+ setShowMutualFollowersModal?.(true)}
+ aria-hidden="true"
+ >
+
+ );
+
+ if (totalCount === 0 || loading || error) {
+ return null;
+ }
+
+ const profileOne = profiles[0];
+ const profileTwo = profiles[1];
+ const profileThree = profiles[2];
+
+ if (profiles?.length === 1) {
+ return (
+
+ {profiles?.map((profile) => (
+
+
+
+ Followed by {' '}
+
+ {children}
+
+
+
+
+ {currentStep === CreateSteps.REVIEW
+ ? t`Review collection`
+ : t`Select collectibles you want others to see`}
+
+
+ );
+ }
+
+ return t`What's your gallery name?`;
+ };
+
+ const loadingNext = loading || updating || renaming;
+
+ return (
+
+ {currentStep === CreateSteps.NAME ? (
+
+ setGallery({
+ ...gallery,
+ name: event.target.value,
+ items: gallery.items
+ })
+ }
+ />
+ ) : currentStep === CreateSteps.PICK_NFTS ? (
+
+
+ {currentStep === 'NAME' ? (
+
+ ) : (
+ {gallery.items.length} selected
+ )}
+
+
+ 
+ Subscape #363
+
+
+
+ {profiles?.map((profile) => (
+
+
+ Sasi, Jouni, Yogi, and 10 others own Subscapes
+
+ Description
++ A generative algorithm that draws the impression of a landscape from + a multitude of possibilities. The unique seed from each token drives + the parametric assortment of lines, colors, and forms into a + constructed composition. +
+Owner
+
+
+ Floor price
+ 1.2 ETH
+
+
+ Contract address
+ {currentProfile?.ownedBy}
+
+
+ Token ID
+ 12
+ View on
+
+
+ 
+ Lensport
+
+
+
+ Opensea
+
+
+
+ Rarible
+
+
+
+ Uniswap
+
+
+
+ Looksrare
+
+
+
+ Etherscan
+
+
+
+ Lensport
+
+
+
+ Opensea
+
+
+
+ Rarible
+
+
+
+ Uniswap
+
+
+
+ Looksrare
+
+
+
+ Etherscan
+
+
+
+ {isRearrange ? (
+ + {isRearrange ? 'Arrange gallery' : gallery.name} +
+ {galleryStore?.isEdit ? ( +
+
+
+
+ ) : currentProfile && currentProfile?.id === gallery.profileId ? (
+
+ ) : null}
+
+ {nfts?.map((nft) => (
+
+ )}
+
+ );
+};
+
+export default Gallery;
diff --git a/lenster-main/apps/web/src/components/Profile/NftGallery/NftCard.tsx b/lenster-main/apps/web/src/components/Profile/NftGallery/NftCard.tsx
new file mode 100644
index 0000000..756b3d1
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/NftGallery/NftCard.tsx
@@ -0,0 +1,66 @@
+import { STATIC_IMAGES_URL } from '@lenster/data/constants';
+import type { Nft } from '@lenster/lens';
+import sanitizeDStorageUrl from '@lenster/lib/sanitizeDStorageUrl';
+import Link from 'next/link';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+interface NFTProps {
+ nft: Nft;
+ linkToDetail?: boolean;
+}
+
+const NFTImage: FC
+
+ ))}
+
+ {nft?.originalContent?.animatedUrl?.includes('.gltf') ? (
+
+ ) : (
+
+ )}
+
+ ) : (
+
+ );
+};
+
+const NftCard: FC
+
+ );
+};
+
+export default memo(NftCard);
diff --git a/lenster-main/apps/web/src/components/Profile/NftGallery/NoGallery.tsx b/lenster-main/apps/web/src/components/Profile/NftGallery/NoGallery.tsx
new file mode 100644
index 0000000..87f3974
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/NftGallery/NoGallery.tsx
@@ -0,0 +1,90 @@
+import { STATIC_IMAGES_URL } from '@lenster/data/constants';
+import type { Profile } from '@lenster/lens';
+import sanitizeDisplayName from '@lenster/lib/sanitizeDisplayName';
+import { Button } from '@lenster/ui';
+import { Trans } from '@lingui/macro';
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useAppStore } from 'src/store/app';
+
+import Create from './Create';
+
+interface NoGalleryProps {
+ profile: Profile;
+}
+
+const NoGallery: FC
+
+ );
+};
+
+export default NoGallery;
diff --git a/lenster-main/apps/web/src/components/Profile/NftGallery/Picker.tsx b/lenster-main/apps/web/src/components/Profile/NftGallery/Picker.tsx
new file mode 100644
index 0000000..11fb84b
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/NftGallery/Picker.tsx
@@ -0,0 +1,196 @@
+import NftsShimmer from '@components/Shared/Shimmer/NftsShimmer';
+import SingleNft from '@components/Shared/SingleNft';
+import { CheckIcon, CollectionIcon } from '@heroicons/react/outline';
+import { IS_MAINNET } from '@lenster/data/constants';
+import type { Nft, NfTsRequest } from '@lenster/lens';
+import { useNftFeedQuery } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import { ErrorMessage } from '@lenster/ui';
+import { t, Trans } from '@lingui/macro';
+import clsx from 'clsx';
+import type { FC } from 'react';
+import { useInView } from 'react-cool-inview';
+import { toast } from 'react-hot-toast';
+import { CHAIN_ID } from 'src/constants';
+import { useAppStore } from 'src/store/app';
+import type { NftGalleryItem } from 'src/store/nft-gallery';
+import { useNftGalleryStore } from 'src/store/nft-gallery';
+import { mainnet } from 'wagmi/chains';
+
+interface PickerProps {
+ onlyAllowOne?: boolean;
+}
+
+const Picker: FC
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ {!isOwner ? (
+ <>
+
+
+
+ {isOwner ? (
+
+ ) : null}
+ + {sanitizeDisplayName(profile.name) ?? profile.handle} hasn't setup + gallery yet! +
+Check again later
+ + ) : ( + <> +
+ Welcome to your gallery
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return
+
+
+
+
+
+ @{formatHandle(currentProfile?.handle)}
+
+
+ doesn't have any NFTs!
+
+
+
+ {nfts?.map((nft, index) => {
+ const id = `${nft.chainId}_${nft.contractAddress}_${nft.tokenId}`;
+ const isSelected = selectedItems.includes(id);
+ return (
+
+ );
+};
+
+export default Picker;
diff --git a/lenster-main/apps/web/src/components/Profile/NftGallery/ReArrange.tsx b/lenster-main/apps/web/src/components/Profile/NftGallery/ReArrange.tsx
new file mode 100644
index 0000000..80353c7
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/NftGallery/ReArrange.tsx
@@ -0,0 +1,77 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import {
+ arrayMove,
+ rectSortingStrategy,
+ SortableContext
+} from '@dnd-kit/sortable';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+import { useNftGalleryStore } from 'src/store/nft-gallery';
+
+import DraggableCard from './DraggableCard';
+
+const ReArrange: FC = () => {
+ const gallery = useNftGalleryStore((state) => state.gallery);
+ const setGallery = useNftGalleryStore((state) => state.setGallery);
+ const [allNfts, setAllNfts] = useState(gallery.items);
+
+ useEffect(() => {
+ setGallery({ ...gallery, items: allNfts });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [allNfts]);
+
+ const handleDragEnd = ({ active, over }: DragEndEvent) => {
+ if (!over) {
+ return;
+ }
+
+ setAllNfts((items) => {
+ const newItems = arrayMove(
+ items,
+ items.findIndex((i) => i.itemId === active?.id),
+ items.findIndex((i) => i.itemId === over?.id)
+ ).map((item, i) => {
+ item.newOrder = i;
+ return item;
+ });
+ const movedItem = items.find((i) => i.itemId === active?.id);
+ if (movedItem) {
+ let reArranged = gallery.reArrangedItems;
+ let alreadyExistsIndex = gallery.reArrangedItems.findIndex(
+ (i) => i.itemId === active?.id
+ );
+ if (alreadyExistsIndex >= 0) {
+ reArranged[alreadyExistsIndex].newOrder = movedItem.newOrder;
+ } else {
+ reArranged.push(movedItem);
+ }
+ setGallery({
+ ...gallery,
+ reArrangedItems: reArranged
+ });
+ }
+ return newItems;
+ });
+ };
+
+ return (
+
+ {isSelected ? (
+
+ ) : null}
+
+
+ );
+ })}
+ {hasMore ? : null}
+
+ {allNfts.map((item) => {
+ const id = `${item.chainId}_${item.contractAddress}_${item.tokenId}`;
+ return
+
+
+ );
+ }
+
+ return (
+
+ {gallery.items?.map((item) => (
+
+ );
+};
+
+export default ReviewSelection;
diff --git a/lenster-main/apps/web/src/components/Profile/NftGallery/index.tsx b/lenster-main/apps/web/src/components/Profile/NftGallery/index.tsx
new file mode 100644
index 0000000..6364473
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Profile/NftGallery/index.tsx
@@ -0,0 +1,31 @@
+import NftGalleryShimmer from '@components/Shared/Shimmer/NftGalleryShimmer';
+import type { NftGallery, Profile } from '@lenster/lens';
+import { useNftGalleriesQuery } from '@lenster/lens';
+import type { FC } from 'react';
+
+import Gallery from './Gallery';
+import NoGallery from './NoGallery';
+
+interface NftGalleryHomeProps {
+ profile: Profile;
+}
+
+const NftGalleryHome: FC
+
+ ))}
+
+
+
+
+
+ {misuseDetails?.description ? (
+
+
+ Identified on: {misuseDetails?.identifiedOn} +
+ ) : null} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {collectModule?.followerOnly ? (
+
+
+ );
+};
+
+export default CollectModule;
diff --git a/lenster-main/apps/web/src/components/Publication/Actions/Collect/Splits.tsx b/lenster-main/apps/web/src/components/Publication/Actions/Collect/Splits.tsx
new file mode 100644
index 0000000..72a15ec
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Publication/Actions/Collect/Splits.tsx
@@ -0,0 +1,85 @@
+import Slug from '@components/Shared/Slug';
+import { POLYGONSCAN_URL } from '@lenster/data/constants';
+import type { Profile, RecipientDataOutput } from '@lenster/lens';
+import { useProfilesQuery } from '@lenster/lens';
+import formatAddress from '@lenster/lib/formatAddress';
+import formatHandle from '@lenster/lib/formatHandle';
+import getAvatar from '@lenster/lib/getAvatar';
+import getStampFyiURL from '@lenster/lib/getStampFyiURL';
+import { Trans } from '@lingui/macro';
+import Link from 'next/link';
+import type { FC } from 'react';
+
+interface SplitsProps {
+ recipients: RecipientDataOutput[];
+}
+
+const Splits: FC
+
+ ) : null}
+
+ {publication?.metadata?.name ? (
+
+ {publication?.metadata?.content}
+
+ ) : null}
+
+ {amount ? (
+
+ {publication?.metadata?.name}
+
+ ) : null}
+ {publication?.metadata?.content ? (
+
+
+
+ {amount}
+ {currency}
+ {usdPrice ? (
+ <>
+ ·
+
+ ${(amount * usdPrice).toFixed(2)}
+
+
+ ) : null}
+
+
+ ) : null}
+
+
+
+
+ {revenueData?.publicationRevenue ? (
+
+
+ {collectLimit ? (
+
+
+ ) : null}
+ {referralFee ? (
+
+ {parseInt(collectLimit) - count} available
+
+
+
+ ) : null}
+
+ {referralFee}% referral fee
+
+
+
+ ) : null}
+ {endTimestamp ? (
+
+
+ Revenue:
+
+
+
+
+
+
+
+ {revenue}
+ {currency}
+ {usdPrice ? (
+ <>
+ ·
+
+ ${(revenue * usdPrice).toFixed(2)}
+
+
+ ) : null}
+
+
+ ) : null}
+ {data?.publication?.collectNftAddress ? (
+
+
+ Sale Ends:
+
+
+ {formatDate(endTimestamp, 'MMMM DD, YYYY')} at{' '}
+ {formatDate(endTimestamp, 'hh:mm a')}
+
+
+
+
+ ) : null}
+ {isMultirecipientFeeCollectModule ? (
+
+
+ Token:
+
+
+ {formatAddress(data?.publication?.collectNftAddress)}
+
+
+
+ {currentProfile &&
+ (!hasCollectedByMe ||
+ (!isFreeCollectModule && !isSimpleFreeCollectModule)) ? (
+ allowanceLoading || balanceLoading ? (
+
+ ) : allowed ? (
+ hasAmount ? (
+ !isLimitedCollectAllCollected && !isCollectExpired ? (
+
+ ) : (
+ Collect now
+
+ ) : null
+ ) : (
+
+ {publication?.hasCollectedByMe ? (
+
+
+ ) : null}
+
+ You already collected this
+
+
+
+ );
+};
+
+export default Splits;
diff --git a/lenster-main/apps/web/src/components/Publication/Actions/Collect/index.tsx b/lenster-main/apps/web/src/components/Publication/Actions/Collect/index.tsx
new file mode 100644
index 0000000..ed8b105
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Publication/Actions/Collect/index.tsx
@@ -0,0 +1,107 @@
+import Loader from '@components/Shared/Loader';
+import { CollectionIcon } from '@heroicons/react/outline';
+import { CollectionIcon as CollectionIconSolid } from '@heroicons/react/solid';
+import { PUBLICATION } from '@lenster/data/tracking';
+import type { ElectedMirror, Publication } from '@lenster/lens';
+import humanize from '@lenster/lib/humanize';
+import nFormatter from '@lenster/lib/nFormatter';
+import { Modal, Tooltip } from '@lenster/ui';
+import { Leafwatch } from '@lib/leafwatch';
+import { plural, t } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+
+const CollectModule = dynamic(() => import('./CollectModule'), {
+ loading: () =>
+ Fee recipients
+
+ {recipients.map((recipient) => {
+ const { recipient: address, split } = recipient;
+ const profile = getProfileByAddress(address) as Profile;
+
+ return (
+
+
+ );
+ })}
+
+ {loading ? (
+ <>
+
+
+
+ ) : (
+ <>
+ 
+ {profile ? (
+
+
+ {split}%
+
+ {
+ setShowCollectModal(true);
+ Leafwatch.track(PUBLICATION.COLLECT_MODULE.OPEN_COLLECT);
+ }}
+ aria-label="Collect"
+ >
+
+ {count > 0 && !showCount ? (
+ {nFormatter(count)}
+ ) : null}
+
+
+
+ {hasCollected ? (
+
+
+
+
+
+
+ {count > 0 && !showCount ? (
+ {nFormatter(count)}
+ ) : null}
+
+ );
+};
+
+export default Comment;
diff --git a/lenster-main/apps/web/src/components/Publication/Actions/Like.tsx b/lenster-main/apps/web/src/components/Publication/Actions/Like.tsx
new file mode 100644
index 0000000..c606b0c
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Publication/Actions/Like.tsx
@@ -0,0 +1,172 @@
+import { HeartIcon } from '@heroicons/react/outline';
+import { HeartIcon as HeartIconSolid } from '@heroicons/react/solid';
+import { Errors } from '@lenster/data/errors';
+import { PUBLICATION } from '@lenster/data/tracking';
+import type { Publication } from '@lenster/lens';
+import {
+ ReactionTypes,
+ useAddReactionMutation,
+ useRemoveReactionMutation
+} from '@lenster/lens';
+import type { ApolloCache } from '@lenster/lens/apollo';
+import { publicationKeyFields } from '@lenster/lens/apollo/lib';
+import nFormatter from '@lenster/lib/nFormatter';
+import { Tooltip } from '@lenster/ui';
+import errorToast from '@lib/errorToast';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import { motion } from 'framer-motion';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useAppStore } from 'src/store/app';
+
+interface LikeProps {
+ publication: Publication;
+ showCount: boolean;
+}
+
+const Like: FC
+ 0 ? t`${humanize(count)} Comments` : t`Comment`}
+ withDelay
+ >
+
+
+
+
+
+
+ {count > 0 && !showCount ? (
+ {nFormatter(count)}
+ ) : null}
+
+ );
+};
+
+export default Like;
diff --git a/lenster-main/apps/web/src/components/Publication/Actions/Menu/Bookmark.tsx b/lenster-main/apps/web/src/components/Publication/Actions/Menu/Bookmark.tsx
new file mode 100644
index 0000000..75f4e2f
--- /dev/null
+++ b/lenster-main/apps/web/src/components/Publication/Actions/Menu/Bookmark.tsx
@@ -0,0 +1,136 @@
+import { Menu } from '@headlessui/react';
+import { BookmarkIcon as BookmarkIconOutline } from '@heroicons/react/outline';
+import { BookmarkIcon as BookmarkIconSolid } from '@heroicons/react/solid';
+import { PUBLICATION } from '@lenster/data/tracking';
+import type {
+ Publication,
+ PublicationProfileBookmarkRequest
+} from '@lenster/lens';
+import {
+ useAddPublicationProfileBookmarkMutation,
+ useRemovePublicationProfileBookmarkMutation
+} from '@lenster/lens';
+import type { ApolloCache } from '@lenster/lens/apollo';
+import { publicationKeyFields } from '@lenster/lens/apollo/lib';
+import stopEventPropagation from '@lenster/lib/stopEventPropagation';
+import errorToast from '@lib/errorToast';
+import { Leafwatch } from '@lib/leafwatch';
+import { t } from '@lingui/macro';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import type { FC } from 'react';
+import { toast } from 'react-hot-toast';
+import { useAppStore } from 'src/store/app';
+
+interface BookmarkProps {
+ publication: Publication;
+}
+
+const Bookmark: FC
+
+ {liked ? (
+
+
+
+ {bookmarked ? (
+ <>
+
+ Remove Bookmark
+
+ ) : (
+ <>
+ Bookmark
+
+ )}
+
+
+
+ {publicationType === 'Comment' ? (
+ Copy comment text
+ ) : (
+ Copy post text
+ )}
+
+
+
+ Delete
+
+ {notInterested ? (
+ <>
+
+ Undo Not interested
+
+ ) : (
+ <>
+ Not interested
+
+ )}
+
+
+ Report post
+
+
+
+ Share
+
+
+
+
+ Translate
+
+
+
+
+
+