Skip to content

Commit

Permalink
feat: add farcaster sign-in option (#53)
Browse files Browse the repository at this point in the history 
Co-authored-by: Jon <jon@xeon-protocol.io>
  • Loading branch information
@RTJ99 @heyJonBray
RTJ99 and heyJonBray authored Aug 26, 2024
1 parent 92e3f9d commit a82ef8f
Show file tree
Hide file tree
Showing 8 changed files with 2,065 additions and 27,833 deletions.
22,485 changes: 0 additions & 22,485 deletions package-lock.json
View file

This file was deleted.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"react-icons": "^5.2.1",
"react-lottie-player": "^2.0.0",
"recharts": "^2.12.7",
"thirdweb": "^5.36.0",
"thirdweb": "^5.48.0",
"wagmi": "^2.11.2"
},
"devDependencies": {
Expand All @@ -44,4 +44,4 @@
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4"
}
}
}
Binary file removed public/Logo2.png
View file
Binary file not shown.
Binary file added public/logo-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/components/ConnectWallet/NetworkChecker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,25 @@ import {
} from 'thirdweb/react';

import { client } from './client';
import { createWallet, inAppWallet } from 'thirdweb/wallets';

const NetworkChecker = () => {
const activeChain = useActiveWalletChain();
const switchChain = useSwitchActiveWalletChain();
const connectionStatus = useActiveWalletConnectionStatus();
const { connect, isConnecting, error } = useConnect();
const [loading, setLoading] = useState(true);
const wallets = [
inAppWallet({
auth: {
options: ['farcaster', 'passkey'],
},
}),
createWallet('io.metamask'),
createWallet('com.coinbase.wallet'),
createWallet('me.rainbow'),
createWallet('io.zerion.wallet'),
];

useEffect(() => {
if (connectionStatus === 'unknown' || connectionStatus === 'connecting') {
Expand Down Expand Up @@ -82,6 +94,7 @@ const NetworkChecker = () => {
</Text>

<ConnectButton
wallets={wallets}
connectButton={{
className:
'text-white bg-button-gradient rounded-full px-8 py-2 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue',
Expand Down
243 changes: 157 additions & 86 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,181 @@
'use client';
import { client } from '@/components/ConnectWallet/client';
import { Image, Tooltip } from '@chakra-ui/react';
import Link from 'next/link';
import { useState } from 'react';
import { ConnectButton } from 'thirdweb/react';
"use client";
import {client} from "@/components/ConnectWallet/client";
import {Image, Spinner, Tooltip} from "@chakra-ui/react";
import Link from "next/link";
import {useState} from "react";
import {LuWallet} from "react-icons/lu";
import {
ConnectButton,
useActiveAccount,
useActiveWallet,
useDisconnect,
useWalletBalance,
useActiveWalletChain,
useWalletDetailsModal,
} from "thirdweb/react";
import {inAppWallet} from "thirdweb/wallets";

function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const activeAccount = useActiveAccount();
const {disconnect} = useDisconnect();
const wallet = useActiveWallet();
const chain = useActiveWalletChain();
const detailsModal = useWalletDetailsModal();
const address = activeAccount?.address;
const {data, isLoading, isError} = useWalletBalance({
chain,
address,
client,
});

const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
async function handleShowModal() {
detailsModal.open({client, theme: "dark"});
}
const wallets = [
inAppWallet({
auth: {
options: [
"farcaster",
"google",
"apple",
"facebook",
"phone",
"email",
"passkey",
],
},
}),
];

return (
<header
className="flex items-center justify-between p-1 bg-black text-white
border border-gray-800 rounded-full fixed top-6 w-full z-50 w-[calc(100%-5rem)]
left-1/2 transform -translate-x-1/2
max-w-screen-2xl
"
>
<Link href={'/'} className="text-lg font-medium">
<Image className="hidden md:block" ml={6} src="/logo.png" alt="xeon" />
<Image className=" md:hidden" ml={6} src="/Logo2.png" alt="xeon" />
</Link>

<nav className="hidden md:flex space-x-6">
<Link href={'/silkroad'}>Silkroad</Link>
<Tooltip label="Page under construction">
<div className="cursor-not-allowed">Wallet</div>
</Tooltip>
<Tooltip label="Page under construction">
<div className="cursor-not-allowed">Analytics</div>
</Tooltip>
<Link href={'/guide'}>Guide</Link>
<Link href={'/'}>Claim</Link>
<Link
href={'https://docs.xeon-protocol.io/documentation'}
target="_blank"
rel="noopener noreferrer"
>
Docs
<header className="bg-black bg-opacity-85 text-white border-y border-gray-800 fixed top-6 w-full z-50 left-0">
<div className="flex items-center justify-between p-1 w-[calc(100%-5rem)] max-w-screen-2xl mx-auto">
<Link href={"/"} className="text-lg font-medium">
<Image
className="hidden md:block w-auto h-[50px] p-1"
ml={6}
src="/logo.png"
alt="xeon"
/>
<Image
className=" md:hidden w-auto h-[50px] p-1"
ml={6}
src="/logo-2.png"
alt="xeon"
/>
</Link>
</nav>
<div className="md:hidden">
<p className="text-grey" onClick={toggleMenu}>
MENU
</p>
</div>

<div className=" md:flex gap-4">
<ConnectButton
connectButton={{
className:
'text-white bg-button-gradient rounded-full px-8 py-2 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue',
style: {
borderRadius: '50px',
backgroundColor: '#3253FB',
color: 'white',
},
}}
signInButton={{
className:
'text-white bg-button-gradient rounded-full px-8 py-2 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue',
}}
detailsButton={{
className:
'text-white bg-button-gradient rounded-full px-8 py-2 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue',
style: {
borderRadius: '50px',
backgroundColor: '#3253FB',
color: 'white',
},
}}
client={client}
/>
</div>

{isMenuOpen && (
<nav className="absolute top-16 left-0 w-full bg-gray-800 text-white flex flex-col items-center space-y-4 p-4 md:hidden">
<Link href="/silkroad">
<p className="hover:text-gray-400">Silkroad</p>
</Link>
<nav className="hidden md:flex space-x-6">
<Link href={"/silkroad"}>Silkroad</Link>
<Tooltip label="Page under construction">
<div className="hover:text-gray-400 cursor-not-allowed">Wallet</div>
<div className="cursor-not-allowed">Wallet</div>
</Tooltip>
<Tooltip label="Page under construction">
<div className="hover:text-gray-400 cursor-not-allowed">
Analytics
</div>
<div className="cursor-not-allowed">Analytics</div>
</Tooltip>
<Link href="/guide">
<p className="hover:text-gray-400">Guide</p>
</Link>
<Link href="/">
<p className="hover:text-gray-400">Claim</p>
</Link>
<Link href={"/guide"}>Guide</Link>
<Link href={"/"}>Claim</Link>
<Link
href="https://docs.xeon-protocol.io/documentation"
href={"https://docs.xeon-protocol.io/documentation"}
target="_blank"
rel="noopener noreferrer"
>
<p className="hover:text-gray-400">Docs</p>
Docs
</Link>
</nav>
)}
<div className="md:hidden">
<p className="text-grey" onClick={toggleMenu}>
MENU
</p>
</div>

<div className=" md:flex gap-4 p-1">
<ConnectButton
wallets={wallets}
connectButton={{
className:
"text-white bg-button-gradient px-8 py-1 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue",
style: {
backgroundColor: "#3253FB",
color: "white",
},
}}
signInButton={{
className:
"text-white bg-button-gradient px-8 py-1 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue",
}}
detailsButton={{
className:
"text-white bg-button-gradient px-8 py-1 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue",
style: {
backgroundColor: "#3253FB",
color: "white",
},
render: () => {
return (
<div className="flex gap-2 items-center">
{isLoading ? (
<Spinner size="sm" />
) : isError ? (
<p>Error</p>
) : (
<p className="text-grey">
{parseFloat(data?.displayValue).toFixed(3)}{" "}
{data.symbol}
</p>
)}
<LuWallet className="inline-block" />
<button
onClick={handleShowModal}
className="text-white bg-button-gradient px-4 py-1 border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-blue rounded-md"
>
{activeAccount?.address?.slice(0, 6) +
"..." +
activeAccount?.address.slice(-4)}
</button>
</div>
);
},
}}
client={client}
/>
</div>

{isMenuOpen && (
<nav className="absolute top-16 left-0 w-full bg-gray-800 text-white flex flex-col items-center space-y-4 p-4 md:hidden">
<Link href="/silkroad">
<p className="hover:text-gray-400">Silkroad</p>
</Link>
<Tooltip label="Page under construction">
<div className="hover:text-gray-400 cursor-not-allowed">
Wallet
</div>
</Tooltip>
<Tooltip label="Page under construction">
<div className="hover:text-gray-400 cursor-not-allowed">
Analytics
</div>
</Tooltip>
<Link href="/guide">
<p className="hover:text-gray-400">Guide</p>
</Link>
<Link href="/">
<p className="hover:text-gray-400">Claim</p>
</Link>
<Link
href="https://docs.xeon-protocol.io/documentation"
target="_blank"
rel="noopener noreferrer"
>
<p className="hover:text-gray-400">Docs</p>
</Link>
</nav>
)}
</div>
</header>
);
}
Expand Down
Loading

0 comments on commit a82ef8f

Please sign in to comment.