Merge pull request #137 from teodorus-nathaniel/zero-to-hero

Improve Twitter Dapp Zero to Hero

docs/develop/zero-to-hero/twitter-dapp/CreatingTweet.md

@@ -15,7 +15,7 @@ Now, Let's rewrite the **onTweetBtnClick** method of **src/components/tweet-box.
     IpfsContent
   } from '@subsocial/api/substrate/wrappers'
 
-  ...
+  // ...
 
   const SPACE_ID = '1059'
   const ACCOUNT_STORAGE_KEY = 'connected_account'

docs/develop/zero-to-hero/twitter-dapp/FetchingTweets.md

@@ -24,7 +24,7 @@ Now, lets put this logic inside a useEffect hook on the **home.tsx** file.
 
 ```tsx
   const HomeScreen = () => {
-    ...
+    // ...
 
     const [tweets, setTweets] = useState<ITweet[]>([])
 
@@ -53,6 +53,6 @@ Now, lets put this logic inside a useEffect hook on the **home.tsx** file.
       fetchTweets()
     }, [isReady])
 
-    ...
+    // ...
   }
 ```

docs/develop/zero-to-hero/twitter-dapp/LikeaTweet.md

@@ -18,7 +18,7 @@ Let's add this functionality on the Dapp. Here's an example:
 It's time to add this in the codebase inside of **tweet.tsx** like this:
 
 ```tsx
-  ...
+  // ...
 
   const ACCOUNT_STORAGE_KEY = 'connected_account'
 

docs/develop/zero-to-hero/twitter-dapp/LoginScreen.md

@@ -69,6 +69,10 @@ For connecting the web app to the wallet, we need to do 2 things:
 Update the **App.tsx** file above the return statement like this, and clear everything else:
 
 ```tsx
+import { useState } from 'react'
+import polkadotjs from './subsocial/wallets/polkadotjs'
+import LoginScreen from './login'
+
 const ACCOUNT_STORAGE_KEY = 'connected_account'
 
 const App = () => {
@@ -88,8 +92,10 @@ const App = () => {
     }
   }
 
-  return ...
+  // ... continue with the rest of the code below
 }
+
+export default App
 ```
 
 #### Rendering the UI conditionally
@@ -98,7 +104,7 @@ Now, we have to make sure that the login screen UI is rendered conditionally.
 
 ```tsx
 const App = () => {
-  ...
+  // ...
 
   if(account) {
     // User is already logged-in.
@@ -109,6 +115,8 @@ const App = () => {
     onLoginClick={connectWallet}
   />
 }
+
+export default App
 ```
 
 :::info Note

docs/develop/zero-to-hero/twitter-dapp/Styling.md

@@ -11,7 +11,7 @@ Follow these steps:
 1. Run the following commands:
 
    ```ts
-    yarn add -D tailwindcss postcss autoprefixer
+    yarn add -D tailwindcss postcss postcss-cli autoprefixer
    ```  
 
    ```ts
@@ -67,7 +67,7 @@ Follow these steps:
           xl: "1rem",
         },
       },
-      ...
+      // ... keep the other fields as it is
     };
   ```