Skip to content

Commit

Permalink
IPFS Calls from User Wallet FraktalNFT#270
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexSnipes committed Mar 18, 2022
1 parent 17c327a commit d2524a0
Show file tree
Hide file tree
Showing 9 changed files with 304 additions and 208 deletions.
7 changes: 0 additions & 7 deletions components/nft-auction-item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,8 @@ const NFTAuctionItem = forwardRef<HTMLDivElement, NFTItemProps>(
const [isVisible, setIsVisible] = useState(false);
const [timerOpacity, setTimerOpacity] = useState(0);
const [isImageLoaded, setIsImageLoaded] = useState(false);
const { fraktions } = useUserContext();
const [ended, setEnded] = useState(false);

// const canList = item && !! (fraktions || []).find(fraktion => fraktion.id === item.id);

// useEffect(() => {
// setIsImageLoaded(false);
// }, []);

const onImageLoad = (ms: number) => {
setTimeout(() => {
setIsImageLoaded(true);
Expand Down
17 changes: 8 additions & 9 deletions components/nft-item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { connect } from 'react-redux';
import { useLoadingScreenHandler } from 'hooks/useLoadingScreen';
import store from "../../redux/store";
import {MY_NFTS} from "@/constants/routes";
import {useWalletContext} from "@/contexts/WalletAssets";

interface NFTItemProps extends StackProps {
item: FrakCard;
Expand All @@ -53,6 +54,8 @@ interface NFTItemProps extends StackProps {
CTAText?: string;
wait?: number;
height?: string;
canFrak?: any;
canList?: any;
}

const NFTItem = forwardRef<HTMLDivElement, NFTItemProps>(
Expand All @@ -67,22 +70,18 @@ const NFTItem = forwardRef<HTMLDivElement, NFTItemProps>(
CTAText,
wait,
height = '35rem',
canFrak = () => {},
canList = () => {},
},
ref
) => {
const router = useRouter();
const [isVisible, setIsVisible] = useState(false);
const [isImageLoaded, setIsImageLoaded] = useState(false);
const [isListed, setIsListed] = useState(false);
const { fraktions, fraktals } = useUserContext();
const { account, provider, marketAddress, factoryAddress } = useWeb3Context();
const { closeLoadingModalAfterDelay } = useLoadingScreenHandler()

const canFrak =
item && !!(fraktals || []).find((fraktion) => fraktion.id === item.id);
const canList =
item && !!(fraktions || []).find((fraktion) => fraktion.id === item.id);

useEffect(() => {
if (item) {
getListingAmount(account, item.id, provider, marketAddress).then(
Expand Down Expand Up @@ -256,7 +255,7 @@ const NFTItem = forwardRef<HTMLDivElement, NFTItemProps>(
)}
</Flex>

{canFrak && item.collateral && (
{canFrak(item) && item.collateral && (
<Box textAlign="center" marginTop={5}>
<NextLink href={`nft/${item.id}/details?frak=1`}>
<FrakButton size="sm">Frak it</FrakButton>
Expand All @@ -265,7 +264,7 @@ const NFTItem = forwardRef<HTMLDivElement, NFTItemProps>(
</Box>
)}

{canList && isListed && (
{canList(item) && isListed && (
<Box textAlign="center" marginTop={5}>
<NextLink href={'my-nfts'} scroll={false}>
<FrakButton size="sm" onClick={unList}>
Expand All @@ -274,7 +273,7 @@ const NFTItem = forwardRef<HTMLDivElement, NFTItemProps>(
</NextLink>
</Box>
)}
{canList && !isListed && (
{canList(item) && !isListed && (
<Box textAlign="center" marginTop={5}>
<NextLink href={`nft/${item.marketId}/list-item`}>
<FrakButton size="sm">Sell Fraktions</FrakButton>
Expand Down
214 changes: 214 additions & 0 deletions contexts/WalletAssets.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
/**
* React
*/
import {
createContext,
useCallback,
useContext,
useEffect,
useState,
} from "react";
/**
* Utils
*/
import { useWeb3Context } from "./Web3Context";
import { assetsInWallet } from "@/utils/openSeaAPI";
import { getSubgraphData } from "@/utils/graphQueries";
/**
* Helpers
*/
import {
createObject,
createObject2,
createOpenSeaObject,
} from "@/utils/nftHelpers";

type UserContextType = {
fraktals: null | any[];
fraktions: null | any[];
nfts: null | any[];
balance: number;
};

export const WalletContext = createContext(null);

export const WalletContextProviderFC = ({ children }) => {

const [fraktals, setFraktals] = useState(null);
const [fraktions, setFraktions] = useState(null);
const [nfts, setNFTs] = useState(null);
const [walletAssets, setWalletAssets] = useState(null);
const [balance, setBalance] = useState(null);
const [loading, setLoading] = useState<boolean>(false);
const { account } = useWeb3Context();

useEffect(() => {
if (account) {
fetchNFTs();
}
}, [account]);

useEffect(() => {
if (window && fraktals?.length > 0) {
const mintingNFTsString = window?.localStorage.getItem('mintingNFTs');
fraktals?.forEach((fraktal) => {
if (fraktal?.id === mintingNFTsString) {
window?.localStorage.removeItem('mintingNFTs');
}
});
}
}, [fraktals]);

const fetchNFTs = useCallback(
// if user not in subgraph, fails to complete and show other nfts !!
async () => {
try {
//TODO - REMOVE THIS
setLoading(true);
let totalNFTs = [];
let nftsERC721_wallet;
let nftsERC1155_wallet;
let fraktionsObjects;
let fraktionsObjectsClean;
let userBalanceFormatted;
let fraktalsClean: null | any[];
let totalAddresses: null | string[];
let nftObjectsClean;

let openseaAssets = await assetsInWallet(account, {
limit: 60,
offset: 0
});

setWalletAssets(openseaAssets.assets);
let fobjects = await getSubgraphData(
"wallet",
account.toLocaleLowerCase()
);

if (fobjects && fobjects.users.length) {
// balance retrieval
let userBalance = fobjects.users[0].balance;
userBalanceFormatted = parseFloat(userBalance) / 10 ** 18;
// Fraktions retrieval
let validFraktions = fobjects.users[0].fraktions.filter(x => {
return x != null;
});

fraktionsObjects = await Promise.all(
validFraktions.map(x => {
return createObject(x);
})
);

if (fraktionsObjects) {
fraktionsObjectsClean = fraktionsObjects.filter(x => {
return x != null;
});
}
// Fraktals retrieval
let userFraktalsFetched = fobjects.users[0].fraktals;

let userFraktalObjects = await Promise.all(
userFraktalsFetched.map(x => {
return createObject2(x);
})
);

if (userFraktalObjects) {
fraktalsClean = userFraktalObjects.filter(x => {
return x != null && x.imageURL.length;
});
}

let userFraktalAddresses = fraktalsClean.map(x => {
return x.id;
});

let userFraktionsAddreses = fraktionsObjectsClean.map(x => {
return x.id;
});

totalAddresses = userFraktalAddresses.concat(userFraktionsAddreses);
}

if (
openseaAssets &&
openseaAssets.assets &&
openseaAssets.assets.length
) {
nftsERC721_wallet = openseaAssets.assets.filter(x => {
return x.asset_contract.schema_name == "ERC721";
});

if (nftsERC721_wallet && nftsERC721_wallet.length) {
totalNFTs = totalNFTs.concat(nftsERC721_wallet);
}
nftsERC1155_wallet = openseaAssets.assets.filter(x => {
return x.asset_contract.schema_name == "ERC1155";
});

totalNFTs = nftsERC721_wallet.concat(nftsERC1155_wallet);
if (!fobjects || !fobjects.users[0] || !fobjects.users[0].fraktals) {
totalAddresses = [];
}

// NFTs filtering
let nftsFiltered = totalNFTs.map(x => {
if (!totalAddresses.includes(x.asset_contract.address)) {
return x;
}
});

let nftObjects = await Promise.all(
nftsFiltered.map(x => {
return createOpenSeaObject(x);
})
);

if (nftObjects) {
nftObjectsClean = nftObjects.filter(x => {
return x != null && x.imageURL.length;
});
} else {
nftObjectsClean = nftObjects;
}

setFraktals(fraktalsClean);
setFraktions(fraktionsObjectsClean);
setNFTs(nftObjectsClean);
setBalance(userBalanceFormatted);
}
//TODO: detect account and states change > refresh
} catch (err) {
console.error(err.message);
} finally {
setLoading(false);
}
},
[account]
);

return (
<WalletContext.Provider
value={{ fraktals, fraktions, nfts, balance, loading, fetchNFTs, walletAssets }}
>
{children}
</WalletContext.Provider>
);
};

export const useWalletContext = () => {
const { fraktals, fraktions, nfts, balance, loading, fetchNFTs, walletAssets } = useContext(
WalletContext
);
return {
fraktals,
fraktions,
nfts,
balance,
loading,
fetchNFTs,
walletAssets
};
};
Loading

0 comments on commit d2524a0

Please sign in to comment.