lens-protocol / lens-widgets Goto Github PK

Integration widgets for Lens Protocol

TypeScript 100.00%

lens-widgets's Introduction

                                              @@@@@@@@@
                                        @@@@@@@@@@@@@@@@@@@@@
                                    @@@@@@@@@@@@@@@@@@@@@@@@@@@@
                                  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                                @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
              @@@@@@@@@@@       @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@      @@@@@@@@@@@
        @@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@
      @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@              @@@@@@@@@@@@@@              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@          @@@@@@@   @@@@@@@@@         @@@@@@    @@@@@@@@@@@@@@@@@@@@@@@@@
  @@@@@@@@@@@@@@@@@@@@@@  @@        @@@@@@@@  @@@@@@   @       @@@@@@@@   @@@@@@@@@@@@@@@@@@@@@@
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
      @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@            @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                      @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                                  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Lens Protocol

The Lens Protocol is a decentralized, non-custodial social graph. Lens implements unique, on-chain social interaction mechanisms analogous to commonly understood Web2 social media interactions, but significantly expanded with unique functionality that empower communities to form and participants to own their own social graph.

Setup

1. Clone the Repository

git clone [email protected]:lens-protocol/core.git

2. Install Foundry

Follow the instructions from their repository or just do:

curl -L https://foundry.paradigm.xyz | bash

foundryup

3. Install dependencies in submodules

You can do it either with forge:

forge install

or directly with git:

git submodule update --init --recursive

4. Create Your `.env` File

Copy the .env.example file into .env and fill the necessary fields:

MNEMONIC=
POLYGON_RPC_URL=
MUMBAI_RPC_URL=
KOVAN_RPC_URL=
ROPSTEN_RPC_URL=
MAINNET_RPC_URL=
BLOCK_EXPLORER_KEY=
TENDERLY_PROJECT=
TENDERLY_USERNAME=
TENDERLY_FORK_ID=
TENDERLY_HEAD_ID=

# Forking setup (uncomment to test using a fork)
# TESTING_FORK=mainnet
# TESTING_FORK_CURRENT_VERSION=1
# TESTING_FORK_BLOCK=45504400

If you just want to test locally without a fork, then you can skip this step.

5. Build

You can compile the project using:

forge build

You may notice a warning about some files exceeding code size.

To avoid the warning, you can compile Via IR but it will take more time:

forge build --via-ir

6. Test

You can run unit tests using:

forge test

To run the tests on a fork you need to fill the .env file from the step above, and uncomment the TESTING_FORK variables.

7. Coverage

You can run coverage using:

forge coverage

lens-widgets's People

Contributors

Stargazers

Watchers

Forkers

sasicodes goodmorning222 hradma skomijan alikomijan mvanhalen bayc1917 licokce yaszard erkankaragul meghdadkh6060 c0rv0s

lens-widgets's Issues

Breaks with Next.js `pages` directory

Until the @apollo-client fixes the ESM modules support (apollographql/apollo-feature-requests#287)
it's required to either transpile the @lens-protocol packages or make sure they won't get imported during SSR.

To fix, update thenext.config.js with the following:

transpilePackages: ['@lens-protocol']

Hide follow button to allow for creator/fan side configuration

Would it be possible to hide the follow button from lens settings page so we could have it configuration for creators and fans be diff
This can allow us to hide the follow if a creator is looking at it and change the display for a fan

Enhance Follow Widget By Adding Follow Reason Component

Background

Currently, the Follow Widget only displays a simple clean UI w/ user name and follow button.

However, the UI does not provide customization to provide users reasons to follow a particular user, which is very common on web2 socials, e.g. mutual following (Facebook), or working in the same company (LinkedIn) etc.

Technical Requirements

The feature will extend the current Follow widget UI by adding components within Lens Profile and the follow button.

This feature should be optional props to be added on top of the existing props in the Follow Widget.

Talking in the context of React, for how the implementation will look like, it should be possible to add followReasons or something more dev friendly with data structure as follows:

interface FollowReason {
  image?: string;
  text?: string;
}

let followReasons: [FollowReason];

and example value to look like this on

[
  {
    "image": "<lens-logo>",
    "text": "Mutual following stani.lens"
  }
]

Example

This is an example of what it looks like in Converse which is built on top of XMTP, Lens, and Farcaster

Login Widget Breaking on first install

I have a new remix project spun up and did:

yarn add @lens-protocol/widgets-react

Followed by a react component that looks like this:

import { SignInWithLens, Theme, Size } from "@lens-protocol/widgets-react";

async function onSignIn(tokens, profile) {
  console.log("tokens: ", tokens);
  console.log("profile: ", profile);
}

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <SignInWithLens onSignIn={onSignIn} />
    </div>
  );
}

It's giving me this error:

/Users/fourcolors/Projects/hoooks/artist-dashboard/.yarn/cache/@lens-protocol-widgets-react-npm-0.0.6-1beee35485-e38eb3a2d5.zip/node_modules/@lens-protocol/widgets-react/dist/index.js:1
export { ShareToLens } from './ShareToLens';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Object.require$$0.Module._extensions..js (/Users/fourcolors/Projects/hoooks/artist-dashboard/.pnp.cjs:22368:33)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.require$$0.Module._load (/Users/fourcolors/Projects/hoooks/artist-dashboard/.pnp.cjs:22205:14)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/fourcolors/Projects/hoooks/artist-dashboard/app/routes/_index.tsx:1:45)

Running: "@lens-protocol/widgets-react": "^0.0.6",

SigninWidget Error handling

Would it be possible to return an "error" variable so we can handle the proper handling of the cases where a user does not have a lens profile/render the correct UI for these cases. On some instances, we noticed that the signing in working after refreshes of the page or also there was no good way to handle if a user had an account or not through lens. So it would be great if in addition to profile, and token, we could return some indication of error so it can be handled on the client side. Thanks!
errors such as these

Fall back images show up on profile

Would it be possible to add the fall back images that show up on lenster onto the profile widget

lenster:

Profile widget curr:

Unable to Sign Out

I'm using the Sign in With Lens component in a Next.js application and I'm storing the auth token in the session storage.

I'm trying to Sign Out by just removing the session storage:

const logout = (event: FormEvent) => {
  event.preventDefault();
  window.sessionStorage.removeItem("lens-auth-token");
  setAuthToken("");
  setProfile({});
};

However, when I try to Sign In again, I'm getting the following error:

error signing in with Lens... TypeError: Cannot read properties of null (reading 'authenticate')
  at eval (SignInWithLens.js?b03f:123:50)
  at step (SignInWithLens.js?b03f:43:23)
  at Object.eval [as next] (SignInWithLens.js?b03f:24:53)
  at fulfilled (SignInWithLens.js?b03f:15:58)

I've also tried calling the useDisconnect hook from wagmi, but still getting the same error. Is it possible to disconnect the session somehow?