From b160bb76b4beec8ec8349cd65481b9f52c3c9be1 Mon Sep 17 00:00:00 2001
From: Jake Urban <10968980+JakeUrban@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:15:46 -0700
Subject: [PATCH] make asset issuance quickstart examples work (#1004)

* make asset issuance quickstart examples work

* formatting

* format unrelated files

---------

Co-authored-by: Bri <92327786+briwylde08@users.noreply.github.com>
---
 docs/build/apps/dapp-frontend.mdx          |  10 +-
 docs/build/guides/dapps/frontend-guide.mdx | 152 ++++++++++++---------
 docs/tokens/quickstart.mdx                 |  39 ++++--
 3 files changed, 121 insertions(+), 80 deletions(-)

diff --git a/docs/build/apps/dapp-frontend.mdx b/docs/build/apps/dapp-frontend.mdx
index a5b6d1de4..6ffd509a0 100644
--- a/docs/build/apps/dapp-frontend.mdx
+++ b/docs/build/apps/dapp-frontend.mdx
@@ -282,22 +282,22 @@ Now let's add a new component to the `src/components` directory called `ConnectW
 </style>
 
 <script>
-  import { kit, setPublicKey } from '../stellar-wallets-kit';
+  import { kit, setPublicKey } from "../stellar-wallets-kit";
 
-  const ellipsis = document.querySelector('#connect-wrap .ellipsis');
-  const button = document.querySelector('[data-connect]');
+  const ellipsis = document.querySelector("#connect-wrap .ellipsis");
+  const button = document.querySelector("[data-connect]");
 
   async function setLoggedIn(publicKey: string) {
     ellipsis.innerHTML = `Signed in as ${publicKey}`;
     ellipsis.title = publicKey;
   }
 
-  button.addEventListener('click', async () => {
+  button.addEventListener("click", async () => {
     button.disabled = true;
 
     try {
       await kit.openModal({
-        onWalletSelected: async option => {
+        onWalletSelected: async (option) => {
           try {
             kit.setWallet(option.id);
             const { address } = await kit.getAddress();
diff --git a/docs/build/guides/dapps/frontend-guide.mdx b/docs/build/guides/dapps/frontend-guide.mdx
index 7a4cf8045..5f34ac1ad 100644
--- a/docs/build/guides/dapps/frontend-guide.mdx
+++ b/docs/build/guides/dapps/frontend-guide.mdx
@@ -108,7 +108,7 @@ In this section, we'll create reusable components for our Stellar dapp and imple
 Let's start by creating a button component that we'll use throughout our application. Create a new file `components/Button.tsx`:
 
 ```typescript
-import React from 'react';
+import React from "react";
 
 interface ButtonProps {
   onClick: () => void;
@@ -117,13 +117,18 @@ interface ButtonProps {
   className?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({ onClick, children, disabled = false, className = '' }) => {
+const Button: React.FC<ButtonProps> = ({
+  onClick,
+  children,
+  disabled = false,
+  className = "",
+}) => {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       className={`px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline ${
-        disabled ? 'opacity-50 cursor-not-allowed' : ''
+        disabled ? "opacity-50 cursor-not-allowed" : ""
       } ${className}`}
     >
       {children}
@@ -140,12 +145,12 @@ Next, let's create another helper button to help connect the Freighter wallet. C
 
 ```typescript
 "use client";
-import React from 'react'
-import { setAllowed } from '@stellar/freighter-api'
+import React from "react";
+import { setAllowed } from "@stellar/freighter-api";
 
 export interface ConnectButtonProps {
-  label: string
-  isHigher?: boolean
+  label: string;
+  isHigher?: boolean;
 }
 
 export function ConnectButton({ label }: ConnectButtonProps) {
@@ -156,7 +161,7 @@ export function ConnectButton({ label }: ConnectButtonProps) {
     >
       {label}
     </button>
-  )
+  );
 }
 ```
 
@@ -167,7 +172,7 @@ This button component uses the `setAllowed` function from the `@stellar/freighte
 Next, let's create a reusable input component. Create a new file `components/Input.tsx`:
 
 ```typescript
-import React from 'react';
+import React from "react";
 
 interface InputProps {
   type: string;
@@ -177,7 +182,13 @@ interface InputProps {
   className?: string;
 }
 
-const Input: React.FC<InputProps> = ({ type, placeholder, value, onChange, className = '' }) => {
+const Input: React.FC<InputProps> = ({
+  type,
+  placeholder,
+  value,
+  onChange,
+  className = "",
+}) => {
   return (
     <input
       type={type}
@@ -216,16 +227,17 @@ const SendPaymentForm: React.FC<SendPaymentFormProps> = ({ onSubmit }) => {
   };
 
   return (
-    <form onSubmit={handleSubmit} className='space-y-4'>
+    <form onSubmit={handleSubmit} className="space-y-4">
       <div>
         <label
-          htmlFor='destination'
-          className='block text-sm font-medium text-gray-700'>
+          htmlFor="destination"
+          className="block text-sm font-medium text-gray-700"
+        >
           Destination Address
         </label>
         <Input
-          type='text'
-          placeholder='GXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
+          type="text"
+          placeholder="GXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
           value={destination}
           required
           onChange={(e) => setDestination(e.target.value)}
@@ -233,19 +245,20 @@ const SendPaymentForm: React.FC<SendPaymentFormProps> = ({ onSubmit }) => {
       </div>
       <div>
         <label
-          htmlFor='amount'
-          className='block text-sm font-medium text-gray-700'>
+          htmlFor="amount"
+          className="block text-sm font-medium text-gray-700"
+        >
           Amount (XLM)
         </label>
         <Input
-          type='number'
-          placeholder='0.0'
+          type="number"
+          placeholder="0.0"
           value={amount}
           required
           onChange={(e) => setAmount(e.target.value)}
         />
       </div>
-      <Button type='submit' disabled={!destination || !amount}>
+      <Button type="submit" disabled={!destination || !amount}>
         Send Payment
       </Button>
     </form>
@@ -266,7 +279,6 @@ import { Inter } from "next/font/google";
 import type { Metadata } from "next";
 import React from "react";
 
-
 export const metadata: Metadata = {
   title: "Stellar Payment DApp",
   description: "Payment DApp built on Stellar",
@@ -278,18 +290,18 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <html lang='en'>
+    <html lang="en">
       <body>
-        <div className='min-h-screen bg-gray-100'>
-          <header className='bg-white shadow'>
-            <div className='max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8'>
-              <h1 className='text-3xl font-bold text-gray-900'>Stellar Dapp</h1>
+        <div className="min-h-screen bg-gray-100">
+          <header className="bg-white shadow">
+            <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+              <h1 className="text-3xl font-bold text-gray-900">Stellar Dapp</h1>
             </div>
           </header>
           <main>
-            <div className='max-w-7xl mx-auto py-6 sm:px-6 lg:px-8'>
-              <div className='px-4 py-6 sm:px-0'>
-                <div className='border-4 border-dashed border-gray-200 rounded-lg h-96'>
+            <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+              <div className="px-4 py-6 sm:px-0">
+                <div className="border-4 border-dashed border-gray-200 rounded-lg h-96">
                   {children}
                 </div>
               </div>
@@ -307,7 +319,7 @@ export default Layout;
 Now, let's update our `app/page.tsx` file to use this layout and our new components:
 
 ```typescript
-"use client"
+"use client";
 
 import React from "react";
 import SendPaymentForm from "../components/SendPaymentForm";
@@ -319,8 +331,8 @@ export default function Home() {
   };
 
   return (
-    <div className='max-w-md mx-auto'>
-      <h2 className='text-2xl font-bold mb-4'>Send Payment</h2>
+    <div className="max-w-md mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Send Payment</h2>
       <SendPaymentForm onSubmit={handleSendPayment} />
     </div>
   );
@@ -446,7 +458,9 @@ export default function Home() {
     }
 
     try {
-      const server = new SorobanRpc.Server("https://soroban-testnet.stellar.org");
+      const server = new SorobanRpc.Server(
+        "https://soroban-testnet.stellar.org",
+      );
       const sourceAccount = await server.getAccount(publicKey);
       const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {
         fee: StellarSdk.BASE_FEE,
@@ -457,7 +471,7 @@ export default function Home() {
             destination: destination,
             asset: StellarSdk.Asset.native(),
             amount: amount,
-          })
+          }),
         )
         .setTimeout(30)
         .build();
@@ -469,8 +483,8 @@ export default function Home() {
       const transactionResult = await server.sendTransaction(
         StellarSdk.TransactionBuilder.fromXDR(
           signedTransaction,
-          StellarSdk.Networks.TESTNET
-        )
+          StellarSdk.Networks.TESTNET,
+        ),
       );
 
       console.log("Transaction successful:", transactionResult);
@@ -482,17 +496,18 @@ export default function Home() {
   };
 
   return (
-    <div className='max-w-md mx-auto'>
-      <h2 className='text-2xl font-bold mb-4'>Send Payment</h2>
+    <div className="max-w-md mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Send Payment</h2>
       {publicKey ? (
         <>
-          <p className='mb-4'>Connected: {publicKey}</p>
+          <p className="mb-4">Connected: {publicKey}</p>
           <SendPaymentForm onSubmit={handleSendPayment} />
         </>
       ) : (
         <button
           onClick={handleConnectWallet}
-          className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'>
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
           Connect Freighter Wallet
         </button>
       )}
@@ -589,13 +604,16 @@ export default function CounterPage() {
 
       const preparedTx = await server.prepareTransaction(tx);
 
-      const signedXdr = await signTransaction(preparedTx.toEnvelope().toXDR("base64"), {
-        networkPassphrase: NETWORK_PASSPHRASE,
-      });
+      const signedXdr = await signTransaction(
+        preparedTx.toEnvelope().toXDR("base64"),
+        {
+          networkPassphrase: NETWORK_PASSPHRASE,
+        },
+      );
 
       const signedTx = TransactionBuilder.fromXDR(
         signedXdr,
-        NETWORK_PASSPHRASE
+        NETWORK_PASSPHRASE,
       ) as Transaction;
 
       const txResult = await server.sendTransaction(signedTx);
@@ -634,7 +652,7 @@ export default function CounterPage() {
     } catch (error) {
       console.error("Error incrementing counter:", error);
       alert(
-        "Error incrementing counter. Please check the console for details."
+        "Error incrementing counter. Please check the console for details.",
       );
     } finally {
       setLoading(false);
@@ -642,38 +660,42 @@ export default function CounterPage() {
   };
 
   return (
-    <div className='max-w-md mx-auto mt-10'>
-      <h1 className='text-2xl font-bold mb-4'>
+    <div className="max-w-md mx-auto mt-10">
+      <h1 className="text-2xl font-bold mb-4">
         Stellar Smart Contract Counter
       </h1>
       {publicKey ? (
         <div>
-          <p className='mb-4'>Connected: {publicKey}</p>
-          <p className='mb-4'>
+          <p className="mb-4">Connected: {publicKey}</p>
+          <p className="mb-4">
             Current Count: {count === null ? "Unknown" : count}
           </p>
           <button
             onClick={handleIncrement}
             disabled={loading}
-            className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50'>
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+          >
             {loading ? (
-              <span className='flex items-center'>
+              <span className="flex items-center">
                 <svg
-                  className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
-                  xmlns='http://www.w3.org/2000/svg'
-                  fill='none'
-                  viewBox='0 0 24 24'>
+                  className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
                   <circle
-                    className='opacity-25'
-                    cx='12'
-                    cy='12'
-                    r='10'
-                    stroke='currentColor'
-                    strokeWidth='4'></circle>
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
                   <path
-                    className='opacity-75'
-                    fill='currentColor'
-                    d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
                 Processing...
               </span>
@@ -685,7 +707,7 @@ export default function CounterPage() {
       ) : (
         <>
           <p>Please connect your Freighter wallet to use this app.</p>
-          <ConnectButton label='Connect Wallet' />
+          <ConnectButton label="Connect Wallet" />
         </>
       )}
     </div>
diff --git a/docs/tokens/quickstart.mdx b/docs/tokens/quickstart.mdx
index 244763dda..39a2cd861 100644
--- a/docs/tokens/quickstart.mdx
+++ b/docs/tokens/quickstart.mdx
@@ -10,7 +10,7 @@ Issue your first asset on the Stellar network in **one, single transaction**!
 <CodeExample>
 
 ```js
-const {
+import {
   Keypair,
   Horizon,
   TransactionBuilder,
@@ -18,14 +18,25 @@ const {
   Operation,
   Asset,
   BASE_FEE,
-} = require("@stellar/stellar-sdk");
+} from "stellar-sdk";
+
+const horizonUrl = "https://horizon-testnet.stellar.org";
+const friendbotUrl = "https://friendbot.stellar.org";
 
-// Don't forget to fund these accounts, somehow. Have you met Friendbot?
-// https://developers.stellar.org/docs/tutorials/create-account#create-account
 const issuerKeypair = Keypair.random();
 const destinationKeypair = Keypair.random();
 
-const server = new Horizon.Server("https://horizon-testnet.stellar.org");
+console.log(
+  `issuer keys:\n${issuerKeypair.publicKey()}\n${issuerKeypair.secret()}\n`,
+);
+console.log(
+  `destination account keys:\n${issuerKeypair.publicKey()}\n${issuerKeypair.secret()}\n`,
+);
+
+await fetch(friendbotUrl + `?addr=${issuerKeypair.publicKey()}`);
+await fetch(friendbotUrl + `?addr=${destinationKeypair.publicKey()}`);
+
+const server = new Horizon.Server(horizonUrl);
 const account = await server.loadAccount(issuerKeypair.publicKey());
 const abcAsset = new Asset("ABC", issuerKeypair.publicKey());
 
@@ -36,7 +47,7 @@ const transaction = new TransactionBuilder(account, {
   .addOperation(
     Operation.changeTrust({
       asset: abcAsset,
-      source: destinationKeypair,
+      source: destinationKeypair.publicKey(),
     }),
   )
   .addOperation(
@@ -51,17 +62,25 @@ const transaction = new TransactionBuilder(account, {
 
 transaction.sign(issuerKeypair, destinationKeypair);
 const res = await server.submitTransaction(transaction);
-console.log(`Transaction response: ${res}`);
+console.log(`transaction hash:\n${res.hash}`);
 ```
 
 ```python
+import requests
 from stellar_sdk import Asset, Keypair, Network, Server, TransactionBuilder
 
-## Don't forget to fund these accounts, somehow. Have you met Friendbot?
-## https://developers.stellar.org/docs/tutorials/create-account#create-account
+horion_url = "https://horizon-testnet.stellar.org"
+friendbot_url = "https://friendbot.stellar.org"
+
 issuer_keypair = Keypair.random()
 destination_keypair = Keypair.random()
 
+print(f"issuer keys:\n{issuer_keypair.public_key}\n{issuer_keypair.secret}\n")
+print(f"issuer keys:\n{destination_keypair.public_key}\n{destination_keypair.secret}\n")
+
+requests.get(f"{friendbot_url}?addr={issuer_keypair.public_key}")
+requests.get(f"{friendbot_url}?addr={destination_keypair.public_key}")
+
 server = Server('https://horizon-testnet.stellar.org')
 account = server.load_account(issuer_keypair.public_key)
 abc_asset = Asset('ABC', issuer_keypair.public_key)
@@ -89,7 +108,7 @@ transaction.sign(issuer_keypair)
 transaction.sign(destination_keypair)
 
 res = server.submit_transaction(transaction)
-print(f"Transaction response: {res}")
+print(f"Transaction hash:\n{res['hash']}")
 ```
 
 </CodeExample>