char_chavni

stacks.js

import { useEffect, useState } from "react";
import { AppConfig, UserSession, showConnect, openContractCall } from "@stacks/connect";
import { StacksMocknet, StacksTestnet } from "@stacks/network";
import { uintCV, stringUtf8CV  , AnchorMode, makeStandardSTXPostCondition , FungibleConditionCode} from '@stacks/transactions';
// import { makeContractCall, standardPrincipalCV ,bufferCV, StacksMainnet, StringAsciiCV,  broadcastTransaction, stringUtf8CV, trueCV, uintCV, FungibleConditionCode, makeStandardSTXPostCondition, bufferCVFromString } from '@blockstack/stacks-transactions';
import { standardPrincipalCV } from '@stacks/transactions';


function App() {
  const [message, setMessage] = useState("");
  const [transactionId, setTransactionId] = useState("");
  const [currentMessage, setCurrentMessage] = useState("");
  const [userData, setUserData] = useState(undefined);
  const [address, setAddress]= useState("")

  const appConfig = new AppConfig(["store_write"]);
  const userSession = new UserSession({ appConfig });
  const appDetails = {
    name: "Hello Stacks",
    icon: "https://freesvg.org/img/1541103084.png",
  };

  useEffect(() => {
    if (userSession.isSignInPending()) {
      userSession.handlePendingSignIn().then((userData) => {
        setUserData(userData);
      });
    } else if (userSession.isUserSignedIn()) {
      setUserData(userSession.loadUserData());
    }
  }, []);

  console.log(userData);

  const connectWallet = () => {
    showConnect({
      appDetails,
      onFinish: () => window.location.reload(),
      userSession,
    });
  };

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };
  const handleMS=(e)=>{
    setAddress(e.target.value);
  }

  const submitMessage = async (e) => {
    e.preventDefault()

    const network = new StacksTestnet()

    const options = {
      contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      contractName: 'meow-test-1',
      functionName: 'write-message',
      functionArgs: [
        stringUtf8CV(message),
      ],
      network,
      appDetails,
      onFinish: ({ txId }) => console.log(txId)
    }

    await openContractCall(options)
  };

  const postConditionAddress = 'SP2ZD731ANQZT6J4K3F5N8A40ZXWXC1XFXHVVQFKE';
  const postConditionCode = FungibleConditionCode.GreaterEqual;
  const postConditionAmount = 1n;

  const transferMoney = async (e) => {
    e.preventDefault()

    const network = new StacksTestnet()

    const options = {
      // contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      // contractName: 'meow-test-2',
      // functionName: 'transferSTX',
      // functionArgs: [
      //     uintCV(1),
      //     standardPrincipalCV("ST3SCF43MEBYFBG6P1WXC2F1CK5A188S9JZERDE03")//address
      // ],
      // network,
      // appDetails,
      // postConditionMode: 2,
      // validateWithAbi: true,
      // postConditions: [
      //   makeStandardSTXPostCondition(
      //     postConditionAddress,
      //     postConditionCode,
      //     postConditionAmount
      //   )
      // ],
      // anchorMode: AnchorMode.Any,

      contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      contractName: 'meow-test-5',
      functionName: 'transferSTX',
      functionArgs: [
        uintCV(10000),
        // standardPrincipalCV('ST3SCF43MEBYFBG6P1WXC2F1CK5A188S9JZERDE03')
      ],
      validateWithAbi: true,
      network,
      appDetails,
      anchorMode: AnchorMode.Any,
      postConditionMode: 1,

      onFinish: ({ txId }) => console.log(txId)
    }

    await openContractCall(options)
  };

  // withdraw all the STX from the contract
  const withdrawAllSTX = async (e) => {
    e.preventDefault()

    const network = new StacksTestnet()

    const options = {
      // contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      // contractName: 'meow-test-2',
      // functionName: 'transferSTX',
      // functionArgs: [
      //     uintCV(1),
      //     standardPrincipalCV("ST3SCF43MEBYFBG6P1WXC2F1CK5A188S9JZERDE03")//address
      // ],
      // network,
      // appDetails,
      // postConditionMode: 2,
      // validateWithAbi: true,
      // postConditions: [
      //   makeStandardSTXPostCondition(
      //     postConditionAddress,
      //     postConditionCode,
      //     postConditionAmount
      //   )
      // ],
      // anchorMode: AnchorMode.Any,

      contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      contractName: 'meow-test-5',
      functionName: 'withdrawAllSTX',
      functionArgs: [],
      validateWithAbi: true,
      network,
      appDetails,
      anchorMode: AnchorMode.Any,
      postConditionMode: 1,

      onFinish: ({ txId }) => console.log(txId)
    }

    await openContractCall(options)
  };

  // withdraw some STX rom the contract
  const withdrawSomeSTX = async (e) => {
    e.preventDefault()

    const network = new StacksTestnet()

    const options = {
      contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      contractName: 'meow-test-2',
      functionName: 'transferSTX',
      functionArgs: [
          uintCV(1),
          standardPrincipalCV("ST3SCF43MEBYFBG6P1WXC2F1CK5A188S9JZERDE03")//address
      ],
      network,
      appDetails,
      postConditionMode: 2,
      validateWithAbi: true,
      postConditions: [
        makeStandardSTXPostCondition(
          postConditionAddress,
          postConditionCode,
          postConditionAmount
        )
      ],
      anchorMode: AnchorMode.Any,

      contractAddress: 'ST2CB018JS00KP1GBP24VCGHHTG0AVASNRPCFQ6KD',
      contractName: 'meow-test-5',
      functionName: 'withdrawSTX',
      functionArgs: [
        uintCV(10),
      ],
      validateWithAbi: true,
      network,
      appDetails,
      anchorMode: AnchorMode.Any,
      postConditionMode: 1,

      onFinish: ({ txId }) => console.log(txId)
    }

    await openContractCall(options)
  };



  const handleTransactionChange = (e) => {
    setTransactionId(e.target.value); 
  };

  const retrieveMessage = async () => {
    const retrievedMessage = await fetch('http://localhost:3999/extended/v1/tx/events?' + new URLSearchParams({
        tx_id: transactionId
    }))
    const responseJson = await retrievedMessage.json()
    setCurrentMessage(responseJson.events[0].contract_log.value.repr)
  };

  return (
    <div className="flex flex-col justify-center items-center h-screen gap-8">
      {!userData && (
        <button
          className="p-4 bg-indigo-500 rounded text-white"
          onClick={connectWallet}
        >
          Connect Wallet
        </button>
      )}
      <h1 className="text-6xl font-black">Hello Stacks <img style={{ display: "inline" }} src="https://camo.githubusercontent.com/d3359cb00ab0b5ed8f2e1fe3fceb4fbaf3b614340f8c0db99c17b9f50b351770/68747470733a2f2f656d6f6a69732e736c61636b6d6f6a69732e636f6d2f656d6f6a69732f696d616765732f313533313834393433302f343234362f626c6f622d73756e676c61737365732e6769663f31353331383439343330" ></img></h1>
      {userData && (
        <div className="flex gap-4">
          <input
            className="p-4 border border-indigo-500 rounded"
            placeholder="Write message here..."
            onChange={handleMessageChange}
            value={message}
          />
          <button
            className="p-4 bg-indigo-500 rounded text-white"
            onClick={submitMessage}
          >
            Submit New Message
          </button>
        </div>
      )}
      <div className="flex gap-4">
        <input
          className="p-4 border border-indigo-500 rounded"
          placeholder="Paste transaction ID to look up message"
          onChange={handleTransactionChange}
          value={transactionId}
        />
        <button
          className="p-4 bg-indigo-500 rounded text-white"
          onClick={retrieveMessage}
        >
        Retrieve Message
        </button>
        <input
            className="p-4 border border-indigo-500 rounded"
            placeholder="Enter addres..."
            onChange={handleMS}
            value={address}
          /><button className="p-4 bg-indigo-500 rounded text-white" onClick={transferMoney}> transaction </button>

          {/* button to call the withdraw all function  */}
          <button className="p-4 bg-indigo-500 rounded text-white" onClick={withdrawAllSTX}> withdrawAll </button>

          {/* button to call withdraw function */}
          <button className="p-4 bg-indigo-500 rounded text-white" onClick={withdrawSomeSTX}> withdrawSome </button>
      </div>
      {currentMessage.length > 0 ? (
        <p className="text-2xl">{currentMessage}</p>
      ) : (
        ""
      )}
    </div>
  );
}

export default App;