From e0c8aa5eacfc4d6c583221d679144a6fbc7a5c20 Mon Sep 17 00:00:00 2001 From: Michael Merz Date: Sat, 2 Dec 2023 17:07:57 -0500 Subject: [PATCH 01/13] wip: small updates. prep for global app state and connection state. --- frontend/index.html | 2 +- frontend/public/allianceIcon.svg | 9 ++++++++ frontend/public/vite.svg | 1 - frontend/src/App.module.scss | 4 ++++ frontend/src/App.tsx | 35 ++++++++++++++++++++------------ frontend/src/config/routes.tsx | 13 +++++++++--- 6 files changed, 46 insertions(+), 18 deletions(-) create mode 100644 frontend/public/allianceIcon.svg delete mode 100644 frontend/public/vite.svg diff --git a/frontend/index.html b/frontend/index.html index 6c8fc34..7519835 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,7 @@ - + Alliance DAO NFT diff --git a/frontend/public/allianceIcon.svg b/frontend/public/allianceIcon.svg new file mode 100644 index 0000000..e2715d8 --- /dev/null +++ b/frontend/public/allianceIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/frontend/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/App.module.scss b/frontend/src/App.module.scss index 4f40459..4717b67 100644 --- a/frontend/src/App.module.scss +++ b/frontend/src/App.module.scss @@ -1,9 +1,13 @@ +html { + background: #DCD7CF; +} .main__container { display: flex; flex-direction: column; height: 100%; min-height: 100vh; + padding-bottom: 16px; background: linear-gradient(180deg, #F1EEE9 0%, #DCD7CF 100%); diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 19bd04f..c490028 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,22 +1,31 @@ -import { useState } from 'react'; -import classNames from 'classnames/bind'; -import Navigation from './components/navigations/Navigation'; -import { useNav } from './config/routes'; -import styles from './App.module.scss'; -import { useLocation } from 'react-router-dom'; +import { useState } from "react" +import classNames from "classnames/bind" +import Navigation from "./components/navigations/Navigation" +import { useNav } from "./config/routes" +import styles from "./App.module.scss" +import { useLocation } from "react-router-dom" -const cx = classNames.bind(styles); +const cx = classNames.bind(styles) function App() { - const { pathname } = useLocation(); + const { pathname } = useLocation() const { element: routes } = useNav() - const [isMobileNavOpen, setMobileNavOpen] = useState(false); + const [isMobileNavOpen, setMobileNavOpen] = useState(false) return ( -
- {(pathname !== "/connect-wallet" && pathname !== "/claim" && pathname !== "/not-eligible") && ( - - )} +
+ {pathname !== "/connect-wallet" && + pathname !== "/claim" && + pathname !== "/not-eligible" && ( + + )} {routes}
) diff --git a/frontend/src/config/routes.tsx b/frontend/src/config/routes.tsx index a34ac55..2d97d5e 100644 --- a/frontend/src/config/routes.tsx +++ b/frontend/src/config/routes.tsx @@ -8,12 +8,17 @@ import { PlanetView, ConnectModalPage, ClaimModalPage, - NotEligibleModalPage + NotEligibleModalPage, } from "../pages" export const useNav = () => { const menu = [ - { path: "/", element: , name: "NFT Gallery", isExternal: false }, + { + path: "/", + element: , + name: "NFT Gallery", + isExternal: false, + }, { path: "/how-it-works", element: , @@ -62,7 +67,8 @@ export const useNav = () => { name: "Claim", isExternal: false, isDynamic: false, - },{ + }, + { path: "/not-eligible", element: , name: "Not Eligible", @@ -72,5 +78,6 @@ export const useNav = () => { { path: "*", element: }, ] + console.log({ routes }) return { menu, element: useRoutes(routes) } } From aa3dd8c8c494264c05de9500fdc8295a7c9b9417 Mon Sep 17 00:00:00 2001 From: Michael Merz Date: Mon, 4 Dec 2023 12:41:33 -0500 Subject: [PATCH 02/13] wip: start adding providers etc --- frontend/src/App.tsx | 16 +++---- .../navigations/desktop/DesktopNav.tsx | 42 +++++++++++-------- frontend/src/config/index.ts | 22 ++++++++++ frontend/src/contexts/AppContext.tsx | 36 ++++++++++++++++ frontend/src/contexts/index.ts | 2 + frontend/src/contexts/useAppContext.ts | 6 +++ frontend/src/main.tsx | 5 ++- 7 files changed, 100 insertions(+), 29 deletions(-) create mode 100644 frontend/src/config/index.ts create mode 100644 frontend/src/contexts/AppContext.tsx create mode 100644 frontend/src/contexts/index.ts create mode 100644 frontend/src/contexts/useAppContext.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c490028..2178cc2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,12 +3,12 @@ import classNames from "classnames/bind" import Navigation from "./components/navigations/Navigation" import { useNav } from "./config/routes" import styles from "./App.module.scss" -import { useLocation } from "react-router-dom" +//import { useLocation } from "react-router-dom" const cx = classNames.bind(styles) function App() { - const { pathname } = useLocation() + //const { pathname } = useLocation() const { element: routes } = useNav() const [isMobileNavOpen, setMobileNavOpen] = useState(false) @@ -18,14 +18,10 @@ function App() { [styles.mobile__nav__open]: isMobileNavOpen, })} > - {pathname !== "/connect-wallet" && - pathname !== "/claim" && - pathname !== "/not-eligible" && ( - - )} + {routes}
) diff --git a/frontend/src/components/navigations/desktop/DesktopNav.tsx b/frontend/src/components/navigations/desktop/DesktopNav.tsx index 738481d..f7e23d8 100644 --- a/frontend/src/components/navigations/desktop/DesktopNav.tsx +++ b/frontend/src/components/navigations/desktop/DesktopNav.tsx @@ -1,19 +1,22 @@ -import classNames from 'classnames/bind'; -import { Link, NavLink, useLocation } from 'react-router-dom'; -import { ReactComponent as Logo } from 'assets/AllianceDAOLogo.svg'; -import { ReactComponent as CheckIcon } from 'assets/check.svg'; -import { useNav } from '../../../config/routes'; -import styles from './DesktopNav.module.scss'; +import classNames from "classnames/bind" +import { Link, NavLink, useLocation } from "react-router-dom" +import { useAppContext } from "contexts" +import { ReactComponent as Logo } from "assets/AllianceDAOLogo.svg" +import { ReactComponent as CheckIcon } from "assets/check.svg" +import { useNav } from "../../../config/routes" +import styles from "./DesktopNav.module.scss" -const cx = classNames.bind(styles); +const cx = classNames.bind(styles) const DesktopNav = () => { - const { pathname } = useLocation(); - const { menu } = useNav(); + const { walletAddress } = useAppContext() + const { pathname } = useLocation() + const { menu } = useNav() return ( - ); -}; + ) +} -export default DesktopNav; +export default DesktopNav diff --git a/frontend/src/config/index.ts b/frontend/src/config/index.ts new file mode 100644 index 0000000..ef2a9dc --- /dev/null +++ b/frontend/src/config/index.ts @@ -0,0 +1,22 @@ +import { AccAddress } from "@terra-money/feather.js" + +type AllianceConfig = { + contracts: AllianceContractConfig +} + +type AllianceContractConfig = { + minter: AccAddress + collection: AccAddress + dao: AccAddress +} + +const testnet: AllianceConfig = { + contracts: { + minter: "terra1sas7np0ze3cwyd26lhhtp5h88fscv8rldezq74zcec8s7lxar0jq2q4u7d", + collection: + "terra18gv7neq9dmzrwz6jdpnu7rwg0t99h70c4xkrn5m7tqe9e9z4nv2qcrp0u5", + dao: "terra1tay6vaymstcg95z4lwpaxujhzsnqylu39hl3328556y5edzsf8ysuzrtnq", + }, +} + +export default testnet diff --git a/frontend/src/contexts/AppContext.tsx b/frontend/src/contexts/AppContext.tsx new file mode 100644 index 0000000..540f0ac --- /dev/null +++ b/frontend/src/contexts/AppContext.tsx @@ -0,0 +1,36 @@ +import { createContext, useState, useEffect, ReactNode } from "react" +import { useWallet, useConnectedWallet } from "@terra-money/wallet-kit" + +interface IAppState { + walletAddress: string | undefined +} + +export const AppContext = createContext({} as IAppState) + +/** + * Holds overall app state and provides update functions through hooks. + * For now transaction, wallet connection, and basic nft info is stored here. + * If app grows in complexity, consider splitting into multiple contexts. + * Depends on: + * - WalletProvider from @terra-money/wallet-kit + */ +const AppStateProvider = ({ children }: { children: ReactNode }) => { + const [walletAddress, setWalletAddress] = useState() + + const wallet = useWallet() + const connectedWallet = useConnectedWallet() + + useEffect(() => { + if (wallet.status === "connected" && connectedWallet) { + setWalletAddress(connectedWallet.addresses[0]) + } + }, [connectedWallet, wallet.status]) + + return ( + + {children} + + ) +} + +export default AppStateProvider diff --git a/frontend/src/contexts/index.ts b/frontend/src/contexts/index.ts new file mode 100644 index 0000000..396fd70 --- /dev/null +++ b/frontend/src/contexts/index.ts @@ -0,0 +1,2 @@ +export { default as AppProvider } from "./AppContext" +export { useAppContext } from "./useAppContext" diff --git a/frontend/src/contexts/useAppContext.ts b/frontend/src/contexts/useAppContext.ts new file mode 100644 index 0000000..17fb235 --- /dev/null +++ b/frontend/src/contexts/useAppContext.ts @@ -0,0 +1,6 @@ +import { useContext } from "react" +import { AppContext } from "./AppContext" + +export const useAppContext = () => { + return useContext(AppContext) +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 0cd1775..5685478 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -2,6 +2,7 @@ import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import { getInitialConfig, WalletProvider } from "@terra-money/wallet-kit" +import { AppProvider } from "contexts/index.ts" import App from "./App.tsx" import "styles/index.scss" @@ -12,7 +13,9 @@ getInitialConfig().then((defaultNetworks) => { - + + + From 4d3cdbae9986c7a2ce7376397f81076ce01ba96f Mon Sep 17 00:00:00 2001 From: Joshua Date: Thu, 7 Dec 2023 09:31:41 -0600 Subject: [PATCH 03/13] updated UI with changes requested. Need to add nft-gallery filters --- frontend/src/components/Connect.module.scss | 3 - frontend/src/components/Connect.tsx | 9 - frontend/src/components/index.ts | 1 - .../navigations/desktop/DesktopNav.tsx | 4 +- .../navigations/mobile/MobileNav.tsx | 4 +- .../planet/PlanetDetails.module.scss | 86 +++++++++ .../src/components/planet/PlanetDetails.tsx | 14 +- frontend/src/components/starmap/index.tsx | 8 +- frontend/src/content/HowItWorks.mdx | 13 +- frontend/src/content/MDX.module.scss | 21 +++ frontend/src/content/TheStory.mdx | 25 ++- frontend/src/pages/TheStory.tsx | 9 - frontend/src/pages/index.ts | 2 +- frontend/src/pages/modal/ClaimModalPage.tsx | 8 +- frontend/src/pages/modal/ConnectModalPage.tsx | 16 +- ...Page.module.scss => ModalPage.module.scss} | 0 .../src/pages/modal/NotEligibleModalPage.tsx | 4 +- frontend/src/pages/story/Tabs.module.scss | 56 ++++++ frontend/src/pages/story/TheStory.module.scss | 172 ++++++++++++++++++ frontend/src/pages/story/TheStory.tsx | 70 +++++++ 20 files changed, 473 insertions(+), 52 deletions(-) delete mode 100644 frontend/src/components/Connect.module.scss delete mode 100644 frontend/src/components/Connect.tsx delete mode 100644 frontend/src/components/index.ts delete mode 100644 frontend/src/pages/TheStory.tsx rename frontend/src/pages/modal/{ConnectModalPage.module.scss => ModalPage.module.scss} (100%) create mode 100644 frontend/src/pages/story/Tabs.module.scss create mode 100644 frontend/src/pages/story/TheStory.module.scss create mode 100644 frontend/src/pages/story/TheStory.tsx diff --git a/frontend/src/components/Connect.module.scss b/frontend/src/components/Connect.module.scss deleted file mode 100644 index 1db5fa8..0000000 --- a/frontend/src/components/Connect.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.connectWrapper { - border: 1px solid red -} \ No newline at end of file diff --git a/frontend/src/components/Connect.tsx b/frontend/src/components/Connect.tsx deleted file mode 100644 index 6863a03..0000000 --- a/frontend/src/components/Connect.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styles from "./Connect.module.scss" - -export const Connect = () => { - return ( -
-

Connect

-
- ) -} diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts deleted file mode 100644 index 72a86e2..0000000 --- a/frontend/src/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Connect } from "./Connect" diff --git a/frontend/src/components/navigations/desktop/DesktopNav.tsx b/frontend/src/components/navigations/desktop/DesktopNav.tsx index 738481d..c2fa7e2 100644 --- a/frontend/src/components/navigations/desktop/DesktopNav.tsx +++ b/frontend/src/components/navigations/desktop/DesktopNav.tsx @@ -13,7 +13,7 @@ const DesktopNav = () => { return ( ); }; diff --git a/frontend/src/components/navigations/mobile/MobileNav.module.scss b/frontend/src/components/navigations/mobile/MobileNav.module.scss index 85eadbb..9c6c86a 100644 --- a/frontend/src/components/navigations/mobile/MobileNav.module.scss +++ b/frontend/src/components/navigations/mobile/MobileNav.module.scss @@ -99,6 +99,40 @@ color: white; font-size: 18px; font-weight: 600; + display: flex; + align-items: center; + gap: 4px; + + svg { + opacity: 0; + fill: white; + } + + &:hover { + text-decoration: none; + cursor: pointer; + + svg { + opacity: 1; + transition: all .2s ease; + } + } + } + } + } + + .bottom { + display: flex; + flex-direction: column; + gap: 32px; + + .socials { + display: flex; + gap: 24px; + align-items: center; + a { + display: flex; + align-items: center; } } } @@ -112,7 +146,7 @@ border-radius: 8px; background: var(--token-light-500); padding: 0px 24px; - margin-top: 48px; + // margin-top: 48px; color: var(--token-dark-500); font-size: 14px; diff --git a/frontend/src/components/navigations/mobile/MobileNav.tsx b/frontend/src/components/navigations/mobile/MobileNav.tsx index 9072a72..70f1a54 100644 --- a/frontend/src/components/navigations/mobile/MobileNav.tsx +++ b/frontend/src/components/navigations/mobile/MobileNav.tsx @@ -4,6 +4,10 @@ import { ReactComponent as Logo } from 'assets/AllianceDAOLogo.svg'; import { ReactComponent as HamburgerIcon } from 'assets/hamburger.svg'; import { ReactComponent as CloseIcon } from 'assets/close.svg'; import { ReactComponent as CheckIcon } from 'assets/check.svg'; +import { ReactComponent as ExternalLinkIcon } from 'assets/ExternalLink.svg'; +import { ReactComponent as TwitterIcon } from 'assets/socials/Twitter.svg'; +import { ReactComponent as MediumIcon } from 'assets/socials/Medium.svg'; +import { ReactComponent as TelegramIcon } from 'assets/socials/Telegram.svg'; import { useNav } from 'config/routes'; import styles from './MobileNav.module.scss'; @@ -16,6 +20,8 @@ const MobileNav = ({ isMobileNavOpen: boolean, setMobileNavOpen: (isMobileNavOpen: boolean) => void }) => { + const socialSize = 20; + const { pathname } = useLocation(); const { menu } = useNav(); @@ -44,7 +50,10 @@ const MobileNav = ({ if (isExternal) { return (
  • - {name} + + {name} + +
    • ) } @@ -57,12 +66,25 @@ const MobileNav = ({ ) })} - - - +
    + + + + +
    ); diff --git a/frontend/src/config/routes.tsx b/frontend/src/config/routes.tsx index 930fe5f..2d60d6b 100644 --- a/frontend/src/config/routes.tsx +++ b/frontend/src/config/routes.tsx @@ -33,7 +33,7 @@ export const useNav = () => { }, { path: "https://dao.enterprise.money/daos", - name: "Alliance DAO Staking", + name: "Staking", isExternal: true, }, ] diff --git a/frontend/src/pages/nft/NFTs.module.scss b/frontend/src/pages/nft/NFTs.module.scss index 6d360d9..b710a41 100644 --- a/frontend/src/pages/nft/NFTs.module.scss +++ b/frontend/src/pages/nft/NFTs.module.scss @@ -1,8 +1,25 @@ .main { display: flex; - gap: 24px; padding: 24px 80px; + .facet__space { + flex: 0 0 0; + } + + &.facet__closed { + .facet__space { + flex: 0 0 0; + transition: flex-basis 0.5s cubic-bezier(0.22, 1, 0.36, 1); + } + } + + &.facet__open { + .facet__space { + flex: 0 0 20%; + transition: flex-basis 0.5s cubic-bezier(0.22, 1, 0.36, 1); + } + } + .main__content { flex: 1 1 0; @@ -12,6 +29,10 @@ gap: 40px; margin-bottom: 32px; + svg { + margin-bottom: 8px; + } + .button { color: #797979; font-size: 18px; diff --git a/frontend/src/pages/nft/NFTs.tsx b/frontend/src/pages/nft/NFTs.tsx index ce5ce97..be170f9 100644 --- a/frontend/src/pages/nft/NFTs.tsx +++ b/frontend/src/pages/nft/NFTs.tsx @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react'; import classNames from 'classnames/bind'; import NFTItem from 'components/nft/NFTItem'; -import styles from './NFTs.module.scss'; -import { mockNFTs, signedInUserData } from 'fakeData/mockNFTs'; -import { Facet } from 'components/filters/facet'; import { filterNFTs } from 'components/filters/helpers'; +import { FilterDropdowns } from 'components/filters/dropdowns'; +import { ReactComponent as FilterIcon } from 'assets/Filter.svg'; +import { mockNFTs, signedInUserData } from 'fakeData/mockNFTs'; +import styles from './NFTs.module.scss'; +import { SearchByID } from 'components/filters/search/SearchByID'; const cx = classNames.bind(styles); @@ -16,7 +18,11 @@ export interface GalleryFiltersProps { } export const NFTsPage = () => { - const [isMyNFTSelected, setIsMyNFTSelected] = useState(false); + const [showFilterRow, setShowFilterRow] = useState(false); + const [searchValue, setSearchValue] = useState(''); + const [searchLoading, setSearchLoading] = useState(false); + + const [activeTab, setActiveTab] = useState('all'); const [galleryFilters, setGalleryFilters] = useState({ planetNumber: null, planetNames: [], @@ -36,26 +42,81 @@ export const NFTsPage = () => { setDisplayedNFTs(filtered); }, [galleryFilters]); + useEffect(() => { + if (!searchValue) { + setSearchLoading(false); + setDisplayedNFTs(mockNFTs); + return; + } + + setSearchLoading(true); + setTimeout(() => { + const filtered = mockNFTs.filter(nft => nft.id.toString() === searchValue); + setDisplayedNFTs(filtered); + setSearchLoading(false); + }, 1000) + + }, [searchValue]); + + const handleSwitch = (tab: string) => { + if (tab === 'all' && activeTab === 'all') { + return; + } else if (tab === 'my' && activeTab === 'my') { + return; + } + + if (tab === 'all') { + setActiveTab('all'); + setShowFilterRow(false); + } else { + setActiveTab('my'); + setShowFilterRow(false); + } + } + return (
    -
    + {activeTab === 'all' && ( + + )}
    - {!isMyNFTSelected ? ( + + {activeTab === 'all' && showFilterRow && ( + <> + + + + )} + + {activeTab === 'all' ? (
    {displayedNFTs.map(nft => ( diff --git a/frontend/src/styles/_reboot.scss b/frontend/src/styles/_reboot.scss index 9116c74..ff88a86 100644 --- a/frontend/src/styles/_reboot.scss +++ b/frontend/src/styles/_reboot.scss @@ -137,7 +137,7 @@ select { input, textarea { - width: 100%; + // width: 100%; } textarea { From 698b3d5ad9501057ac81bbbec1a98c0bcb276bc1 Mon Sep 17 00:00:00 2001 From: Michael Merz Date: Sun, 10 Dec 2023 19:24:25 -0500 Subject: [PATCH 10/13] wip: add user nft query + demosntrate. --- frontend/src/hooks/index.ts | 1 + frontend/src/hooks/useAllianceContracts.tsx | 1 + .../src/hooks/useUserNFTsFromCollection.tsx | 23 +++++++ frontend/src/pages/nft/NFTs.tsx | 67 ++++++++++++++----- 4 files changed, 77 insertions(+), 15 deletions(-) create mode 100644 frontend/src/hooks/useUserNFTsFromCollection.tsx diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts index fc29f6f..d42899e 100644 --- a/frontend/src/hooks/index.ts +++ b/frontend/src/hooks/index.ts @@ -1,4 +1,5 @@ export { default as useAllNftsFromCollection } from "./useAllNFTsFromCollection" export { default as useNFTFromCollection } from "./useNFTFromCollection" +export { default as useUserNFTsFromCollection } from "./useUserNFTsFromCollection" export { default as useNFTFromMinter } from "./useNFTFromMinter" export { default as useAllianceContracts } from "./useAllianceContracts" diff --git a/frontend/src/hooks/useAllianceContracts.tsx b/frontend/src/hooks/useAllianceContracts.tsx index d1c7742..f479f73 100644 --- a/frontend/src/hooks/useAllianceContracts.tsx +++ b/frontend/src/hooks/useAllianceContracts.tsx @@ -5,6 +5,7 @@ import { useAppContext } from "contexts" /** * useAllianceContracts Interface + * requires: useWallet */ interface IUseContracts { mintNFT: () => Promise diff --git a/frontend/src/hooks/useUserNFTsFromCollection.tsx b/frontend/src/hooks/useUserNFTsFromCollection.tsx new file mode 100644 index 0000000..bb65ec1 --- /dev/null +++ b/frontend/src/hooks/useUserNFTsFromCollection.tsx @@ -0,0 +1,23 @@ +import { useQuery } from "@tanstack/react-query" +import { TokensResponse } from "types/AllianceNftCollection" +import { contracts } from "config" +import { useAppContext } from "contexts" + +const useUserNFTsFromCollection = (userAddress: string) => { + const { chainId, lcd } = useAppContext() + + return useQuery({ + queryKey: ["user_nfts", userAddress], + queryFn: () => { + return lcd.wasm + .contractQuery(contracts[chainId].collection, { + tokens: { + owner: userAddress, + }, + }) + .then((res) => res) + }, + }) +} + +export default useUserNFTsFromCollection diff --git a/frontend/src/pages/nft/NFTs.tsx b/frontend/src/pages/nft/NFTs.tsx index 256cab2..2539f9f 100644 --- a/frontend/src/pages/nft/NFTs.tsx +++ b/frontend/src/pages/nft/NFTs.tsx @@ -1,40 +1,77 @@ -import { useState } from 'react'; -import classNames from 'classnames/bind'; -import NFTItem from 'components/nft/NFTItem'; -import styles from './NFTs.module.scss'; -import { mockNFTs, signedInUserData } from 'fakeData/mockNFTs'; +import { useState } from "react" +import classNames from "classnames/bind" +import NFTItem from "components/nft/NFTItem" +import styles from "./NFTs.module.scss" +import { useAllNftsFromCollection, useUserNFTsFromCollection } from "hooks" +import { useAppContext } from "contexts" +import { mockNFTs, signedInUserData } from "fakeData/mockNFTs" -const cx = classNames.bind(styles); +const cx = classNames.bind(styles) + +const UserNFTs = ({ walletAddress }: { walletAddress: string }) => { + const { data: userNfts } = useUserNFTsFromCollection(walletAddress) + console.log( + "user nfts", + userNfts?.tokens.sort((a, b) => { + return parseInt(a) - parseInt(b) + }) + ) + return <> +} export const NFTsPage = () => { - const [isMyNFTSelected, setIsMyNFTSelected] = useState(false); + const { walletAddress } = useAppContext() + const [isMyNFTSelected, setIsMyNFTSelected] = useState(false) + const { data: allNfts } = useAllNftsFromCollection() + + // all nfts - sort them by number value + if (allNfts) { + console.log( + "all nfts", + allNfts.tokens.sort((a, b) => { + return parseInt(a) - parseInt(b) + }) + ) + } return (
    + {walletAddress && }
    {!isMyNFTSelected ? (
    - {mockNFTs.map(nft => ( - + {mockNFTs.map((nft) => ( + ))}
    ) : (
    - {signedInUserData.nftIDs.map(nft => ( + {signedInUserData.nftIDs.map((nft) => ( {
    )}
    - ); -}; + ) +} From bc1e7a4d1f5eb466a82bf1e6400732d0afb3beaf Mon Sep 17 00:00:00 2001 From: Joshua Date: Sun, 10 Dec 2023 18:27:30 -0600 Subject: [PATCH 11/13] fixing build --- frontend/src/components/starmap/index.tsx | 8 +++++++- frontend/src/pages/nft-view/NFTViewMobile.tsx | 3 +-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/starmap/index.tsx b/frontend/src/components/starmap/index.tsx index f7f8da9..3fb7e85 100644 --- a/frontend/src/components/starmap/index.tsx +++ b/frontend/src/components/starmap/index.tsx @@ -2,7 +2,13 @@ import { useState } from 'react'; import { allPlanets, PlanetProps } from 'fakeData/planets'; import styles from './StarMap.module.scss'; -const StarMap = ({ planet, setPlanet }: { planet: string, setPlanet: (planet: PlanetProps) => void }) => { +const StarMap = ({ + planet, + setPlanet +}: { + planet: string, + setPlanet?: (planet: PlanetProps) => void +}) => { const [hoveredPlanet, setHoveredPlanet] = useState(null); const handlePlanetClick = (planetNumber: number) => { diff --git a/frontend/src/pages/nft-view/NFTViewMobile.tsx b/frontend/src/pages/nft-view/NFTViewMobile.tsx index d4eac98..699d87d 100644 --- a/frontend/src/pages/nft-view/NFTViewMobile.tsx +++ b/frontend/src/pages/nft-view/NFTViewMobile.tsx @@ -4,7 +4,6 @@ import styles from './NFTViewMobile.module.scss'; interface NFTViewProps { nft: { id: number; - background_color: string; image: string; biome: string; character: string; @@ -61,7 +60,7 @@ export const NFTViewMobile = ({ nft }: NFTViewProps) => {
    - +
    From 89532b319f096207556c887e90fc5096140b04b7 Mon Sep 17 00:00:00 2001 From: Michael Merz Date: Sun, 10 Dec 2023 19:48:39 -0500 Subject: [PATCH 12/13] wip: log user nfts only if not loading or error. --- frontend/src/pages/nft/NFTs.tsx | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/nft/NFTs.tsx b/frontend/src/pages/nft/NFTs.tsx index 2539f9f..da20123 100644 --- a/frontend/src/pages/nft/NFTs.tsx +++ b/frontend/src/pages/nft/NFTs.tsx @@ -9,13 +9,19 @@ import { mockNFTs, signedInUserData } from "fakeData/mockNFTs" const cx = classNames.bind(styles) const UserNFTs = ({ walletAddress }: { walletAddress: string }) => { - const { data: userNfts } = useUserNFTsFromCollection(walletAddress) - console.log( - "user nfts", - userNfts?.tokens.sort((a, b) => { - return parseInt(a) - parseInt(b) - }) - ) + const { + data: userNfts, + isLoading, + error, + } = useUserNFTsFromCollection(walletAddress) + if (!isLoading && !error) { + console.log( + "user nfts", + userNfts?.tokens.sort((a, b) => { + return parseInt(a) - parseInt(b) + }) + ) + } return <> } From e645cfc2d99ac7fac565fe27b634144110a1eb96 Mon Sep 17 00:00:00 2001 From: Michael Merz Date: Sun, 10 Dec 2023 20:15:29 -0500 Subject: [PATCH 13/13] wip: update claim page --- frontend/src/pages/modal/ClaimModalPage.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/frontend/src/pages/modal/ClaimModalPage.tsx b/frontend/src/pages/modal/ClaimModalPage.tsx index d0e37ad..fe9f91b 100644 --- a/frontend/src/pages/modal/ClaimModalPage.tsx +++ b/frontend/src/pages/modal/ClaimModalPage.tsx @@ -6,7 +6,7 @@ import ConfettiExplosion from "react-confetti-explosion" import { ReactComponent as Logo } from "assets/AllianceDAOLogo.svg" import { ReactComponent as CheckIcon } from "assets/check.svg" import { AnimatedBackground } from "components/background/AnimatedBackground" -import styles from "./ConnectModalPage.module.scss" +import styles from "./ModalPage.module.scss" import { useAllianceContracts, useNFTFromMinter } from "hooks/" import { useAppContext } from "contexts" @@ -105,7 +105,6 @@ export const ClaimModalPage = () => {
    - {/** Wallet Not connected? render connect */} {!walletAddress ? (
    @@ -127,7 +126,6 @@ export const ClaimModalPage = () => {
    ) : claimAvailable ? ( - /** Wallet Connected - Claim available */
    @@ -148,7 +146,6 @@ export const ClaimModalPage = () => {
    ) : ( - /** Wallet Connected - No Claim Available */
    @@ -166,8 +163,6 @@ export const ClaimModalPage = () => {
    )} - - {/** Wallet Connected - Claim success? Confetti! */}
    )