forked from FraktalNFT/dapp-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
IPFS Calls from User Wallet FraktalNFT#270
- Loading branch information
1 parent
17c327a
commit d2524a0
Showing
9 changed files
with
304 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}; | ||
}; |
Oops, something went wrong.