Friday, June 2, 2023
No Result
View All Result
Crypeto News
Smarter_way_USA
  • Home
  • Bitcoin
  • Crypto Updates
    • General
    • Blockchain
    • Ethereum
    • Altcoin
    • Mining
    • Crypto Exchanges
  • NFT
  • DeFi
  • Web3
  • Metaverse
  • Analysis
  • Regulations
  • Scam Alert
  • Videos
CRYPTO MARKETCAP
  • Home
  • Bitcoin
  • Crypto Updates
    • General
    • Blockchain
    • Ethereum
    • Altcoin
    • Mining
    • Crypto Exchanges
  • NFT
  • DeFi
  • Web3
  • Metaverse
  • Analysis
  • Regulations
  • Scam Alert
  • Videos
CRYPTO MARKETCAP
Crypeto News
No Result
View All Result

How to Build a Decentralized Social Media Profile – Moralis Web3

by crypetonews
September 13, 2022
in Web3
Reading Time: 12 mins read
0 0
A A
0
Home Web3
Share on FacebookShare on Twitter


With the birth of social media, the way people interact, communicate and present themselves has changed. As such, the awareness of how much these platforms impact daily living is increasing, and as users of centralized social media behemoths fall victim to privacy breaches, people are turning their attention to blockchain, where decentralized social media profiles reign. However, since Web3 is only in its infancy, many are unfamiliar with how to build a decentralized social media profile. Fortunately, with Moralis and Lens Protocol, you can create a decentralized social media profile in about 20 minutes. Follow along herein as we explore the steps on how to accomplish this!

If you take on today’s challenge, you’ll learn how to use NextJS to create a fantastic social media dapp. Along the way, you’ll learn how to use the ultimate enterprise-grade Web3 API provider – Moralis – to fetch on-chain data. Of course, you will also learn how to work with Lens Protocol – a composable and decentralized social graph. Essentially, Lens Protocol is a backend solution for storing social media data in a decentralized manner. This excellent tool enables you to build a decentralized social media profile, and lets users own their data and content. Moreover, since users get to own their social media elements, they can utilize them further. For instance, they can assign fees to followers or provide them with prizes, such as unique NFTs (non-fungible tokens). 

So, if you believe in a decentralized future and the right to own your content, create your free Moralis account and follow our lead. We will start with a quick demo of our finished decentralized social media profile. Hence, you will know what to expect from today’s tutorial.         

Our Decentralized Social Media Profile Demo

Here’s the initial screen of our example social media dapp:

As you can see, we somewhat “modeled” Twitter. At the top of each profile page, you’ll see a banner. Following is a profile picture on the bottom-left side of the banner. Below the profile picture are some details about the profile at hand. This is where our dapp displays user names, “Lens” addresses, statuses, and numbers of followers and following. 

The screenshot above represents our dapp when selecting the “I’m Following” page. This page displays animated NFTs of profiles that “alunm.eth” follows. However, let’s say an example user wants to follow the “alunm.eth” profile. In that case, they need to go to the “Follow Me” tab and click on the “Follow Me” button. By following this profile, followers receive a “nice” NFT (displayed in the bottom-right corner of the screen):

When users actually click on the “Follow Me” button, their MetaMask extension pops up. Moreover, it asks them to confirm the transaction and pay the related gas fee.

Once they confirm the transaction, the “nice” NFT has been sent to their wallet. As such, they can use an NFT platform, such as OpenSea, to view their new “follower” NFT:

If you think our example dapp is cool, jump to the next section. There, you’ll start building your own instance of this decentralized social media profile dapp. To make things as straightforward as possible, we will provide you with the starter code you can clone. Nonetheless, you can also go for the finished code and simply use our tutorial as a code walkthrough. 

Building a Decentralized Social Media Profile with Lens Protocol and Moralis

As mentioned above, our instructions presume you start by cloning the “web3profile-starter” code, which awaits you on GitHub. So, make sure to visit that repository and get our code first:

Next, open the project in your favorite code editor. For extra convenience, we recommend you follow our lead and use Visual Studio Code (VSC). Using VSC’s terminal, you need to install all dependencies using the “npm i” command:

With all dependencies installed, you can use the “npm run dev” command to run a local server. Then, you can use your browser to view the initial state of our social media dapp. Moreover, this is what you should be seeing:

