Skip to content

Commit

Permalink
Merge pull request #36 from GeneralMagicio/bug_fixes_farcaster
Browse files Browse the repository at this point in the history 
Bug fixes farcaster
  • Loading branch information
@mmahdigh
mmahdigh authored Oct 23, 2024
2 parents 175d6fd + 963f7ca commit 2d62c2d
Show file tree
Hide file tree
Showing 22 changed files with 64 additions and 712 deletions.
53 changes: 13 additions & 40 deletions app/allocation/components/ConnectBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import {
} from '@worldcoin/idkit';
import { useQueryClient } from '@tanstack/react-query';
import { WorldIdIcon } from '@/public/assets/icon-components/WorldIdIcon';
import { XIcon } from '@/public/assets/icon-components/XIcon';
import { WarpcastIcon } from '@/public/assets/icon-components/WarpcastIcon';
import { actionId, appId } from '@/app/lib/constants';
import { useGetConnectionStatus, useWorldSignIn, useGetDelegationStatus } from '@/app/utils/getConnectionStatus';
import { CheckIcon } from '@/public/assets/icon-components/Check';
Expand All @@ -26,7 +24,6 @@ interface ConnectBoxProps {

const ConnectBox: React.FC<ConnectBoxProps> = ({
onConnectWorldID,
onConnectTwitter,
onConnectFarcaster,
}) => {
const { data: badges } = useGetPublicBadges();
Expand Down Expand Up @@ -71,7 +68,6 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
const { mutateAsync: worldIdSignIn } = useWorldSignIn();
const { data: connectionStatus } = useGetConnectionStatus();
const { data: delegates } = useGetDelegationStatus();
const connected = false; // tempo variable

const handleVerify = async (proof: ISuccessResult) => {
return (await worldIdSignIn(proof));
Expand Down Expand Up @@ -147,49 +143,21 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
? 'Connect your X and Farcaster account to find out if someone delegated their voting power to you.'
: 'Some people have delegated their voting power to you. With great power comes great responsibility. Use it wisely.'}
</p>
{connected
? (
<div className="flex w-full items-center justify-between">
<XIcon />
<div className="flex flex-col items-end justify-center gap-2">
<div className="flex items-center justify-center gap-2 rounded-full border border-[#079455] bg-[#17B26A] px-4 py-1">
<p className="text-sm text-gray-50">
<span className="font-semibold"> 5 people</span>
{' '}
delegated to
you
</p>
</div>
<button onClick={refresh} className="px-1 text-xs text-gray-600 underline">
Refresh
</button>
</div>
</div>
)
: (
<button
onClick={onConnectTwitter}
className="flex w-full items-center justify-center gap-2 rounded-lg border border-[##CBD5E0] bg-gray-100 px-4 py-2 font-semibold text-gray-800"
>
<XIcon />
Connect with X (Twitter)
</button>
)}
{connectionStatus?.farcaster
? (
<div className="flex w-full items-center justify-between">
<WarpcastIcon />
<Image
src="/assets/images/farcaster.svg"
alt="Farcaster Icon"
width={32}
height={32}
/>
<div className="flex flex-col items-end justify-center gap-2">
<div className="flex items-center justify-center gap-2 rounded-full border border-[#079455] bg-[#17B26A] px-4 py-1">
<p className="text-sm text-gray-50">
<span className="font-semibold">
{delegates?.toYou?.budget.length ?? 'No'}
{' '}
people
{delegates?.toYou?.budget.length ? `${delegates?.toYou?.budget.length} people delegated to you` : 'You have no delegations'}
</span>
{' '}
delegated to
you
</p>
</div>
<button onClick={refresh} className="px-1 text-xs text-gray-600 underline">
Expand All @@ -203,7 +171,12 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
onClick={onConnectFarcaster}
className="flex w-full items-center justify-center gap-2 rounded-lg border border-[##CBD5E0] bg-gray-100 px-4 py-2 font-semibold text-gray-800"
>
<WarpcastIcon />
<Image
src="/assets/images/farcaster.svg"
alt="Farcaster Icon"
width={20}
height={20}
/>
Connect with Farcaster
</button>
)}
Expand Down
1 change: 0 additions & 1 deletion app/allocation/components/WorldIdSignInSuccessModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ const WorldIdSignInSuccessModal: React.FC<WorldIdModalProps> = ({
'holderPoints',
badges,
)}
worldCoinVerified={badges?.worldCoinVerified}
/>
</div>
)}
Expand Down
12 changes: 1 addition & 11 deletions app/comparison/card/modals/BadgesModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,12 @@ const BadgesModal = ({ badges }: BadgesModalProps) => {
}
switch (badge.type) {
case BadgesEnum.HOLDER:
if (allBadges?.worldCoinVerified) {
return (
<div>
<div className="flex items-center gap-1 text-xs font-normal leading-4">
<p>Verified WorldID</p>
</div>
</div>
);
}
// eslint-disable-next-line no-fallthrough
case BadgesEnum.DELEGATE:
return (
<div>
<div className="mb-2 flex items-center gap-2 text-sm">
<Image
src="/images/tokens/op.png"
src="/assets/images/tokens/op.png"
width={16}
height={16}
alt="token"
Expand Down
54 changes: 30 additions & 24 deletions app/utils/BadgeCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ interface BadgeCardProps {
points: number
medal?: MedalTypes
amount?: number
worldCoinVerified?: boolean
}

export type BadgeCardEntryType = [
Expand All @@ -24,12 +23,33 @@ export const badgeTypeMapping = {

type BadgeType = keyof typeof badgeTypeMapping;

const badgeImages: Record<BadgeType, Record<MedalTypes, string> | string>
= {
holderPoints: {
Bronze: '/assets/images/badges/holder_bronze.svg',
Silver: '/assets/images/badges/holder_silver.svg',
Gold: '/assets/images/badges/holder_gold.svg',
Platinum: '/assets/images/badges/holder_platinum.svg',
Diamond: '/assets/images/badges/holder_diamond.svg',
Whale: '/assets/images/badges/holder_whale.svg',
},
delegatePoints: {
Bronze: '/assets/images/badges/delegate_bronze.svg',
Silver: '/assets/images/badges/delegate_silver.svg',
Gold: '/assets/images/badges/delegate_gold.svg',
Platinum: '/assets/images/badges/delegate_platinum.svg',
Diamond: '/assets/images/badges/delegate_diamond.svg',
Whale: '/assets/images/badges/delegate_whale.svg',
},
badgeholderPoints: '/assets/images/badges/badgeholder.svg',
recipientsPoints: '/assets/images/badges/recipient.svg',
};

const BadgeCard: React.FC<BadgeCardProps> = ({
type,
points,
medal,
amount,
worldCoinVerified,
}) => {
const formatAmount = (amount: number | undefined) => {
if (amount === undefined) return '';
Expand All @@ -38,39 +58,25 @@ const BadgeCard: React.FC<BadgeCardProps> = ({
: amount.toString();
};
const handleBadgesImage = () => {
switch (type) {
case 'holderPoints':
return '/images/badges/holder/' + medal?.toLowerCase() + '/128.svg';
case 'delegatePoints':
return '/images/badges/delegate/' + medal?.toLowerCase() + '/128.svg';
case 'recipientsPoints':
return '/images/badges/recipient/128.svg';
case 'badgeholderPoints':
return '/images/badges/badgeholder/128.svg';
default:
return '/images/badges/1.png';
const image = badgeImages[type];
if (typeof image === 'string') {
return image;
}
if (medal) {
return image[medal];
}
throw new Error(`Badge of type ${type} requires a medal.`);
};

const handleBadgeInfo = (amount?: number, points?: number) => {
switch (type) {
case 'holderPoints':
if (worldCoinVerified) {
return (
<div>
<div className="flex items-center gap-1 text-xs font-normal leading-4">
<p>Verified WorldID</p>
</div>
</div>
);
}
// eslint-disable-next-line no-fallthrough
case 'delegatePoints':
return (
<div>
<div className="mb-2 flex items-center gap-2 text-sm">
<Image
src="/images/tokens/op.png"
src="/assets/images/tokens/op.png"
width={16}
height={16}
alt="token"
Expand Down
8 changes: 4 additions & 4 deletions app/utils/wallet/Modals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useAccount } from 'wagmi';
import { IDKitWidget, ISuccessResult, useIDKit, VerificationLevel } from '@worldcoin/idkit';
import Modal from '../Modal';
import ConnectLoading from './modals/ConnectLoading';
import NotBadgeHolder from './modals/NotBhModal';
import BadgeHolderModal from './modals/NotBhModal';
import SignInWithWallet from './modals/SignInModal';
import { LogginToPwBackendState, useAuth } from './AuthProvider';
import NewWalletModal from './modals/NewWalletModal';
Expand Down Expand Up @@ -85,20 +85,20 @@ export default function Modals() {
<Modal
isOpen={notBhOpen}
onClose={() => {
setShowBhModal(false);
router.push('/allocation');
}}
>
{notBhOpen
&& (
<NotBadgeHolder
<BadgeHolderModal
open={() => {
open();
}}
onConnectFarcaster={() => {
setIsOpenFarcasterModal(true);
setShowBhModal(false);
}}
onConnectTwitter={() => {}}

/>
)}
</Modal>
Expand Down
26 changes: 7 additions & 19 deletions app/utils/wallet/modals/NotBhModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,24 @@ import { useRouter } from 'next/navigation';
import { shortenWalletAddress } from '@/app/comparison/utils/helpers';
import { BadgeData, getBadgeAmount, getBadgeMedal, useGetPublicBadges } from '../../getBadges';
import BadgeCard, { BadgeCardEntryType } from '../../BadgeCard';
import { XIcon } from '@/public/assets/icon-components/XIcon';
import { WarpcastIcon } from '@/public/assets/icon-components/WarpcastIcon';
import { WorldIdIcon } from '@/public/assets/icon-components/WorldIdIcon';
import { useGetConnectionStatus, useGetDelegationStatus } from '../../getConnectionStatus';
import { CheckIcon } from '@/public/assets/icon-components/Check';

interface SignedModalProps {
onConnectTwitter: () => void
interface BhModalProps {
onConnectFarcaster: () => void
open: () => void
}
const NotBadgeHolder: React.FC<SignedModalProps> = (
{ onConnectFarcaster, onConnectTwitter, open }

const BadgeHolderModal: React.FC<BhModalProps> = (
{ onConnectFarcaster, open }
) => {
const { address } = useAccount();
const { data: badges } = useGetPublicBadges();
const { data: connectionStatus } = useGetConnectionStatus();
const { data: delegates } = useGetDelegationStatus();

const isWorldCoinVerified = badges?.worldCoinVerified ?? false;
const badgeCards = useMemo(() => {
if (!badges) return null;
const {
Expand All @@ -51,14 +49,13 @@ const NotBadgeHolder: React.FC<SignedModalProps> = (
key,
badges,
)}
worldCoinVerified={isWorldCoinVerified}
/>
);
});
}, [badges]);
const router = useRouter();
return (
<div className="relative flex w-[600px] flex-col items-center justify-center gap-6 rounded-lg bg-white bg-social-gradient px-24 py-8 text-center md:w-[820px]">
<div className="relative flex flex-col items-center justify-center gap-6 rounded-lg bg-white bg-social-gradient px-24 py-8 text-center">
<h2 className="w-fit text-wrap text-4xl font-bold">Welcome to the Pairwise voting for "Retro Funding 6"</h2>
{badges && Object.keys(badges).length > 0
? (
Expand Down Expand Up @@ -118,13 +115,6 @@ const NotBadgeHolder: React.FC<SignedModalProps> = (
</div>
)}
</div>
<button
onClick={onConnectTwitter}
className="flex w-full items-center justify-center gap-2 rounded-lg border border-[##CBD5E0] bg-gray-100 px-4 py-2 font-semibold text-gray-800"
>
<XIcon />
Connect with X (Twitter)
</button>
<div>
<button
onClick={onConnectFarcaster}
Expand All @@ -142,9 +132,7 @@ const NotBadgeHolder: React.FC<SignedModalProps> = (
{connectionStatus?.farcaster && (
<div className="flex w-full items-center justify-center">
<p className="text-center text-sm font-medium text-[#079455]">
{delegates?.toYou?.budget.length ?? 'No'}
{' '}
people delegated to you
{(delegates?.toYou?.budget.length) ? '' : ''}
</p>

</div>
Expand Down Expand Up @@ -180,4 +168,4 @@ const NotBadgeHolder: React.FC<SignedModalProps> = (
);
};

export default NotBadgeHolder;
export default BadgeHolderModal;
9 changes: 9 additions & 0 deletions public/assets/images/star-blonde.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 public/images/tokens/op.png → public/assets/images/tokens/op.png
View file
File renamed without changes
22 changes: 0 additions & 22 deletions public/images/badges/badgeholder/128.svg
View file

This file was deleted.

Loading

0 comments on commit 2d62c2d

Please sign in to comment.