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

Jump to bottom

make asset issuance quickstart examples work #1004

Merged
merged 3 commits into from
Sep 25, 2024
Merged

make asset issuance quickstart examples work #1004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
775e1a1
make asset issuance quickstart examples work
JakeUrban Sep 25, 2024
418efb0
formatting
briwylde08 Sep 25, 2024
fb8c3e0
format unrelated files
JakeUrban Sep 25, 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
10 changes: 5 additions & 5 deletions docs/build/apps/dapp-frontend.mdx
View file
Open in desktop
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
Open in desktop
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