Lens Protocol


# はじめに

Lens Protocolは、PrifileNFTを所有することで、紐づけられた投稿コンテンツが、ユーザーに帰属することを目的としているものです。
LENSVERSEの中で記事などを共有することができます。
https://www.lens.dev/apps

![スクリーンショット 2023-03-31 17.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/3120abc1-b812-72d3-3ac9-e7817b206687.png)

https://aave.notion.site/Lensverse-a5926eab1d8148eda10053af9f4e28a0

類似のWeb3関連のSNSプロジェクトは下記のようにいくつか存在しています。

| タイトル | 詳細 | 
| --- | --- | 
| Lens Protocol | -- | 
| CyberConnect | -- | 
| Farcaster | -- | 

# 仕様など

## ProfileNFTの構成

| タイトル | 詳細 | 
| --- | --- | 
| Publication | 写真、動画、音楽の投稿 | 
| Comment | 他ユーザーのパブリケーションに対するコメント | 
| Mirror | 他ユーザーのコンテンツを再投稿(retweetなど) | 
| Collect |  | 
| Follow | フォロー | 

# 実装

## まずはAPIを触ってみる

### 1.Publication > GetPublicationsのGQLをコピー

![スクリーンショット 2023-03-30 14.13.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/77d7aee7-8eb1-2483-5cf9-863f8a4fd3e0.png)

![スクリーンショット 2023-03-30 14.18.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/fa0f5d24-343d-bc6b-5002-3e7c8d10acb0.png)

### 2. playgroundに貼り付け

https://api.lens.dev/

![スクリーンショット 2023-03-30 14.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/be8b2aae-9734-c770-eca0-ce20cb7e6ee4.png)


##　開発の方法

LensProtocolに書き込みを行うには2種類の方法があります。

1.コントラクトに直接書き込みを行う
2.APIを通じて書き込みを行う(推奨)

仕様は下記などを参考に
https://docs.lens.xyz/docs/profiles
https://docs.lens.xyz/docs/developer-quickstart#next-steps


まずは、コントラクトに直接書き込みを行う方法を体験してみます


動画
https://www.youtube.com/watch?v=mIJKa2-2p8w

## コントラクト

コントラクトアドレス一覧
https://docs.lens.xyz/docs/deployed-contract-addresses

説明
https://medium.com/laika-lab/explore-lens-protocol-with-laika-be22dff79fec

### 1.LAIKAで開く

https://web.getlaika.app/

### 2.jsonで開いて読み込む

https://gist.github.com/nonkung51/b337023202121fbbebe9b4514a79fb82#file-exploring-lens-protocol-laika-collection-json

### 3.Environmentを押下->設定を入力する

![スクリーンショット 2023-03-28 14.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/0eb4a8e7-1a1b-0815-e983-de294ba82265.png)

### 4.設定を入力する

元になるアドレス一覧はこちら
https://docs.lens.xyz/docs/deployed-contract-addresses


LensHub Proxy (use this one for interactions!)
LENS_HUB = 0x60Ae865ee4C725cd04353b5AAb364553f56ceF82

MockProfileCreationProxy
MOCK_PROFILE_CREATOR_PROXY = 0x420f0257D43145bb002E69B14FF2Eb9630Fc4736

![スクリーンショット 2023-03-28 14.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/68fcdbfc-83da-d534-4298-44595cbf9f41.png)

### 5.proxyCreateProfile

![スクリーンショット 2023-03-28 14.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/b8436a8a-adc2-adde-da37-3328ba5cbe1e.png)

|変数  |詳細  |
|---|---|
|to  |自分のアドレス  |
|handle  |希望するレンズのハンドル  |
|imageURI  | https://ipfs.io/ipfs/aaa プロフィール写真のリンク  |
|followModule  |0x0000000000000000000000000000000000000000  |
|followModuleInitData  |0x00 (初期化されたfollowモジュールに利用するデータ)  |
|followNFTURI  |https://ipfs.io/ipfs/aaa followNFTのuri  |


### 6.post

![スクリーンショット 2023-03-28 14.30.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/ac59a961-91e9-43a4-9ae3-5d8efea2e274.png)

| タイトル | 詳細 | 
| --- | --- | 
| vars |  | 
| profileId |  | 
| contentURI |  | 
| collectModule |  | 
| collectModuleInitData |  | 
| referenceModule |  | 
| referenceModuleInitData |  | 

# 実装


## 1.Apollo Client

Apollo Client を使用してLens API と対話するため、
utils.jsプロジェクトのルートにという名前の新しいファイルを作成します。HttpLinkデータをフェッチする とApolloLink認証を処理する をセットアップすることから始めます。最終的に、 を作成し、と のApolloClient両方を渡すだけです。httpLinkauthLink

https://www.apollographql.com/docs/react/

```js


import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://api.lens.dev",
  cache: new InMemoryCache(),
});

export default client;
// mumbai - https://api-mumbai.lens.dev/
// polygon playground - https://api-mumbai.lens.dev/playground
// mumbai playground - https://api.lens.dev/playground

```

##  2.GraphQL クエリ



# Phaverを使ってみる


## Phaverのインストール

## ProfileをLevel2にあげる


![スクリーンショット 2023-03-28 10.32.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/05c54c9b-8df8-b7d3-f35d-0945bcdc708a.png)

![スクリーンショット 2023-03-28 10.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/3c09ef6a-24e4-c5c6-2e87-3a980e492e82.png)

![スクリーンショット 2023-03-28 10.41.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/9f9e2138-7b83-c8d4-9770-b15807ab313d.png)

![スクリーンショット 2023-03-28 10.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/5785328e-7faf-9c90-d64f-8428c2cbee5c.png)




# 参考リンク

https://ankr.hashnode.dev/getting-started-with-lens-protocol-as-a-frontend-developer
https://docs.lens.xyz/docs/developer-quickstart
https://github.com/lens-protocol/api-examples/blob/master/src/profile/get-profile.ts
https://www.jsdelivr.com/package/npm/lens-protocol
https://github.com/lens-protocol
https://ir.linkedin.com/posts/naderdabit_github-dabit3lens-gated-publications-activity-7009280268511420416-wQuq
https://www.youtube.com/watch?v=mIJKa2-2p8w
https://docs.alchemy.com/docs/how-to-create-a-decentralized-twitter-with-lens-protocol
https://blog.idrisolubisi.com/build-a-decentralized-social-network-with-reactjs-tailwindcss-lens-protocol
https://ankr.hashnode.dev/getting-started-with-lens-protocol-as-a-frontend-developer
https://www.apollographql.com/docs/react/
https://gaiax-blockchain.com/lens-protocol
https://lens.xyz/
https://claim.lens.xyz/