fix: update documentation (#1963)

docs/milestone-2-documentation.md

@@ -6,7 +6,7 @@ We've released a new version of Myriad Social, which is now built on the Polkado
 
 ## 1. Adding New Wallet Integrations for Rococo
 
-With the transition to Rococo, Myriad Social is adding new wallet integrations to enhance user experience and broaden accessibility. Users can now do Crypto Wallet authentication from the Myriad Social Rococo Substrate blockchain. 
+With the transition to Rococo, Myriad Social is adding new wallet integrations to enhance user experience and broaden accessibility. Users can now do Crypto Wallet authentication from the Myriad Social Rococo Substrate blockchain.
 
 ![image](./S1CCRYbva.png)
 
@@ -16,7 +16,7 @@ This enables users to have a seamless and secure experience within the Myriad So
 
 With the addition of a Myriad Social Rococo wallet integration it is easier to integrate the new chain to the already existing content tipping and exclusive content already available in the platform.
 
-Exclusive content can now be priced in $MYRIAr a currency that is native to the new Myriad Social Rococo blockchain. 
+Exclusive content can now be priced in $MYRIAr a currency that is native to the new Myriad Social Rococo blockchain.
 
 ![image](./Hk3G19-vp.png)
 

docs/milestone-2-testing-guide.md

@@ -16,7 +16,7 @@ If you've haven't used Myriad Social before to test the new features you would n
 
 ## 1. Testing Myriad Social Wallet Integration
 
-The wallet integration focuses on two functionalities authentication and moving chains. In a multi-chain ecosystem users will need to be able to change the chain they are on seamlessly. 
+The wallet integration focuses on two functionalities authentication and moving chains. In a multi-chain ecosystem users will need to be able to change the chain they are on seamlessly.
 
 ### 1.1. Login Using Myriad Social Rococo
 

docs/milestone-3-documentation.md

@@ -8,19 +8,21 @@ In our latest milestone, we have introduced a refreshed user interface aimed at
 
 We have revamped the Polkadot wallet integration process to make it more user-friendly. A step-by-step guide with interactive tooltips now assists you through every stage of connecting your Polkadot wallet.
 
-![Polkadot Setup Guide]()
+![Polkadot Setup Guide](./select-wallet.png)
+![Polkadot Setup User Select Guide](./select-user.png)
+![Sign the wallet](./wallet-sign-in.png)
 
 The new Polkadot setup and connection process offers several enhancements. It includes **interactive tooltips** that provide real-time assistance when hovering over elements during the setup. Additionally, the **simplified connection flow** reduces the number of steps and offers clearer instructions, ensuring you can connect your wallet seamlessly. Furthermore, enhanced visuals with intuitive graphics guide you through the entire process, making the experience more user-friendly and visually appealing.
 
 ## 2. Simplified Transaction Flow for Tipping and Exclusive Content
 
 We have streamlined the transaction processes for tipping creators and accessing exclusive content, ensuring a smoother experience.
 
-![Simplified Tipping Flow]()
+![Simplified Tipping Flow](./send-tip.png)
+![Send Tip](./send-tip-myriar.png)
 
 The new **Tipping Enhancements** bring a more seamless and transparent experience for users. With a **unified interface**, the tipping window is now consolidated and easy to navigate, simplifying the process. **Quick access buttons** allow users to tip creators directly from their posts without the need for extra navigation, making support instant and effortless. Moreover, **transparent fees** ensure that any transaction costs are clearly displayed before confirming a tip, fostering trust and clarity in every transaction.
 
-
 ## 3. Token On-Ramp
 
 We have introduced the Token On-Ramp feature, which allows you to purchase $MYRIA tokens directly within the platform.
@@ -31,11 +33,17 @@ The Token On-Ramp feature allowing you to purchase $MYRIA tokens directly within
 
 ## 4. Simplified Timeline Discovery and First Step Guide for New Users
 
-![Timeline Discovery]()
+![Timeline Discovery](./timeline-discovery.png)
+
+Discovering new timelines and managing your own is now more intuitive thanks to a revamped layout and enhanced search capabilities, allowing users to discover new timeline based on tags user want to see or dont want to see.
 
-Discovering new timelines and managing your own is now more intuitive thanks to a revamped layout and enhanced search capabilities.
+![First Step Guide](./create-timeline.png)
 
-![First Step Guide]()
+The first step for user is to click the create timeline button that redirects user to our multi staged timeline creation interface designed to prevent information overload to user while still allowing user to have more granular control over their timeline.
+
+![Step One](./timeline-creation-1.png)
+![Step Two](./timeline-creation-2.png)
+![Step Three](./create-timeline-3.png)
 
 The new user onboarding guide includes Step-by-Step Tooltips, which provide contextual tips as you navigate through the platform, and an Onboarding Checklist that allows you to keep track of your progress with a list of introductory tasks. These features work together to ensure a smooth and comprehensive onboarding experience, helping you become familiar with the platform efficiently and effectively.
 
@@ -58,6 +66,7 @@ The new account sharing system introduces a secure way to manage multiple user a
 Our B2B implementation offers essential features for team management, including timeline collaboration for shared contributions, a content metrics dashboard to track engagement and performance, and access level management to control user permissions. Designed with a focus on security and usability, this multi-user system empowers businesses and organizations to strengthen their social media presence while maintaining control over their digital assets.
 
 ### Video Tutorial: Multi-User System
+
 [![Multi-User Tutorial](https://img.youtube.com/vi/-cf-RXFiCdM/0.jpg)](https://www.youtube.com/watch?v=-cf-RXFiCdM)
 
 ## 6. Mobile Wallet Integration with Nova Wallet
@@ -83,14 +92,16 @@ To connect your Polkadot wallet on mobile, follow these steps:
 5. **Start Exploring**: Once connected, you can start interacting with the Myriad Social platform.
 
 ## 7. Backend Improvements and Algorithm Enhancements
+
 ![Youtube Integration]()
 ![Refined Content](./Filtering%20cut%20off12.png)
 
 We have significantly enhanced our backend infrastructure and algorithms to improve content discovery, platform performance, and user experience. Users can now seamlessly import and embed YouTube content with native playback support, automatic metadata extraction, and optimized performance, while our refined content ranking algorithm focuses on the most recent 12 months of data to ensure fresh content, phasing out historical posts while still maintaining archive access. Enhanced ranking factors now include post engagement metrics, timeline trends, hashtag usage, user interactions, and content quality signals.
 
 ### Video Tutorial: Update Filtering
-[![Filteringl](https://img.youtube.com/vi/D0Km7_Buclo/0.jpg)](https://www.youtube.com/watch?v=D0Km7_Buclo)
----
+
+## [![Filteringl](https://img.youtube.com/vi/D0Km7_Buclo/0.jpg)](https://www.youtube.com/watch?v=D0Km7_Buclo)
+
 We are excited for you to experience these new features and improvements. Your feedback is invaluable to us, so please do not hesitate to share your thoughts and suggestions.
 
-**Host your own decentralized social network!**
+**Host your own decentralized social network!**

src/components/PostCreate/MobileEmbed.tsx

@@ -1,11 +1,13 @@
+import React from 'react';
+
 import { IconButton, Grid, ImageList, ImageListItem } from '@material-ui/core';
 
+import { YouTubeEmbed } from '../atoms/Embed/YouTube/YoutubeEmbed';
+
 import { BiVideoPlus } from 'react-icons/bi';
 import { CiCircleRemove } from 'react-icons/ci';
 import { LuImagePlus } from 'react-icons/lu';
 import * as UploadAPI from 'src/lib/api/upload';
-import React from 'react';
-import { YouTubeEmbed } from '../atoms/Embed/YouTube/YoutubeEmbed';
 
 type MobileEmbedProps = {
   uploadVideoFieldRef: any;
@@ -147,7 +149,10 @@ export const MobileEmbed: React.FC<MobileEmbedProps> = props => {
               const videoId = extractYouTubeVideoId(videoUrl[0]);
 
               return videoId ? (
-                <YouTubeEmbed videoId={videoId} placeholder={<p>Loading video...</p>} />
+                <YouTubeEmbed
+                  videoId={videoId}
+                  placeholder={<p>Loading video...</p>}
+                />
               ) : (
                 <video width="100%" src={videoUrl[0]}>
                   Browser does not support video
@@ -189,4 +194,4 @@ export const MobileEmbed: React.FC<MobileEmbedProps> = props => {
       </Grid>
     </>
   );
-};
+};

src/components/PostDetail/PostDetail.tsx

@@ -20,11 +20,11 @@ import { LinkPreview } from 'src/components/atoms/LinkPreview';
 import { NSFW } from 'src/components/atoms/NSFW/NSFW.component';
 import { SendTipButton } from 'src/components/common/SendTipButton/SendTipButton';
 import { isJson } from 'src/helpers/string';
+import { extractYouTubeVideoId } from 'src/helpers/url';
 import { useToggle } from 'src/hooks/use-toggle.hook';
 import { InfoIconYellow } from 'src/images/Icons';
 import { ReferenceType } from 'src/interfaces/interaction';
 import i18n from 'src/locale';
-import { extractYouTubeVideoId } from 'src/helpers/url';
 
 const Reddit = dynamic(() => import('./render/Reddit'), { ssr: false });
 const Twitter = dynamic(() => import('./render/Twitter'), { ssr: false });
@@ -51,11 +51,11 @@ export const PostDetail: React.FC<PostDetailProps> = props => {
 
   const downvoted = post.votes
     ? post.votes.filter(vote => vote.userId === user?.id && !vote.state)
-      .length > 0
+        .length > 0
     : false;
   const upvoted = post.votes
     ? post.votes.filter(vote => vote.userId === user?.id && vote.state).length >
-    0
+      0
     : false;
 
   const isPostCreator = post.createdBy === user?.id;
@@ -101,7 +101,6 @@ export const PostDetail: React.FC<PostDetailProps> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [downvoted, upvoted]);
 
-
   // Extract YouTube Video ID
   let videoId: string | null = null;
   if (post.platform === 'youtube' && post.url) {
@@ -171,12 +170,12 @@ export const PostDetail: React.FC<PostDetailProps> = props => {
           </ShowIf>
 
           <ShowIf condition={post.platform === 'youtube' && Boolean(videoId)}>
-              <YouTube
-                text={post.text}
-                onHashtagClicked={handleHashtagClicked}
-                videoId={videoId}
-              />
-            </ShowIf>
+            <YouTube
+              text={post.text}
+              onHashtagClicked={handleHashtagClicked}
+              videoId={videoId}
+            />
+          </ShowIf>
 
           {post.asset?.exclusiveContents &&
             post.asset?.exclusiveContents.length > 0 &&

src/components/PostDetail/render/YouTube.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { YouTubeEmbed } from 'src/components/atoms/Embed/YouTube/YoutubeEmbed';
 import LinkifyComponent from 'src/components/common/Linkify.component';
 
@@ -27,4 +28,4 @@ export const RenderYouTube: React.FC<RenderYouTubeProps> = ({
   );
 };
 
-export default RenderYouTube;
+export default RenderYouTube;

src/components/PostDetailExperience/PostDetailExperience.tsx

@@ -14,9 +14,9 @@ import { NodeViewer } from 'components/common/NodeViewer';
 import { LinkPreview } from 'src/components/atoms/LinkPreview';
 import ShowIf from 'src/components/common/show-if.component';
 import { isJson } from 'src/helpers/string';
+import { extractYouTubeVideoId } from 'src/helpers/url';
 import { Post } from 'src/interfaces/post';
 import { User } from 'src/interfaces/user';
-import { extractYouTubeVideoId } from 'src/helpers/url';
 
 const Gallery = dynamic(() => import('../atoms/Gallery/Gallery'), {
   ssr: false,
@@ -150,6 +150,6 @@ export const PostDetailExperience: React.FC<PostDetailProps> = props => {
           post.embeddedURL &&
           !post.deletedAt && <LinkPreview embed={post.embeddedURL} />}
       </div>
-    </Paper >
+    </Paper>
   );
 };

src/components/PostDetailExperience/PostDetailExperienceHeader.tsx

@@ -74,7 +74,9 @@ export const HeaderComponentExperience: React.FC<PostHeaderExperienceProps> =
           url = `https://reddit.com/user/${post.people?.username as string}`;
           break;
         case SocialsEnum.YOUTUBE:
-          url = `https://youtube.com/channel/${post.people?.username as string}`;
+          url = `https://youtube.com/channel/${
+            post.people?.username as string
+          }`;
           break;
         case 'myriad':
           url = `/profile/${post.createdBy}`;

src/components/atoms/Embed/Embed.tsx

@@ -7,8 +7,8 @@ import { YouTubeEmbed } from './YouTube/YoutubeEmbed';
 
 import { Loading } from 'src/components/atoms/Loading';
 import ShowIf from 'src/components/common/show-if.component';
-import { SocialsEnum } from 'src/interfaces/social';
 import { extractYouTubeVideoId } from 'src/helpers/url';
+import { SocialsEnum } from 'src/interfaces/social';
 
 type EmbedProps = {
   social: SocialsEnum;
@@ -35,8 +35,9 @@ export const Embed: React.FC<EmbedProps> = ({
   };
 
   // Extract YouTube Video ID
-  const youtubeVideoId = social === SocialsEnum.YOUTUBE ? extractYouTubeVideoId(url) : null;
-
+  const youtubeVideoId =
+    social === SocialsEnum.YOUTUBE ? extractYouTubeVideoId(url) : null;
+
   return (
     <div className={styles.root} onClick={handleClick}>
       <ShowIf condition={social === SocialsEnum.TWITTER}>