Skip to content

Commit

Permalink
make asset issuance quickstart examples work (#1004)
Browse files Browse the repository at this point in the history 
* make asset issuance quickstart examples work

* formatting

* format unrelated files

---------

Co-authored-by: Bri <[email protected]>
  • Loading branch information
@JakeUrban @briwylde08
JakeUrban and briwylde08 authored Sep 25, 2024
1 parent 293483d commit b160bb7
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 80 deletions.
10 changes: 5 additions & 5 deletions docs/build/apps/dapp-frontend.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
152 changes: 87 additions & 65 deletions docs/build/guides/dapps/frontend-guide.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}
Expand All @@ -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) {
Expand All @@ -156,7 +161,7 @@ export function ConnectButton({ label }: ConnectButtonProps) {
>
{label}
</button>
)
);
}
```

Expand All @@ -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;
Expand All @@ -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}
Expand Down Expand Up @@ -216,36 +227,38 @@ 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)}
/>
</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>
Expand All @@ -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",
Expand All @@ -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>
Expand All @@ -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";
Expand All @@ -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>
);
Expand Down Expand Up @@ -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,
Expand All @@ -457,7 +471,7 @@ export default function Home() {
destination: destination,
asset: StellarSdk.Asset.native(),
amount: amount,
})
}),
)
.setTimeout(30)
.build();
Expand All @@ -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);
Expand All @@ -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>
)}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -634,46 +652,50 @@ 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);
}
};

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>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit b160bb7

Please sign in to comment.