Skip to content

Commit

Permalink
feat(identicons): and 404.
Browse files Browse the repository at this point in the history
  • Loading branch information
@miladtsx
miladtsx committed Oct 11, 2024
1 parent 431f077 commit 215ea06
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 77 deletions.
175 changes: 99 additions & 76 deletions components/Preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { QRCodeSVG } from 'qrcode.react';
import { Button } from "@/components/ui/button"
import Blockies from 'react-blockies'
import { Web3Item } from "@/context/GlobalStateContext";
import EllipsifiedAddress from "@/components/EllipsifiedAddress";
import { copyToClipboard } from '@/lib/utils'
Expand Down Expand Up @@ -42,89 +42,112 @@ const Preview = ({ isPreview = false }: { isPreview: boolean }) => {
}, [userProfile.username])

return (

<div className={
`flex flex-col gap-8 p-1 items-center border border-y-blue-100 border-x-red-100
${!isPreview && 'h-screen'}`
}>

{/* USERNAME */}
<div className="bg-gray-200 rounded-full mt-10 shadow-md">
<p className="p-4"><strong>@ {userProfile.username}</strong></p>
</div>

{/* WEB2 ITEMS */}
<div className="flex flex-wrap justify-center mt-2 mb-8 bg-gray-300 rounded-lg p-3 gap-x-3">
{userProfile.web2Items.map((item, index) => (
<a key={`web2Addresses${index}`} href={item.fullURL} target="_blank" rel="noopener noreferrer"
title={item.iconUrl.substring(item.iconUrl.lastIndexOf('/') + 1).replace('.svg', '')}
>
<div className="" style={{ display: "flex", alignItems: "center", margin: "2px" }}>
<Image src={item.iconUrl} alt={item.iconUrl}
width={30}
height={30}
loading="lazy"
/>
`flex flex-col gap-8 p-1 items-center border border-y-blue-100 border-x-red-100 rounded-xl`}>
{
userProfile.username ?
<>
{/* Image */}
<div className="bg-gray-200 rounded-full mt-5 shadow-md" title="">
<Blockies className="rounded-full" seed={userProfile.username} size={12} scale={10} />
</div>
</a>
))}
</div>

{/* WEB3 ITEMS */}
<div className="flex flex-col items-center justify-center">
{userProfile.web3Items.length > 0 && (
<div className="flex items-center space-x-4">
{/* @ts-expect-error error*/}
<Web3ItemsComboBox onSelect={handleWeb3ItemSelect} />
</div>
)}
{/* USERNAME */}
<div className="rounded-full shadow-sm">
<p className="p-4"><strong>@ {userProfile.username || "Not Found"}</strong></p>
</div>

{selectedWeb3Item.walletAddress && (
<div className="flex flex-col mt-4 gap-4 items-center">
<EllipsifiedAddress walletAddress={selectedWeb3Item.walletAddress} />
{/* <p className="pt-4">or Scan the QR Code</p> */}
<QRCodeSVG
className="rounded-xl border-8 p-2 border-gray-100"
size={200}
level={'H'}
title={`Scan the QR code to copy the selected wallet address`}
imageSettings={{
src: selectedWeb3Item.icon,
height: 50,
width: 50,
excavate: false,
opacity: 1
}}
value={selectedWeb3Item.walletAddress}
/>
</div>
)}
</div>
{/* WEB2 ITEMS */}
<div className="flex flex-wrap justify-center mb-2 bg-gray-100 rounded-lg p-3 px-16 gap-x-3">
{userProfile.web2Items.map((item, index) => (
<a key={`web2Addresses${index}`} href={item.fullURL} target="_blank" rel="noopener noreferrer"
title={item.iconUrl.substring(item.iconUrl.lastIndexOf('/') + 1).replace('.svg', '')}
>
<div className="" style={{ display: "flex", alignItems: "center", margin: "2px" }}>
<Image src={item.iconUrl} alt={item.iconUrl}
width={30}
height={30}
loading="lazy"
/>
</div>
</a>
))}
</div>

{/* WEB3 ITEMS */}
<div className="flex flex-col items-center justify-center">
{userProfile.web3Items.length > 0 && (
<div className="flex items-center space-x-4">
{/* @ts-expect-error error*/}
<Web3ItemsComboBox onSelect={handleWeb3ItemSelect} />
</div>
)}

{selectedWeb3Item.walletAddress && (
<div className="flex flex-col mt-4 gap-4 items-center">
<EllipsifiedAddress walletAddress={selectedWeb3Item.walletAddress} />
{/* <p className="pt-4">or Scan the QR Code</p> */}
<QRCodeSVG
className="rounded-xl border-8 p-2 border-gray-100"
size={200}
level={'H'}
title={`Scan the QR code to copy the selected wallet address`}
imageSettings={{
src: selectedWeb3Item.icon,
height: 50,
width: 50,
excavate: false,
opacity: 1
}}
value={selectedWeb3Item.walletAddress}
/>
</div>
)}
</div>

{!isPreview &&
<div className="flex text-xl items-center justify-center gap-8 space-x-2 pt-6 ">
<span className="fa-solid fa-share text-lg text-orange-500"
title="Share this profile"
></span>
<span className="flex space-x-4 items-center">
<span title="share this profile on twitter" onClick={shareOnTwitter} className="fa-brands fa-square-x-twitter cursor-pointer"></span>
<span title="share this profile on facebook" onClick={shareOnFacebook} className="fa-brands fa-square-facebook cursor-pointer"></span>
<span title="share this profile on whatsapp" onClick={shareOnWhatsApp} className="fa-brands fa-square-whatsapp cursor-pointer"></span>
</span>
<Button
size={"sm"}
onClick={() => {
copyToClipboard(pageUrl)
toast.info("Profile address is copied.", { description: 'Paste it wherever you like.' })
}}
>
<span className="fas fa-copy mr-1" />Copy Link
</Button>
</div>
{/* SHARE BUTTONS */}
{!isPreview &&
<div className="flex flex-col gap-4 text-center">
<div className="flex text-xl items-center justify-center gap-4 pt-3 ">
<span className="fa-solid fa-share text-2lg text-orange-500"
title="Share this profile"
></span>
<span className="flex space-x-4 items-center text-2xl">
<span title="share this profile on twitter" onClick={shareOnTwitter} className="fa-brands fa-square-x-twitter cursor-pointer"></span>
<span title="share this profile on facebook" onClick={shareOnFacebook} className="fa-brands fa-square-facebook cursor-pointer"></span>
<span title="share this profile on whatsapp" onClick={shareOnWhatsApp} className="fa-brands fa-square-whatsapp cursor-pointer"></span>
</span>
</div>
<div>
<a
className="cursor-pointer"
onClick={() => {
copyToClipboard(pageUrl)
toast.info("Profile address is copied.", { description: 'Paste it wherever you like.' })
}}
>
<span className="fas fa-copy m-1" />Copy Link
</a>
</div>
</ div>
}
</>
:
<>
<div className="flex flex-col gap-8 pt-10 text-center text-xl">
<p className="text-4xl">404</p>
<p className="">Profile Not Found!</p>

<div className="pt-32">
<a href={'/@qwe'}>
View a sample profile{' '}
<i className="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</>
}
</div>

);
};

Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"next-themes": "^0.3.0",
"qrcode.react": "^4.0.1",
"react": "^18",
"react-blockies": "^1.4.1",
"react-dom": "^18",
"react-hook-form": "^7.53.0",
"react-redux": "^9.1.2",
Expand All @@ -43,6 +44,7 @@
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-blockies": "^1.4.4",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.11",
Expand Down
16 changes: 15 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -731,6 +731,13 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==

"@types/react-blockies@^1.4.4":
version "1.4.4"
resolved "https://registry.yarnpkg.com/@types/react-blockies/-/react-blockies-1.4.4.tgz#17c3650b89fdc267a4a9a9668dbb35ed7834c7dd"
integrity sha512-7QfFeT1y/izwP/Wxmnl9Ii73udFQIBsfI/IvG+841sPxqc7Pf79ZDZP3XQsmYzAjDXdoZXquLgI/Q/tmAZwB0w==
dependencies:
"@types/react" "*"

"@types/react-dom@^18":
version "18.3.0"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
Expand Down Expand Up @@ -2853,7 +2860,7 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand All @@ -2877,6 +2884,13 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

react-blockies@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/react-blockies/-/react-blockies-1.4.1.tgz#d4f0faf95ac197213a297a370a4d7f77ea3d0b08"
integrity sha512-4N015X5oPNnD3xQPsiqolOFzPZSSWyc5mJhJUZShUCHtiGUxVN+1qsWTcglkHMNySux9hUofaispqcw9QkWP5Q==
dependencies:
prop-types "^15.5.10"

react-dom@^18:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
Expand Down

0 comments on commit 215ea06

Please sign in to comment.