Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update import functionality to directly import nft from the chain, re… #187

Open
wants to merge 11 commits into
base: xp-decentralized-sdk
Choose a base branch
from
Open

update import functionality to directly import nft from the chain, re… #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6edf8e0
update import functionality to directly import nft from the chain, re…
Huzaifa-Saleem Jul 3, 2024
71a9a1e
fix: import button on mobile ui
Huzaifa-Saleem Jul 3, 2024
f9a903f
fix: import 1155 NFT
Huzaifa-Saleem Jul 4, 2024
01f82f7
refactor: Improve importNFTURI function and add support for Elrond chain
Huzaifa-Saleem Jul 9, 2024
93d5506
fix: multiverseX fixes and hedera started
Huzaifa-Saleem Jul 10, 2024
ef2a982
feat: implement hashpack hedera import
Huzaifa-Saleem Jul 11, 2024
60ef084
refactor: Update importNFTModal to use specific importBodies for chains
Huzaifa-Saleem Jul 11, 2024
4e3da1d
Update importNFTUtility to support importing NFTs from Tezos chain
Huzaifa-Saleem Jul 18, 2024
c58d07b
refactor: Update importNFTModal to use specific importBodies for chai…
Huzaifa-Saleem Jul 19, 2024
4b0bb14
feat: add solana import functionality and refactor testnet and mainne…
Huzaifa-Saleem Jul 24, 2024
697ee65
refactor: Update import url for Ton chain
Huzaifa-Saleem Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
93 changes: 51 additions & 42 deletions src/components/Modals/ImportNFTModal/ImportNFTModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,32 @@ import { Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import {
setImportModal,
addImportedNFTtoNFTlist,
setPreloadNFTs,
setNFTList,
} from "../../../store/reducers/generalSlice";

import { validateFunctions } from "../../../services/addressValidators";

import axios from "axios";
import "./importNFTModal.css";
import EVMBody from "./EVMBody";
import EVMBody from "./importBodies/EVMBody";
import { withServices } from "../../App/hocs/withServices";
import {
checkNFTExist,
importNFTURI,
validForm,
} from "../../../utils/importNFTUtility";

export default function ImportNFTModal() {
function ImportNFTModal({ serviceContainer }) {
const dispatch = useDispatch();
const from = useSelector((state) => state.general.from);
const account = useSelector((state) => state.general.account);
const NFTList = useSelector((state) => state.general.NFTList);

const [validContract, setValidContract] = useState(true);
const [contract, setContract] = useState();
const [contractOnBlur, setContractOnBlur] = useState(false);
const [tokenId, setTokenId] = useState();
const [importBlocked, setImportBlocked] = useState(false);
const [error, setError] = useState("");
const validForm = contract?.length === 42 && tokenId;
const chainNonce = from.nonce;

const handleClose = () => {
dispatch(setImportModal(false));
Expand All @@ -36,51 +40,52 @@ export default function ImportNFTModal() {
// setValidContract(true);
// } else setValidContract(false);

if(value.length > 0){
setValidContract(validateFunctions.EVM(value))
}
else{
setValidContract(true)
if (value.length > 0 && from.type === "EVM") {
setValidContract(validateFunctions.EVM(value));
} else if (from.type === "Elrond") {
console.log("Elrond");
setValidContract(validateFunctions.Elrond(value));
} else {
setValidContract(true);
}
};

//" ";
//"http://192.168.129.241:3000/nfts/nftCheck";
/**
*
* IMPORTING TOKEN
*/
const handleImport = async () => {
const baseURL = "https://indexnft.herokuapp.com/nfts/nftCheck";
const _headers = {
Accept: "*",
"Content-Type": "application/json",
// Authorization: `Bearer ${process.env.REACT_APP_BEARER}`,
};
try {
setImportBlocked(true);
setTimeout(() => {
setImportBlocked(false);
}, 10000);
const imported = await axios({
method: "post",
url: baseURL,
headers: _headers,
data: JSON.stringify({
chainNonce,
tokenId,
contract,
address: account,
}),
});
setImportBlocked(false);
if (typeof imported.data === "object") {
dispatch(addImportedNFTtoNFTlist(imported.data));
} else setError(imported.data);

const fromChain = await serviceContainer.bridge.getChain(from.nonce);
const signer = fromChain.signer;

if (checkNFTExist(NFTList, contract, tokenId, from))
throw new Error("NFT already imported!");

const formattedData = await importNFTURI(
contract,
tokenId,
account,
signer,
from
);

dispatch(setPreloadNFTs(NFTList ? NFTList.length + 1 : 1));
dispatch(setNFTList(NFTList ? [...NFTList, formattedData] : [formattedData]));
dispatch(setImportModal(false));
} catch (error) {
setError(error.message);
setImportBlocked(false);
console.error(error);
setError('');

} catch (err) {
console.log(err);
setImportBlocked(false);
setError(err.message || "You don't own this NFT!");
}
};


return (
<div>
<Modal.Header className="border-0">
Expand All @@ -98,7 +103,7 @@ export default function ImportNFTModal() {
setTokenId={setTokenId}
importBlocked={importBlocked}
error={error}
validForm={validForm}
validForm={validForm(from, contract, tokenId)}
// OFF={OFF}
handleClose={handleClose}
handleContractChange={handleContractChange}
Expand All @@ -107,3 +112,7 @@ export default function ImportNFTModal() {
</div>
);
}



export default withServices(ImportNFTModal)
100 changes: 100 additions & 0 deletions src/components/Modals/ImportNFTModal/importBodies/EVMBody.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React from "react";
import { Modal } from "react-bootstrap";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import { importInputs } from "../../../../utils/importNFTUtility";

export default function EVMBody({
error,
tokenId,
handleImport,
handleClose,
validForm,
importBlocked,
validContract,
setTokenId,
setContractOnBlur,
contract,
contractOnBlur,
handleContractChange,
}) {
const from = useSelector((state) => state.general.from);
const OFF = { opacity: 0.6, pointerEvents: "none" };
return (
<Modal.Body className="import-nft__body">
{error && <div className="import-error">{error}</div>}
<div className="import-nft__form">
<form action="" onSubmit={((e)=>{e.preventDefault()})}>
<div>
<label htmlFor="contractAdd">
{importInputs(from).contract.label}
</label>
<input
onBlur={() => setContractOnBlur(true)}
onChange={(e) => {
handleContractChange(e.target.value);
setContractOnBlur(true);
}}
type="text"
id="contractAdd"
name="contractAddress"
placeholder={importInputs(from).contract.placeholder}
value={contract}
className={
validContract
? "contract__input--valid"
: "contract__input--invalid"
}
/>
{contractOnBlur && !validContract && (
<span className={"contract--invalid"}>
Error Contract Address
</span>
)}
</div>
{from.type !== "TON" && from.type !== "Solana" ? (
<div>
<label htmlFor="tokeId">{importInputs(from).tokenId.label}</label>
<input
onChange={(e) => setTokenId(e.target.value)}
type="text"
id="tokedId"
name="tokenId"
placeholder={importInputs(from).tokenId.placeholder}
value={tokenId}
/>
</div>
) : (
""
)}
<div className="import-nft__buttons">
<div
onClick={handleImport}
style={validForm && !importBlocked ? {} : OFF}
className="btn-import"
>
Import
</div>
<div onClick={handleClose} className="btn-cancel">
Cancel
</div>
</div>
</form>
</div>
</Modal.Body>
);
}
EVMBody.propTypes = {
error: PropTypes.string,
tokenId: PropTypes.string,
handleImport: PropTypes.any,
handleClose: PropTypes.any,
validForm: PropTypes.bool,
importBlocked: PropTypes.bool,
validContract: PropTypes.bool,
setTokenId: PropTypes.any,
setContractOnBlur: PropTypes.any,
contract: PropTypes.string,
contractOnBlur: PropTypes.string,
handleContractChange: PropTypes.any,
};
12 changes: 6 additions & 6 deletions ...ponents/Modals/ImportNFTModal/EVMBody.jsx → ...mportNFTModal/importBodies/HederaBody.jsx
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { Modal } from "react-bootstrap";
import PropTypes from "prop-types";

export default function EVMBody({
export default function HederaBody({
error,
tokenId,
handleImport,
Expand All @@ -23,7 +23,7 @@ export default function EVMBody({
<div className="import-nft__form">
<form action="" onSubmit={((e)=>{e.preventDefault()})}>
<div>
<label htmlFor="contractAdd">1. Paste contract address</label>
<label htmlFor="contractAdd">1. Paste Token id</label>
<input
onBlur={() => setContractOnBlur(true)}
onChange={(e) => {
Expand All @@ -33,7 +33,7 @@ export default function EVMBody({
type="text"
id="contractAdd"
name="contractAddress"
placeholder="0x..."
placeholder="0.0.432..."
value={contract}
className={
validContract
Expand All @@ -48,13 +48,13 @@ export default function EVMBody({
)}
</div>
<div>
<label htmlFor="tokeId">2. Paste Toked ID</label>
<label htmlFor="tokeId">2. Paste Serial No.</label>
<input
onChange={(e) => setTokenId(e.target.value)}
type="text"
id="tokedId"
name="tokenId"
placeholder="Enter Token ID"
placeholder="1"
value={tokenId}
/>
</div>
Expand All @@ -75,7 +75,7 @@ export default function EVMBody({
</Modal.Body>
);
}
EVMBody.propTypes = {
HederaBody.propTypes = {
error: PropTypes.string,
tokenId: PropTypes.string,
handleImport: PropTypes.any,
Expand Down
91 changes: 91 additions & 0 deletions src/components/Modals/ImportNFTModal/importBodies/MultiversexBody.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from "react";
import { Modal } from "react-bootstrap";
import PropTypes from "prop-types";

export default function MultiversexBody({
error,
tokenId,
handleImport,
handleClose,
validForm,
importBlocked,
validContract,
setTokenId,
setContractOnBlur,
contract,
contractOnBlur,
handleContractChange,
}) {
const OFF = { opacity: 0.6, pointerEvents: "none" };
return (
<Modal.Body className="import-nft__body">
{error && <div className="import-error">{error}</div>}
<div className="import-nft__form">
<form action="" onSubmit={((e)=>{e.preventDefault()})}>
<div>
<label htmlFor="contractAdd">1. Paste Collection address</label>
<input
onBlur={() => setContractOnBlur(true)}
onChange={(e) => {
handleContractChange(e.target.value);
setContractOnBlur(true);
}}
type="text"
id="contractAdd"
name="contractAddress"
placeholder="NBSE-00x..."
value={contract}
className={
validContract
? "contract__input--valid"
: "contract__input--invalid"
}
/>
{contractOnBlur && !validContract && (
<span className={"contract--invalid"}>
Error Contract Address
</span>
)}
</div>
<div>
<label htmlFor="tokeId">2. Paste Token id</label>
<input
onChange={(e) => setTokenId(e.target.value)}
type="text"
id="tokedId"
name="tokenId"
placeholder="01"
value={tokenId}
/>
</div>
<div className="import-nft__buttons">
<div
onClick={handleImport}
style={validForm && !importBlocked ? {} : OFF}
className="btn-import"
>
Import
</div>
<div onClick={handleClose} className="btn-cancel">
Cancel
</div>
</div>
</form>
</div>
</Modal.Body>
);
}
MultiversexBody.propTypes = {
error: PropTypes.string,
tokenId: PropTypes.string,
handleImport: PropTypes.any,
handleClose: PropTypes.any,
validForm: PropTypes.bool,
importBlocked: PropTypes.bool,
validContract: PropTypes.bool,
setTokenId: PropTypes.any,
setContractOnBlur: PropTypes.any,
contract: PropTypes.string,
contractOnBlur: PropTypes.string,
handleContractChange: PropTypes.any,
};
Loading