Looking at the screenshot above, you’ll notice that our code provides the layout you need. Also, it already includes the banner template, the default profile image, and default profile details. The layout also already includes the “I’m Following”, “Follow Me”, and “Social Posts” tabs.

Hence, this is a perfect starting point for you to focus on implementing Web3 functionalities. Additionally, as mentioned earlier, we will use Lens Protocol to cover decentralized social media profile functionalities. Moreover, Moralis will help us fetch all the on-chain data we need with single lines of code. 

How to Use Lens Protocol to Build a Decentralized Social Media Profile

We will use the Lens API to build a decentralized social media profile. Furthermore, according to the Lens Protocol documentation, we must first make sure we can query from our dapp. Since we’ll be using URQL, we need to focus on installing and using that GraphQL client:

As such, we need to follow the instructions provided by Lens’ docs, and we’ll be good to go. We can copy the lines from the “Exposing the client” section. Then we return to VSC, where we create the “lensCalls.js” file inside the “pages/api” folder. Inside that file, we paste the copied code:

As you can see in the image above, the copied code focuses on the Polygon testnet (Mumbai). However, if you recall our demo, you know our dapp runs on the Polygon mainnet (the Matic mainnet). As such, we need to change the above-marked “HTTPS” accordingly. Hence, we return to Lens’ docs and copy that address. We can find it in the “API links” section:

With the correct address in place, we want to focus on querying profiles. Hence, we use the “Get profile” section of the Lens docs. There we can find the code needed to query profiles. Then, we simply copy it:

Next, we return to the “lensCalls.js” file. There, we must first export our query using this line of code:

Export const Profile= ‘

‘

Then, we paste the copied “Get by profile id” lines of code inside the single quotation marks above. Moreover, the copied code focuses on the “0x01” profile ID. As such, we need to know the ID of other profiles we want to focus on. For example, let’s change the profile ID to “0x09“:

Our Dapp’s Frontend

Open the “index.js” file, which covers our dapp’s frontend as demonstrated in its initial stage. To fetch an actual decentralized social media profile, we need to add the proper code. As such, scroll down to the bottom of the “index.js” file and use the following lines of code:

