Bengriffin1 example sardine

package.json

@@ -1,5 +1,6 @@
 {
   "name": "verify-authorization-function",
+  "main": "src/App.js",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -10,7 +11,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "elliptic": "^6.5.4",
-    "magic-sdk": "^10.1.0",
+    "magic-sdk": "^19.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-scripts": "^3.4.4",

src/App.js

@@ -30,6 +30,9 @@ export default function App() {
   const [verifying, setVerifying] = useState(false);
   const [userMetadata, setUserMetadata] = useState({});
   const [message, setMessage] = useState("");
+  const [nftId, setNftId] = useState("149939964");
+  const [contractAddress, setContractAddress] = useState("0xe269be5ac12bad24");
+
 
   useEffect(() => {
     magic.user.isLoggedIn().then(async (magicIsLoggedIn) => {
@@ -52,6 +55,45 @@ export default function App() {
     setIsLoggedIn(false);
   };
 
+  const purchase = async () => {
+    const res = await magic.nft.purchase({
+      nft: {
+        name: "Test NFT",
+        blockchainNftId: nftId,
+        contractAddress: contractAddress,
+        imageUrl: "https://cdn.shopify.com/s/files/1/0568/1132/3597/files/HWNFT_S4_modular-grid_584x800b.jpg?v=1669157307",
+        network: "flow",
+        platform: "mattel",
+        type: "nft_secondary",
+      },
+      // nft: {
+      //   "blockchainNftId": "167564431",
+      //   "contractAddress": "0xed16a54ede3fe40e",
+      //   "network": "flow",
+      //   "platform": "mattel",
+      //   "type": "nft_secondary",
+      //   "name": "1970 Chevrolet Chevelle SS #4",
+      //   "imageUrl": "https://cdn.shopify.com/s/files/1/0568/1132/3597/files/HWNFT_S4_modular-grid_584x800b.jpg?v=1669157307"
+      // },
+      identityPrefill: {
+        firstName: "john",
+        lastName: "doe",
+        dateOfBirth: "1990-01-01",
+        emailAddress: "[email protected]",
+        // phone: "1 123-456-7890",
+        address: {
+          street1: "123 Main St",
+          street2: "Apt 1",
+          city: "San Francisco",
+          regionCode: "CA",
+          postalCode: "94103",
+          countryCode: "US",
+        },
+      }
+    });
+    console.log(res);
+  };
+
   const verify = async () => {
     try {
 
@@ -122,7 +164,7 @@ export default function App() {
                 <h1>Flow address</h1>
                 <div className="info">{publicAddress}</div>
               </div>
-              <div className="container">
+              {/* <div className="container">
                 <h1>Verify Transaction</h1>
                 {verifying ? (
                     <div className="sending-status">Verifying Transaction</div>
@@ -135,6 +177,13 @@ export default function App() {
                 <button id="btn-deploy" onClick={verify}>
                   Verify
                 </button>
+              </div> */}
+              <div className="container">
+                <h1>NFT ID</h1>
+                <input type="text" id="nftid" value={nftId} onChange={event => setNftId(event.target.value)}/>
+                <h1>Contract Address</h1>
+                <input type="text" id="contractaddress" value={contractAddress} onChange={event => setContractAddress(event.target.value)} />
+                <button onClick={purchase}>Purchase</button>
               </div>
             </div>
       )}