diff --git a/.env.example b/.env.example index 7d08188ad..dd6133e6e 100644 --- a/.env.example +++ b/.env.example @@ -23,15 +23,6 @@ NEXT_PUBLIC_NOTIFICATION_MESSAGE="App is currently under maintenance. Please ret # markets that will not be shown in the app NEXT_PUBLIC_HIDDEN_MARKET_IDS=[674] -NEXT_PUBLIC_RMRK_PRERENDER_URL="https://d4sxkuih4kir3.cloudfront.net" -NEXT_PUBLIC_AVATAR_BASE_ID="base-1109632-ZEIT-BASE-V8" -NEXT_PUBLIC_BADGE_COLLECTION_ID="2e55d4bf2e85715b63-ZEITBADGES" -NEXT_PUBLIC_AVATAR_COLLECTION_ID="2e55d4bf2e85715b63-ZEITASTAGE" -NEXT_PUBLIC_SINGULAR_URL="https://singular-rmrk2-dev.vercel.app" -NEXT_PUBLIC_RMRK_INDEXER_API="https://gql2.rmrk.dev/v1/graphql" -NEXT_PUBLIC_IPFS_NODE="http://ipfs.zeitgeist.pm:5001" -NEXT_PUBLIC_RMRK_CHAIN_RPC_NODE="wss://kusama-node-staging.rmrk.link" -NEXT_PUBLIC_AVATAR_API_HOST="https://avatar-bsr.zeitgeist.pm/" NEXT_PUBLIC_MIGRATION_IN_PROGRESS=false # enable in dev/staging to inspect react-query cache and query handling. diff --git a/.env.production b/.env.production index 4acc3c9a9..21ffebfe9 100644 --- a/.env.production +++ b/.env.production @@ -14,15 +14,7 @@ NEXT_PUBLIC_NOT_ALLOWED_COUNTRIES=["US","KP","SY","CU","IR","VE","PR"] # markets that will not be shown in the app #NEXT_PUBLIC_HIDDEN_MARKET_IDS=[] -NEXT_PUBLIC_RMRK_PRERENDER_URL="https://prerender.rmrk.link" -NEXT_PUBLIC_AVATAR_BASE_ID="base-13772583-ZEIT-BASE-V1" -NEXT_PUBLIC_BADGE_COLLECTION_ID="48c2f61e58b57af315-ZTGBDGS" -NEXT_PUBLIC_AVATAR_COLLECTION_ID="48c2f61e58b57af315-ZTGAVTRS" -NEXT_PUBLIC_SINGULAR_URL="https://singular.app" -NEXT_PUBLIC_RMRK_INDEXER_API="https://gql-rmrk2-prod.graphcdn.app" NEXT_PUBLIC_IPFS_NODE="http://ipfs.zeitgeist.pm:5001" -NEXT_PUBLIC_RMRK_CHAIN_RPC_NODE="wss://kusama-rpc.polkadot.io" -NEXT_PUBLIC_AVATAR_API_HOST="https://avatara.zeitgeist.pm/" NEXT_PUBLIC_VERCEL_ENV=production NEXT_PUBLIC_SITE_URL=https://app.zeitgeist.pm diff --git a/components/avatar/BadgesList.tsx b/components/avatar/BadgesList.tsx deleted file mode 100644 index de10574ed..000000000 --- a/components/avatar/BadgesList.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { Badge } from "@zeitgeistpm/avatara-nft-sdk"; -import { cidToUrl, sanitizeIpfsUrl } from "@zeitgeistpm/avatara-util"; -import EmptyPortfolio from "components/portfolio/EmptyPortfolio"; -import { AnimatePresence, motion } from "framer-motion"; -import { useBadges } from "lib/hooks/queries/useBadges"; -import { capitalize } from "lodash-es"; -import { useState } from "react"; -import { AiFillInfoCircle } from "react-icons/ai"; - -const BadgesList = ({ address }: { address: string }) => { - const { data: badges, isLoading } = useBadges(address); - - return ( - <> - {isLoading === false && badges?.length === 0 ? ( - - ) : ( -
- {badges?.map((item, index) => )} -
- )} - - ); -}; - -const BadgeItem = (props: { item: Badge.IndexedBadge }) => { - const { item } = props; - - const [hoverInfo, setHoverInfo] = useState(false); - - const mouseEnterInfoIcon = () => { - setHoverInfo(true); - }; - - const mouseLeaveBadge = () => { - setHoverInfo(false); - }; - - const rarity = item.metadata_properties?.badge.value.rarity; - const rarityBgColor = - rarity === "common" - ? "green-500" - : rarity === "rare" - ? "blue-500" - : rarity === "epic" - ? "purple-500" - : "orange-1"; - - return ( -
-
- - {hoverInfo && ( - -
-
-
- {capitalize(item.metadata_properties?.badge.value.rarity)}{" "} - Badge -
-
-
- {capitalize(item.metadata_properties?.badge.value.slot.id)} -
-
-

- {item.metadata_properties?.badge.value.criteria.description} -

- {item.burned === "" ? ( - -
- -
View on Singular 2.0
-
- - ) : ( - "" - )} -
- - )} - -
-
- -
- -
- - -
-
-
-

- {item.metadata_properties?.badge.value.levelName || - item.metadata_properties?.badge.value.name} -

-

- {capitalize(item.metadata_properties?.badge.value.category)} -

-
-
- ); -}; - -export default BadgesList; diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx index f29ba7760..b90a3e5cf 100644 --- a/components/ui/Avatar.tsx +++ b/components/ui/Avatar.tsx @@ -1,9 +1,5 @@ import { decodeAddress } from "@polkadot/keyring"; -import { sanitizeIpfsUrl } from "@zeitgeistpm/avatara-util"; import BoringAvatar from "boring-avatars"; -import { useAvatarParts } from "lib/hooks/queries/useAvatarParts"; -import Image from "next/image"; -import Skeleton from "./Skeleton"; const blues = ["#0001fe", "#a000ff", "#70f8ff"]; const reds = ["#fb7ce8", "#FF0054", "#FAB400"]; @@ -30,13 +26,6 @@ const Avatar = ({ const red = reds[decodedAddressArray[6] % reds.length]; const blueFirst = decodedAddressArray[10] % 2; - const { - data: avatarParts, - isLoading, - isFetching, - isFetched, - } = useAvatarParts(address); - return (
- {(isFetching || isLoading) && !isFetched ? ( - - ) : avatarParts ? ( -
- {avatarParts.map( - ({ part }, index) => - part.src && ( - {"Avatar - ), - )} -
- ) : ( - - )} +
); }; diff --git a/lib/hooks/queries/useAvatarParts.ts b/lib/hooks/queries/useAvatarParts.ts deleted file mode 100644 index 6b31df667..000000000 --- a/lib/hooks/queries/useAvatarParts.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { UseQueryResult, useQuery } from "@tanstack/react-query"; -import { Avatar, SdkContext } from "@zeitgeistpm/avatara-nft-sdk"; -import { useAvatarContext } from "@zeitgeistpm/avatara-react"; -import { encodeAddress } from "@polkadot/util-crypto"; - -export const avatarPartsKey = "avatar-parts"; - -export const useAvatarParts = ( - address: string, -): UseQueryResult> => { - const nftSdk = useAvatarContext(); - - const enabled = !!nftSdk && !!address; - - return useQuery( - [avatarPartsKey, address], - async () => { - if (!enabled) return null; - - return getAvatarParts(nftSdk, address); - }, - { - enabled, - keepPreviousData: true, - staleTime: 100_000, - }, - ); -}; - -export const getAvatarParts = async ( - avatarSdk: SdkContext, - address: string, -) => { - const encodedAddress = encodeAddress( - address, - avatarSdk.chainProperties.ss58Format, - ); - const avatar = await Avatar.fetchIndexedAvatarForAccount( - avatarSdk, - encodedAddress, - ); - - if (!Avatar.isAvatarWithBase(avatar)) return null; - const inventory = await Avatar.fetchInventoryForAvatar(avatarSdk, avatar); - - const orderedParts = await Avatar.orderParts(avatar, inventory ?? []); - return orderedParts; -}; diff --git a/lib/hooks/queries/useBadges.ts b/lib/hooks/queries/useBadges.ts deleted file mode 100644 index ca08bfa8a..000000000 --- a/lib/hooks/queries/useBadges.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -import { Avatar } from "@zeitgeistpm/avatara-nft-sdk"; -import { useAvatarContext } from "@zeitgeistpm/avatara-react"; - -export const badgesRootKey = "badges"; - -export const useBadges = (address: string) => { - const avatarContext = useAvatarContext(); - - const query = useQuery( - [badgesRootKey, address], - async () => { - if (avatarContext) { - return Avatar.fetchEarnedBadgesForAddress(avatarContext, address); - } - }, - { - enabled: Boolean(avatarContext && address), - }, - ); - - return query; -}; diff --git a/lib/util/create-avatar-sdk.ts b/lib/util/create-avatar-sdk.ts deleted file mode 100644 index 91ec86841..000000000 --- a/lib/util/create-avatar-sdk.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { createSdkContext } from "@zeitgeistpm/avatara-nft-sdk"; - -export const createAvatarSdk = () => { - return createSdkContext({ - api: process.env.NEXT_PUBLIC_AVATAR_API_HOST!, - ipfs: { node: { url: process.env.NEXT_PUBLIC_IPFS_NODE! } }, - rpc: process.env.NEXT_PUBLIC_RMRK_CHAIN_RPC_NODE!, - indexer: process.env.NEXT_PUBLIC_RMRK_INDEXER_API!, - avatarCollectionId: process.env.NEXT_PUBLIC_AVATAR_COLLECTION_ID!, - badgeCollectionId: process.env.NEXT_PUBLIC_BADGE_COLLECTION_ID!, - avatarBaseId: process.env.NEXT_PUBLIC_AVATAR_BASE_ID!, - prerenderUrl: process.env.NEXT_PUBLIC_RMRK_PRERENDER_URL!, - }); -}; diff --git a/package.json b/package.json index 9a605b3a8..d5256254b 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "@yornaath/batshit-devtools-react": "^0.5.4", "@zeitgeistpm/augment-api": "3.7.0", "@zeitgeistpm/avatara-nft-sdk": "^1.3.1", - "@zeitgeistpm/avatara-react": "^1.3.2", "@zeitgeistpm/avatara-util": "^1.2.0", "@zeitgeistpm/sdk": "3.7.0", "@zeitgeistpm/utility": "3.7.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index e6ca405b7..671623a25 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,7 +4,6 @@ import "styles/index.css"; import { Hydrate, QueryClientProvider } from "@tanstack/react-query"; import * as Fathom from "fathom-client"; -import { AvatarContext } from "@zeitgeistpm/avatara-react"; import Devtools from "components/devtools"; import DefaultLayout from "layouts/DefaultLayout"; import { appQueryClient } from "lib/query-client"; @@ -82,28 +81,15 @@ const MyApp = ({ Component, pageProps }) => { - - - Zeitgeist - Prediction Markets - - - - - - - {/* */} - + + Zeitgeist - Prediction Markets + + + + + + + {/* */}
diff --git a/pages/badges.tsx b/pages/badges.tsx deleted file mode 100644 index 9df5051a2..000000000 --- a/pages/badges.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import { Badge } from "@zeitgeistpm/avatara-nft-sdk"; -import { useAvatarContext } from "@zeitgeistpm/avatara-react"; -import { cidToUrl, sanitizeIpfsUrl } from "@zeitgeistpm/avatara-util"; -import { partial } from "lodash"; - -import { AnimatePresence, motion } from "framer-motion"; -import { capitalize } from "lodash"; -import { useEffect, useState } from "react"; -import { AiFillInfoCircle } from "react-icons/ai"; -import Select from "react-select"; - -export type RaritySelectValue = { - label: string; - value: Badge.Rarity; -}; - -const rarities: RaritySelectValue[] = [ - { value: "common", label: "Common" }, - { value: "rare", label: "Rare" }, - { value: "epic", label: "Epic" }, - { value: "legendary", label: "Legendary" }, - { value: "mythical", label: "Mythical" }, -]; - -export const colorForRarity = (rarity: Badge.Rarity) => { - return rarity === "common" - ? "green-500" - : rarity === "rare" - ? "blue-500" - : rarity === "epic" - ? "purple-500" - : "orange-1"; -}; - -const BadgesPage = () => { - const avatarContext = useAvatarContext(); - - const [rarity, setRarity] = useState(rarities[1]); - const [badgeSpecs, setBadgeSpecs] = useState([]); - - useEffect(() => { - if (avatarContext) { - Badge.listBadgeSpecs(avatarContext).then(setBadgeSpecs); - } - }, [avatarContext]); - - const onChangeRarity = (rarity: RaritySelectValue) => { - setRarity(rarity); - }; - - const badges = badgeSpecs - .map(partial(Badge.discretize, rarity.value)) - .map((badge) => { - if (badge._tag === "Right") { - return badge.right; - } - return null; - }) - .filter(Boolean); - - return ( -
-

Badges

-
-

- All available badges. Grouped by rarity. Select rarity to view how the - badge looks at that level -

-