Skip to content

Commit

Permalink
discover profiles, twitter username fix
Browse files Browse the repository at this point in the history
  • Loading branch information
bshevchenko committed Jun 16, 2024
1 parent 8aa1fd7 commit c2e20c8
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 33 deletions.
8 changes: 4 additions & 4 deletions packages/nextjs/components/Accounts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const Accounts = ({ isFetchingTokens, tokens }: { isFetchingTokens: boolean; tok
<div className="flex flex-wrap">
{Object.entries(tokens).map(([key, token]) => (
<div
className="w-275 bg-base-100 p-5 mr-3 mb-5 rounded-xl lg:w-[244px] break-all w-full ml-3 lg:ml-0"
className="w-275 bg-base-100 p-5 mr-3 mb-5 rounded-xl lg:w-[244px] break-all whitespace-pre-wrap w-full ml-3 lg:ml-0"
key={key}
>
{token.provider == "github" && (
Expand Down Expand Up @@ -217,7 +217,7 @@ const Accounts = ({ isFetchingTokens, tokens }: { isFetchingTokens: boolean; tok
<div className="flex items-center mt-3 mb-3">
<UsersIcon className="w-6 mr-1" />
<a
href={`https://x.com/${token.data.login}/followers`}
href={`https://x.com/${token.data.username}/followers`}
className="text-green-400 hover:underline"
target="_blank"
rel="noreferrer"
Expand All @@ -229,7 +229,7 @@ const Accounts = ({ isFetchingTokens, tokens }: { isFetchingTokens: boolean; tok
<div className="flex items-center mt-3 mb-3">
<ChatBubbleLeftRightIcon className="w-6 mr-1" />
<a
href={`https://x.com/${token.data.login}`}
href={`https://x.com/${token.data.username}`}
className="text-green-400 hover:underline"
target="_blank"
rel="noreferrer"
Expand All @@ -241,7 +241,7 @@ const Accounts = ({ isFetchingTokens, tokens }: { isFetchingTokens: boolean; tok
<div className="flex items-center mt-3 mb-3">
<HandThumbUpIcon className="w-6 mr-1" />
<a
href={`https://x.com/${token.data.login}`}
href={`https://x.com/${token.data.username}`}
className="text-green-400 hover:underline"
target="_blank"
rel="noreferrer"
Expand Down
12 changes: 6 additions & 6 deletions packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ export const menuLinks: HeaderMenuLink[] = [
label: "Home",
href: "/",
},
// {
// label: "Discover Profiles",
// href: "/profiles",
// },
{
label: "Discover Profiles",
href: "/profiles",
},
// {
// label: "Debug Contracts",
// href: "/debug",
Expand Down Expand Up @@ -103,11 +103,11 @@ export const Header = () => {
BETA V2.0
</div>
</Link>
{/* <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
<ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
<Link href="/profiles" className="items-center text-lg">
Discover Profiles
</Link>
</ul> */}
</ul>
</div>
<div className="navbar-end flex-grow md:mr-4">
<RainbowKitCustomConnectButton />
Expand Down
27 changes: 14 additions & 13 deletions packages/nextjs/components/ProfileCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function ProfileCard({ upAddress }: { upAddress: string }) {
const erc725js = new ERC725(
lsp3ProfileSchema as ERC725JSONSchema[],
upAddress,
"https://rpc.lukso.gateway.fm",
"https://rpc.testnet.lukso.network",
{
ipfsGateway: "https://api.universalprofile.cloud/ipfs",
},
Expand All @@ -32,32 +32,33 @@ export function ProfileCard({ upAddress }: { upAddress: string }) {

if (!metadata) return <div className="skeleton w-32 h-32 bg-base-200 w-full h-80 rounded-3xl animate-pulse"></div>;

const backgroundImage = metadata.LSP3Profile.backgroundImage[1].url;
// const backgroundImage = ""; // TODO metadata.LSP3Profile.backgroundImage[1].url;
const profileImage = metadata.LSP3Profile.profileImage[0].url;

const backgroundStyle = {
backgroundImage: `url(${convertIpfsUrl(backgroundImage)})`,
backgroundSize: "cover", // To cover the entire area of the div
backgroundPosition: "center", // To center the background image
};
// const backgroundStyle = {
// backgroundImage: `url(${convertIpfsUrl(backgroundImage)})`,
// backgroundSize: "cover", // To cover the entire area of the div
// backgroundPosition: "center", // To center the background image
// };

return (
<div
style={backgroundStyle}
// style={backgroundStyle}
className="relative bg-base-200 w-full h-80 rounded-3xl flex flex-col justify-end transition duration-300 ease-in-out hover:scale-105 border-base-200 "
>
<div className="absolute top-1/2 z-10 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full overflow-hidden w-32 h-32 border-[10px] border-base-300"></div>
<div className="absolute top-1/2 z-10 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full overflow-hidden w-32 h-32 border-[10px] border-base-100">
<div className="absolute top-[35%] z-10 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full overflow-hidden w-32 h-32 border-[10px] border-base-300"></div>
<div className="absolute top-[35%] z-10 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full overflow-hidden w-32 h-32 border-[10px] border-base-100">
<Image alt="profile picture" width={1000} height={1000} src={convertIpfsUrl(profileImage)} />
</div>
<div className="absolute bottom-0 h-1/2 w-full z-0 bg-base-300 rounded-3xl"></div>

<div className="h-1/2 z-0 flex flex-col bg-base-100 border border-base-200 justify-end items-center rounded-3xl gap-4 pb-6">
<div className="h-1/2 z-0 flex flex-col bg-base-100 border border-base-200 justify-center items-center rounded-3xl gap-4 p-6">
<div className="font-bold">
@{metadata.LSP3Profile.name}
<span className="ml-1 text-accent">#{upAddress.slice(2, 6)}</span>
</div>
<div className="flex gap-2 h-[30px]">
<div className="flex gap-2 whitespace-pre-wrap break-all">{metadata.LSP3Profile.description}</div>
{/* <div className="flex gap-2 h-[30px]">
{metadata.LSP3Profile.tags.map((tag: string) => (
<div
key={tag}
Expand All @@ -66,7 +67,7 @@ export function ProfileCard({ upAddress }: { upAddress: string }) {
{tag}
</div>
))}
</div>
</div> */}
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/components/profile/ProfileDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export function ProfileDetails({
</div>
</div>
</div>
<div className="break-all">
<div className="break-all whitespace-pre-wrap">
{/* <div className="text-[#FFFFFFA3]">Bio</div> */}
{metadata.LSP3Profile.description}
</div>
Expand Down
12 changes: 12 additions & 0 deletions packages/nextjs/pages/api/profiles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { NextApiRequest, NextApiResponse } from "next/types";
import { ups } from "~~/lib/db";

type ResponseData = object;

export default async function Profiles(req: NextApiRequest, res: NextApiResponse<ResponseData>) {
let result = {};
try {
result = await ups.find({}).sort({ _id: -1 }).toArray();
} catch (e) {}
res.status(200).json(result);
}
41 changes: 32 additions & 9 deletions packages/nextjs/pages/profiles.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,48 @@
import type { NextPage } from "next";
import { ReactElement, useEffect, useState } from "react";
import Link from "next/link";
import axios from "axios";
import { ProfileCard } from "~~/components";
import Layout from "~~/components/layout";
import { NextPageWithLayout } from "~~/pages/_app";

// TODO
const Profiles: NextPageWithLayout = () => {
const [isLoading, setIsLoading] = useState(false);
const [profiles, setProfiles] = useState([]);

const fetchProfiles = () => {
console.log("Fetching tokens...");
setIsLoading(true);
axios.get("/api/profiles").then(result => {
setProfiles(result.data);
console.log(result.data);
setIsLoading(false);
});
};

useEffect(() => {
fetchProfiles();
}, []);

const Profiles: NextPage = () => {
return (
<div className="px-5 md:px-10 lg:px-20 py-20">
<div className="flex justify-center items-center mb-20 gap-4">
<h1 className="text-center text-5xl mb-0 mt-1 font-bold">Discover Profiles</h1>
</div>

<div className="grid grid-cols-1 xl:grid-cols-3 gap-10">
TODO
{/* {verifiedProfiles &&
verifiedProfiles.map((profile: upRegistryProfile) => (
<Link href={`/profile/${profile.up}`} key={profile.upLukso}>
<ProfileCard upAddress={profile.upLukso} />
{!isLoading &&
profiles.map((profile: any) => (
<Link href={`/profile/${profile.up}`} key={profile.up}>
<ProfileCard upAddress={profile.up} />
</Link>
))} */}
))}
</div>
</div>
);
};

Profiles.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>;
};

export default Profiles;

0 comments on commit c2e20c8

Please sign in to comment.