From 11ffbbce389abb5f0e8b7ab146c1af4b7f0ff4d4 Mon Sep 17 00:00:00 2001 From: Mel Massadian Date: Fri, 3 Mar 2023 00:32:36 +0100 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20back=20the=20prof?= =?UTF-8?q?ile=20filters?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atoms/logo/{index.jsx => index.tsx} | 6 +- src/atoms/token-collection/index.jsx | 2 +- src/components/collab/sign/SigningUI.jsx | 2 +- .../header/{Header.jsx => Header.tsx} | 21 ++++-- src/context/collabStore.ts | 10 +-- src/context/mintStore.ts | 2 +- src/context/userStore.ts | 5 +- src/pages/objkt-display/tabs/Swap.jsx | 10 +-- src/pages/profile/collabs.jsx | 6 +- src/pages/profile/collections.jsx | 33 +++++---- src/pages/profile/creations.jsx | 74 +++++++++++-------- src/pages/profile/filters.jsx | 28 ++++--- src/pages/profile/index.jsx | 4 +- src/pages/profile/index.module.scss | 16 ++++ src/pages/profile/warning.jsx | 2 +- 15 files changed, 127 insertions(+), 94 deletions(-) rename src/atoms/logo/{index.jsx => index.tsx} (86%) rename src/components/header/{Header.jsx => Header.tsx} (93%) diff --git a/src/atoms/logo/index.jsx b/src/atoms/logo/index.tsx similarity index 86% rename from src/atoms/logo/index.jsx rename to src/atoms/logo/index.tsx index 1f314ae59..7b14be01b 100644 --- a/src/atoms/logo/index.jsx +++ b/src/atoms/logo/index.tsx @@ -5,7 +5,7 @@ import { memo } from 'react' import { useMemo } from 'react' import { RotatingLogoSVG } from '@icons' import { randomSeed } from '@utils' -export const RotatingLogoRemote = ({ className, seed = 1 }) => { +export const RotatingLogoRemote = ({ className = '', seed = 1 }) => { const theme = useLocalSettings((state) => state.theme) const { logos } = useSettings() @@ -30,14 +30,14 @@ export const RotatingLogoRemote = ({ className, seed = 1 }) => { ) } -export const RotatingLogo = ({ className, seed = 1 }) => { +export const RotatingLogo = ({ className = '', seed = 1 }) => { const Logo = useMemo(() => { return RotatingLogoSVG[ Math.floor(randomSeed(seed) * RotatingLogoSVG.length) ] }, [seed]) return ( -
+

BETA

diff --git a/src/atoms/token-collection/index.jsx b/src/atoms/token-collection/index.jsx index 885756ad6..20df18388 100644 --- a/src/atoms/token-collection/index.jsx +++ b/src/atoms/token-collection/index.jsx @@ -68,7 +68,7 @@ function MasonryView({ tokens }) { * @param {number} tkProps.itemsPerLoad - Batch size * @param {number} tkProps.maxItems - Max items to fetch from the indexer * @param {(data:NFT, extra:import("@types").TokenResponse) => [NFT]} tkProps.extractTokensFromResponse - Function to filter the response - * @param {([NFT]) => [NFT]} tkProps.postProcessTokens - Final filter pass over tokens? + * @param {(tokens:NFT[]) => NFT[]} tkProps.postProcessTokens - Final filter pass over tokens? * @returns {React.ReactElement} The feed */ function TokenCollection({ diff --git a/src/components/collab/sign/SigningUI.jsx b/src/components/collab/sign/SigningUI.jsx index 5f9d7bf5e..425e4e172 100644 --- a/src/components/collab/sign/SigningUI.jsx +++ b/src/components/collab/sign/SigningUI.jsx @@ -6,7 +6,7 @@ export const SigningUI = ({ id, hasSigned }) => { const sign = useCollabStore((st) => st.sign) const do_sign = () => { - sign(id).then((response) => console.log(response)) + sign(id).then((response) => console.debug(response)) } return hasSigned ? ( diff --git a/src/components/header/Header.jsx b/src/components/header/Header.tsx similarity index 93% rename from src/components/header/Header.jsx rename to src/components/header/Header.tsx index aafe54768..e9e4b165b 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.tsx @@ -77,9 +77,9 @@ export const Header = () => { const isWide = useMedia('(min-width: 600px)') - const [logoSeed, setLogoSeed] = useState() + const [logoSeed, setLogoSeed] = useState() /** the header is a bit larger just on home */ - const [onHome, setOnHome] = useState() + const [onHome, setOnHome] = useState() const [syncLabel, setSyncLabel] = useState('Sync') const [walletLabel, setWalletLabel] = useState('') @@ -97,7 +97,12 @@ export const Header = () => { // on Menu Toggle or Sign in useEffect(() => { - const updateTitle = ([address, proxyAddress, proxyName, userInfo]) => { + const updateTitle = ([address, proxyAddress, proxyName, userInfo]: [ + string | undefined, + string | undefined, + string | undefined, + Teia_Users + ]) => { setSyncLabel(address ? 'Unsync' : 'Sync') if (address) { // is menu closed? @@ -118,12 +123,18 @@ export const Header = () => { } return useUserStore.subscribe( - (st) => [st.address, st.proxyAddress, st.proxyName, st.userInfo], + (st) => + [st.address, st.proxyAddress, st.proxyName, st.userInfo] as [ + string | undefined, + string | undefined, + string | undefined, + Teia_Users + ], updateTitle ) }, []) - const handleRoute = (path, data) => { + const handleRoute = (path: string, data?: string) => { setCollapsed(true) navigate(path, { state: data }) } diff --git a/src/context/collabStore.ts b/src/context/collabStore.ts index 408a1bca3..584f51f0a 100644 --- a/src/context/collabStore.ts +++ b/src/context/collabStore.ts @@ -40,10 +40,10 @@ export const useCollabStore = create()( .then((response) => { const { data } = response - console.log('response from originations call', data[0]) + console.debug('response from originations call', data[0]) if (data[0]) { - console.log('There is correct data', data[0]) + console.debug('There is correct data', data[0]) // Send the originated contract to the UI via context const { originatedContract } = data[0] @@ -53,7 +53,7 @@ export const useCollabStore = create()( originationOpHash: undefined, }) // save hash - console.log( + console.debug( 'Saved state originatedContract', originatedContract ) @@ -68,7 +68,7 @@ export const useCollabStore = create()( closeModal() }, 2500) } else { - console.log('missing data') + console.error('missing data') // We have got our contract address showModal( @@ -101,7 +101,7 @@ export const useCollabStore = create()( const step = useModalStore.getState().step const handleOp = useUserStore.getState().handleOp - console.log('originateProxy', participantData) + console.debug('originateProxy', participantData) // Clear any existing calls set({ diff --git a/src/context/mintStore.ts b/src/context/mintStore.ts index d54f1a0eb..fc7d16704 100644 --- a/src/context/mintStore.ts +++ b/src/context/mintStore.ts @@ -306,7 +306,7 @@ export const useMintStore = create()( // optional return (state, error) => { if (error) { - console.log('an error happened during hydration', error) + console.error('an error happened during hydration', error) } } }, diff --git a/src/context/userStore.ts b/src/context/userStore.ts index 024c74e78..4da7d3466 100644 --- a/src/context/userStore.ts +++ b/src/context/userStore.ts @@ -199,18 +199,15 @@ export const useUserStore = create()( const current = await wallet.getPKH() if (current) { const info = await getUser(current) - console.log('getting user info', info) set({ address: current, - userInfo: await getUser(current), + userInfo: info, }) } - // console.log(this.state) return current }, unsync: async () => { - // console.log('disconnect wallet') // This will clear the active account and the next "syncTaquito" will trigger a new sync await wallet.client.clearActiveAccount() set({ diff --git a/src/pages/objkt-display/tabs/Swap.jsx b/src/pages/objkt-display/tabs/Swap.jsx index 7683850a7..74bbc67e2 100644 --- a/src/pages/objkt-display/tabs/Swap.jsx +++ b/src/pages/objkt-display/tabs/Swap.jsx @@ -75,15 +75,7 @@ export const Swap = () => { } // swap is valid call API - console.debug( - address, - nft.royalties_total, - parseFloat(price) * 1000000, - id, - nft.artist_address, - parseFloat(amount) - ) - console.log([ + console.debug([ address, nft.royalties_total, parseFloat(price) * 1e6, diff --git a/src/pages/profile/collabs.jsx b/src/pages/profile/collabs.jsx index 39c8cde4a..0eed275d5 100644 --- a/src/pages/profile/collabs.jsx +++ b/src/pages/profile/collabs.jsx @@ -9,7 +9,7 @@ import Checkbox from '@atoms/input/Checkbox' import styles from '@style' export default function Collabs() { - const { /*showFilters,*/ showRestricted, address, overrideProtections } = + const { /*showFilters,*/ showRestricted, user_address, overrideProtections } = useOutletContext() const [hasUnverifiedTokens, setHasUnverifiedTokens] = useState(false) @@ -33,8 +33,8 @@ export default function Collabs() { overrideProtections={overrideProtections} label="Artist's Collabs" namespace="collabs" - swrParams={[address]} - variables={{ address }} + swrParams={[user_address]} + variables={{ address: user_address }} emptyMessage="no collabs" maxItems={null} extractTokensFromResponse={(data) => { diff --git a/src/pages/profile/collections.jsx b/src/pages/profile/collections.jsx index 06e1e18c4..313625c95 100644 --- a/src/pages/profile/collections.jsx +++ b/src/pages/profile/collections.jsx @@ -12,7 +12,7 @@ const FILTER_FOR_SALE = 'FOR_SALE' const FILTER_NOT_FOR_SALE = 'NOT_FOR_SALE' export default function Collections() { - const { showFilters, showRestricted, overrideProtections, address } = + const { showFilters, showRestricted, overrideProtections, user_address } = useOutletContext() const [filter, setFilter] = useState(FILTER_ALL) @@ -36,25 +36,28 @@ export default function Collections() { overrideProtections={overrideProtections} label="Artist's Collection" namespace="collections" - swrParams={[address]} - variables={{ address }} + swrParams={[user_address]} + variables={{ address: user_address }} emptyMessage="no collections" maxItems={null} postProcessTokens={(tokens) => { - if (filter === FILTER_FOR_SALE) { - return tokens.filter( - ({ listing_seller_address }) => listing_seller_address === address - ) - } + switch (filter) { + case FILTER_FOR_SALE: + return tokens.filter( + ({ listing_seller_address }) => + listing_seller_address === user_address + ) - if (filter === FILTER_NOT_FOR_SALE) { - return tokens.filter( - ({ listing_seller_address, artist_address }) => - artist_address !== address && listing_seller_address !== address - ) - } + case FILTER_NOT_FOR_SALE: + return tokens.filter( + ({ listing_seller_address, artist_address }) => + artist_address !== user_address && + listing_seller_address !== user_address + ) - return tokens + default: + return tokens + } }} extractTokensFromResponse={(data, { postProcessTokens }) => { const heldTokens = data.holdings.map(({ token }) => token) diff --git a/src/pages/profile/creations.jsx b/src/pages/profile/creations.jsx index 533bd6cbb..d96b81308 100644 --- a/src/pages/profile/creations.jsx +++ b/src/pages/profile/creations.jsx @@ -7,18 +7,20 @@ import TokenCollection from '@atoms/token-collection' import Filters from './filters' import { useOutletContext } from 'react-router' -import { orderBy } from 'lodash' +import { flatMap, orderBy } from 'lodash' +import { useUserStore } from '@context/userStore' const FILTER_ALL = 'ALL' const FILTER_PRIMARY = 'PRIMARY' const FILTER_SECONDARY = 'SECONDARY' const FILTER_NOT_FOR_SALE = 'NOT_FOR_SALE' +const FILTER_OWNED = 'OWNED' export default function Creations() { - const { showFilters, showRestricted, overrideProtections, address } = + const { showFilters, showRestricted, overrideProtections, user_address } = useOutletContext() + const address = useUserStore((st) => st.address) const [filter, setFilter] = useState(FILTER_ALL) - return ( <> {showFilters && ( @@ -30,6 +32,7 @@ export default function Creations() { { type: FILTER_PRIMARY, label: 'Primary' }, { type: FILTER_SECONDARY, label: 'Secondary' }, { type: FILTER_NOT_FOR_SALE, label: 'Not for sale' }, + { type: FILTER_OWNED, label: 'Owned' }, ]} /> )} @@ -39,11 +42,11 @@ export default function Creations() { overrideProtections={overrideProtections} label="Artist's Creations" namespace="creations" - swrParams={[address]} - variables={{ address }} + swrParams={[user_address]} + variables={{ address: user_address }} emptyMessage="no creations" maxItems={null} - extractTokensFromResponse={(data) => { + extractTokensFromResponse={(data, { postProcessTokens }) => { const tokens = data.artist_tokens const collab_tokens = data.artist_single_collabs .map((collab) => { @@ -56,33 +59,43 @@ export default function Creations() { }) .flat() - return orderBy([...tokens, ...collab_tokens], ['minted_at']) - .reverse() - .map((token) => ({ ...token, key: token.token_id })) + return postProcessTokens( + orderBy([...tokens, ...collab_tokens], ['minted_at']) + .reverse() + .map((token) => ({ ...token, key: token.token_id })) + ) }} postProcessTokens={(tokens) => { - if (filter === FILTER_PRIMARY) { - return tokens.filter( - (token) => - get(token, 'lowest_price_listing.seller_address') === address - ) - } - - if (filter === FILTER_SECONDARY) { - return tokens.filter( - (token) => - get(token, 'lowest_price_listing.seller_address') !== address - ) - } + switch (filter) { + case FILTER_PRIMARY: + return tokens.filter( + (token) => + get(token, 'lowest_price_listing.seller_address') === + user_address + ) + case FILTER_SECONDARY: + return tokens.filter( + (token) => + get(token, 'lowest_price_listing.seller_address') !== + user_address + ) + case FILTER_NOT_FOR_SALE: + return tokens.filter( + (token) => get(token, 'lowest_price_listing') === null + ) - if (filter === FILTER_NOT_FOR_SALE) { - return tokens.filter( - (token) => get(token, 'lowest_price_listing') === null - ) + case FILTER_OWNED: + return tokens.filter((t) => { + const holders = flatMap(t.holdings, 'holder_address') + if (holders.includes(address)) { + return true + } + return false + }) + default: + // all tokens + return tokens } - - // all tokens - return tokens }} query={gql` ${BaseTokenFieldsFragment} @@ -98,6 +111,9 @@ export default function Creations() { ) { ...baseTokenFields lowest_price_listing + holdings(where: {amount: {_gt: 0}}) { + holder_address + } } artist_single_collabs: teia_shareholders( where: { diff --git a/src/pages/profile/filters.jsx b/src/pages/profile/filters.jsx index c2d2e0ee4..1e5964143 100644 --- a/src/pages/profile/filters.jsx +++ b/src/pages/profile/filters.jsx @@ -1,16 +1,16 @@ import { Button } from '@atoms/button' -import { Container } from '@atoms/layout' import styles from '@style' function FilterButton({ type, children, isActive, onClick }) { return (