export async function getServerSideProps() {
const response = await client.query(Profile).toPromise();

However, to make the above query function, we also need to import “urqlClient” and “Profile“. Thus, we add this line of code at the top of the “index.js” file:

import { client, Profile } from “./api/lensCalls”;

We can then also add a proper “return” to the “getServerSideProps” function:

return {
props: { profile: response?.data.profile, nftArray: nftArray, myNFT: myNFT },
};

Moreover, to get the above return, we need to add “profile” to our “Home” component and also log that for convenience:

The above lines of code provide us with all the details for a particular user ID. As such, we can now populate the necessary fields of our dapp’s frontend. Thus, we need to focus on tweaking the content of the “Home” component by replacing default values. 

First, we replace the default banner by replacing the current address next to “src” with “{profile.coverPicture.original.url}“. For more details, use the video below, starting at 8:50. 

Furthermore, we do the same for the profile image by using “{profile.picture.original.url}“. Then, do the same for the user name, handle, and bio. Here, we replace default values with “{profile.name}“, “{profile.handle}“, and “{profile.bio}“. Finally, we must also ensure that the numbers of “followers” and “following” are properly populated. Hence, we replace the default values with “{profile.stats.totalFollowers}” and “{profile.stats.totalFollowing}”. Here’s the result for “0x09“:

Taking a Decentralized Social Media Profile Dapp to the Next Level

Looking at the screenshot above, you can see that with the above-implemented tweaks, our dapp collects and populates all user details. However, you can also see that the “I’m Following” page is still empty. That’s because our dapp is not fetching users’ NFTs. Fortunately, the fetched details that are inside the user object include the users’ wallet addresses (9:55):

As such, we can use the power of Moralis’ Web3 API to use that address and fetch all the NFTs owned by it. In order to obtain this power, you must complete the initial Moralis setup.

Obtaining Your Moralis Web3 API Key

If you haven’t created your free Moralis account yet, do so now. You can use the “create your free Moralis account” link in the intro or visit the Moralis homepage. Once you have your Moralis account up and running, you can access your Moralis dashboard. This is where you’ll see the “Web3 APIs” tab in the side menu:

After clicking the above menu option, you will land on the “Web3 APIs” page. There, you can use the “copy” icon to get your Moralis Web3 API key:

Finally, return to VSC and paste the above-copied key inside the “.env.local.example” file. Nonetheless, also make sure to rename the “.env.local.example” to “env.local”:

Making Moralis API Calls

Now that you have your Moralis Web3 API in place, you can follow our lead as we start making Moralis API calls. To do this, we need to return to the “index.js” file and first import the Moralis SDK. Hence, we add the following line of code at the top of the file:

import Moralis from “moralis”;

Then, we scroll down to the “getServerSideProps” function. Within that function, we’ll focus on adding API calls above “return” (11:04). However, we first initialize Moralis:

Next, we simply use the Moralis documentation to see what’s the best solution it offers to query accounts’ NFTs. We find that the “getNFTs” endpoint will do the trick. All this endpoint requires is an address and a chain. Fortunately, we have both of these parameters – the above “ownedBy” address and the Polygon mainnet chain ID (“0x89″). As such, we just copy the lines of code from the Moralis documentation and replace the two parameters with proper values:

Displaying Only Lens Protocol NFTs

Next, we want to display only the Lens Protocol NFTs on the “I’m Following” page. As such, we need to implement the lines of code that will do the proper filtering. For a detailed walkthrough, use the video below, starting at 12:10. Ultimately, these are the lines of code we use:

let nftArray = [];
let nfts = balances?.data.result;

for (let i = 0; i < nfts.length; i++) {
if (nfts[i].metadata !== null) {
if (
“animation_url” in JSON.parse(nfts[i].metadata) &&
JSON.parse(nfts[i].metadata).animation_url !== null &&
JSON.parse(nfts[i].metadata).animation_url.includes(“.lens”)
) {
nftArray.push(JSON.parse(nfts[i].metadata).animation_url);
}
}
}

In addition, we must also add “nftArray” to the “Home” component. 

Moving on, we also want to display NFTs users get by following that account on the “Follow Me” page. This is where we’ll use the “getTokenMetadata” Moralis API endpoint (14:16):

For details on how to present the “Follow Me” NFTs as presented in the demo, use the video below (15:27). 

Last but not least, you also want to activate the “Follow Me” button. This is where we hand you over to our in-house expert’s capable hands. He will guide you through this final stage of building a decentralized social media profile dapp in the video below (16:17).  

How to Build a Decentralized Social Media Profile – Summary

We covered quite a distance in today’s article. However, if you followed our lead and the video above, you had a chance to create your own instance of a decentralized social media profile dapp in less than 20 minutes. Of course, that was possible because you didn’t have to start from scratch. Instead, you used our starter code and just incorporated Web3 backend functionality. The latter was straightforward, thanks to Moralis’ and Lens Protocol’s docs. Along the way, you also obtained your Moralis Web3 API key, which gave you access to the ultimate Web3 API. Furthermore, you used “getNFTs” and “getTokenMetadata“. 

If you enjoyed today’s tutorial, you should explore the Moralis YouTube channel and the Moralis blog for Web3. The tutorials there vary from the most basic ones to more advanced feats. As such, you can pick the ones that suit your current skills. However, thanks to Moralis, your Web2 dev skills are all you need. Additionally, since Moralis is all about cross-platform interoperability, you can join the Web3 revolution utilizing familiar tools. ReactJS, NextJS, Firebase, Supabase, Unity, and other platforms can be your ticket to start creating killer dapps. It’s also worth pointing out that Moralis supports all leading programmable chains. As a result, you get to future-proof your dapps. 

Last but not least, you may also want to go full-time crypto as soon as possible. This is where Moralis Academy can make all the difference. By becoming blockchain certified, you will greatly increase your chance of landing an excellent crypto job in no time.  



Source link

Tags: BuildDecentralizedMediaMoralisProfileSocialWeb3
Previous Post

Bitcoin (BTC) & Ethereum (ETH) To Form New Lows After Hitting This Level! – Coinpedia – Fintech & Cryptocurreny News Media

Next Post

Ethiopian Central Bank Restricts Amount of Cash Travelers Can Hold, Sets Foreign Currency Conditions – Africa Bitcoin News

Related Posts

What’s next for crypto miners after US debt ceiling deal?
Web3

What’s next for crypto miners after US debt ceiling deal?

June 1, 2023
Hong Kong Web3 industry forms new associations
Web3

Hong Kong Web3 industry forms new associations

May 29, 2023
Why GameFi is the future of the new player economy
Web3

Why GameFi is the future of the new player economy

May 26, 2023
China Nanjing city launches metaverse organization
Web3

China Nanjing city launches metaverse organization

May 24, 2023
The race is on for the Web3 hub of Asia
Web3

The race is on for the Web3 hub of Asia

May 23, 2023
Is Tether unmoored — or doing just fine?
Web3

Is Tether unmoored — or doing just fine?

May 18, 2023
Next Post
Ethiopian Central Bank Restricts Amount of Cash Travelers Can Hold, Sets Foreign Currency Conditions – Africa Bitcoin News

Ethiopian Central Bank Restricts Amount of Cash Travelers Can Hold, Sets Foreign Currency Conditions – Africa Bitcoin News

Vitalik Buterin impersonators ramp up ETH phishing ahead of The Merge : ethereum

Vitalik Buterin impersonators ramp up ETH phishing ahead of The Merge : ethereum

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

RECOMMENDED

Shaping the Future of Banking: Standard Chartered and PwC China Release White Paper on Central Bank Digital Currency”
Blockchain

Shaping the Future of Banking: Standard Chartered and PwC China Release White Paper on Central Bank Digital Currency”

by crypetonews
May 29, 2023
0

Standard Chartered, in collaboration with PwC China, have co-published a comprehensive white paper detailing the potential advancements in the future...

Analyst Known for Calling Bottoms Flips Bullish on Two Low-Cap Altcoins, Says a Lot of Traders Are Sidelined

Analyst Known for Calling Bottoms Flips Bullish on Two Low-Cap Altcoins, Says a Lot of Traders Are Sidelined

May 31, 2023
Bybit Secures Preliminary Approval to Operate in Kazakhstan

Bybit Secures Preliminary Approval to Operate in Kazakhstan

May 29, 2023
Crypto Exchange BKEX Suspends Withdrawal to Aid Money Laundering Probe

Crypto Exchange BKEX Suspends Withdrawal to Aid Money Laundering Probe

May 29, 2023
Solana Has Potential To Be the ‘Apple’ of Crypto, According to SOL Co-Founder Raj Gokal

Solana Has Potential To Be the ‘Apple’ of Crypto, According to SOL Co-Founder Raj Gokal

May 31, 2023
U.S. Charges Against FTX’s Sam Bankman-Fried Don’t Warrant Dismissal, Prosecutors Say

U.S. Charges Against FTX’s Sam Bankman-Fried Don’t Warrant Dismissal, Prosecutors Say

May 30, 2023
  • Trending
  • Comments
  • Latest
What is the Erigon Node Consensus Layer?

What is the Erigon Node Consensus Layer?

February 15, 2023
Secured #5: Public Vulnerability Disclosures Update

Secured #5: Public Vulnerability Disclosures Update

May 3, 2023
Exchange Giant Coinbase Adds Custody Support for 14 Ethereum (ETH)-Based Altcoins, Spurring Rallies Up to 20%

Exchange Giant Coinbase Adds Custody Support for 14 Ethereum (ETH)-Based Altcoins, Spurring Rallies Up to 20%

October 27, 2022
3 Things We Learned at Tornado Cash Dev Alexey Pertsev’s Trial – CoinDesk : ethereum

3 Things We Learned at Tornado Cash Dev Alexey Pertsev’s Trial – CoinDesk : ethereum

November 23, 2022
Crypto Whales Spend Millions Buying the Dip on PEPE As Prices Drop: On-Chain Data

Crypto Whales Spend Millions Buying the Dip on PEPE As Prices Drop: On-Chain Data

May 12, 2023
146 Top Executives Urge Biden to Prevent US Default — Warns of ‘Disastrous Consequences’

146 Top Executives Urge Biden to Prevent US Default — Warns of ‘Disastrous Consequences’

May 17, 2023
PEPE Crypto Price News Today – Technical Analysis and Elliott Wave Analysis and Price Prediction!

PEPE Crypto Price News Today – Technical Analysis and Elliott Wave Analysis and Price Prediction!

24
BITCOIN: CRASH TO $24,000 GUARANTEED!?!?!?!? 3 HUGE REASONS!! BTC + Crypto Price Prediction Analysis

BITCOIN: CRASH TO $24,000 GUARANTEED!?!?!?!? 3 HUGE REASONS!! BTC + Crypto Price Prediction Analysis

20
⚠️*HUGEEE*⚠️ IT'S MAKE OR BREAK FOR BITCOIN !⚠️Crypto BTC Price Prediction/Cryptocurrency News Today

⚠️*HUGEEE*⚠️ IT'S MAKE OR BREAK FOR BITCOIN !⚠️Crypto BTC Price Prediction/Cryptocurrency News Today

24
Ending Logan Paul's Biggest Scam

Ending Logan Paul's Biggest Scam

40
I ATTENDED A 3 HR 'CRYPTO SCAM' WEBINAR | WFABB iGenius

I ATTENDED A 3 HR 'CRYPTO SCAM' WEBINAR | WFABB iGenius

38
ARE NFTS OFFICIALLY DEAD? NFT COLLAPSE EXPLAINED!

ARE NFTS OFFICIALLY DEAD? NFT COLLAPSE EXPLAINED!

34
Dogecoin (DOGE) Daily Transactions Spike 8,220% in May, According to IntoTheBlock

Dogecoin (DOGE) Daily Transactions Spike 8,220% in May, According to IntoTheBlock

June 1, 2023
186 Roy Lichtenstein works donated to museums in honour of the artist’s 100th birthday

186 Roy Lichtenstein works donated to museums in honour of the artist’s 100th birthday

June 1, 2023
BTCPay Server Releases 1.10.0 Update With New Store Management System And Privacy Features

BTCPay Server Releases 1.10.0 Update With New Store Management System And Privacy Features

June 1, 2023
Best Crypto to Buy Now June 1 – Polygon, Bitcoin, DeeLance

Best Crypto to Buy Now June 1 – Polygon, Bitcoin, DeeLance

June 1, 2023
Introducing CoinChartist (VIP): Expert Crypto Insights, Custom Technical Tools, NFTs & More

Introducing CoinChartist (VIP): Expert Crypto Insights, Custom Technical Tools, NFTs & More

June 1, 2023
Synthetix (SNX) Approves Plan to Nudge Positions Off Soon-to-Shut Version One of Its Perpetuals Market

Synthetix (SNX) Approves Plan to Nudge Positions Off Soon-to-Shut Version One of Its Perpetuals Market

June 1, 2023
Crypeto News

Find the latest Bitcoin, Ethereum, blockchain, crypto, Business, Fintech News, interviews, and price analysis at Crypeto News.

CATEGORIES

  • Altcoin
  • Analysis
  • Bitcoin
  • Blockchain
  • Crypto Exchanges
  • Crypto Updates
  • DeFi
  • Ethereum
  • Metaverse
  • Mining
  • NFT
  • Regulations
  • Scam Alert
  • Uncategorized
  • Videos
  • Web3

LATEST UPDATES

  • Dogecoin (DOGE) Daily Transactions Spike 8,220% in May, According to IntoTheBlock
  • 186 Roy Lichtenstein works donated to museums in honour of the artist’s 100th birthday
  • BTCPay Server Releases 1.10.0 Update With New Store Management System And Privacy Features
  • Disclaimer
  • Privacy Policy
  • DMCA
  • Cookie Privacy Policy
  • Terms and Conditions
  • Contact us

Copyright © 2022 Crypeto News.
Crypeto News is not responsible for the content of external sites.

No Result
View All Result
  • Home
  • Bitcoin
  • Crypto Updates
    • General
    • Blockchain
    • Ethereum
    • Altcoin
    • Mining
    • Crypto Exchanges
  • NFT
  • DeFi
  • Web3
  • Metaverse
  • Analysis
  • Regulations
  • Scam Alert
  • Videos

Copyright © 2022 Crypeto News.
Crypeto News is not responsible for the content of external sites.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In