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

update metadata #338

Merged
merged 6 commits into from
Oct 18, 2024
Merged

update metadata #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
26d7c7f
update metadata
jinglescode Oct 17, 2024
fbebbc3
remove metamask default
jinglescode Oct 17, 2024
77fd5e9
Merge branch 'main' into update-playground-metadata
jinglescode Oct 17, 2024
aa7b973
wip
jinglescode Oct 18, 2024
f7baf17
Merge branch 'main' into update-playground-metadata
jinglescode Oct 18, 2024
db7dad7
fix links
jinglescode Oct 18, 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
13 changes: 12 additions & 1 deletion apps/playground/src/components/layouts/markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import { MDXProvider } from "@mdx-js/react";

import Codeblock from "~/components/text/codeblock";
import Link from "../link";

export default function Markdown({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false);
Expand All @@ -16,7 +17,17 @@ export default function Markdown({ children }: { children: React.ReactNode }) {
components={{
//@ts-ignore
pre: (props) => <Codeblock data={props.children.props.children} />,
h2: (props) => <h2 id={(props.children as string).replace(/[^a-z0-9]/gi, '').toLowerCase()}>{props.children}</h2>,
h2: (props) => (
<h2
id={(props.children as string)
.replace(/[^a-z0-9]/gi, "")
.toLowerCase()}
>
{props.children}
</h2>
),
//@ts-ignore
a: (props) => <Link href={props.href}>{props.children as string}</Link>,
}}
>
{children}
Expand Down
26 changes: 13 additions & 13 deletions apps/playground/src/components/site/metatags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,31 @@ export default function Metatags({
}
if (keywords === undefined) {
keywords =
"developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis";
"developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis, aiken";
}
if (title === undefined) {
title = "Web3 Development Made Easy";
title = "Cardano Web3 TypeScript SDK & off-chain Framework";
}

title = title + " - MeshJS";
title = title + " - Mesh JS";

return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />

<title>{title}</title>

<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta name="keywords" content={keywords} />

<meta property="og:title" content={title} />
<meta property="og:site_name" content={title} />
<meta property="og:type" content="website" />
<meta property="og:description" content={description} />
{image && (
<meta property="og:image" content={`https://meshjs.dev${image}`} />
)}
{image && <meta property="og:image:alt" content={title} />}

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@meshsdk" />
Expand All @@ -45,14 +53,6 @@ export default function Metatags({
)}
{image && <meta name="twitter:image:alt" content={title} />}

<meta property="og:title" content={title} />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Mesh Playground" />
<meta property="og:description" content={description} />
{image && (
<meta property="og:image" content={`https://meshjs.dev${image}`} />
)}

<link
rel="apple-touch-icon"
sizes="180x180"
Expand Down
2 changes: 0 additions & 2 deletions apps/playground/src/components/site/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,6 @@ export default function Navbar() {
<MenuItemDropdown title="SDK" items={linksApi} />
<MenuItemDropdown title="Solutions" items={linksSolutions} />
<MenuItem title="Docs" link="https://docs.meshjs.dev/" />
<MenuItem title="Docs" link="https://docs.meshjs.dev/" />
<MenuItemDropdown title="Solutions" items={linksSolutions} />
<MenuItemDropdown title="About" items={linksAbout} />
</ul>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/playground/src/data/links-providers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ export const metaBlockfrost = {
};

export const metaU5c = {
title: "UTxORPC",
title: "UTxORPC Provider",
link: "/providers/utxorpc",
desc: "Facilitates access to this state in a standardized and efficient manner through gRPC",
desc: "Highly efficient through gRPC, using a compact and high-performance binary format",
thumbnail: "/providers/utxo-rpc.png",
};

Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/apis/transaction/minting/minting-native-script.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ function Left() {
To get the <code>keyHash</code>, use the{" "}
<code>deserializeAddress()</code>. To get the slot, use the{" "}
<code>resolveSlotNo()</code>. Check out{" "}
<Link href="/apis/resolvers">Resolvers</Link> on how to use these
<Link href="/apis/utilities/resolvers">Resolvers</Link> on how to use these
functions.
</p>
<p>
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/apis/transaction/staking/register-stake.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function Left() {
<p>
New address must "register" before they can delegate to stakepools. To
check if a reward address has been register, use{" "}
<Link href="https://meshjs.dev/providers/blockfrost#fetchAccountInfo">
<Link href="/providers/blockfrost#fetchAccountInfo">
blockchainProvider.fetchAccountInfo(rewardAddress)
</Link>
. For example this account information, <code>active</code> shows the
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/apis/wallets/browserwallet/sign-data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function Left() {
<Codeblock data={example} />
<p>
Continue reading this{" "}
<Link href="https://meshjs.dev/guides/prove-wallet-ownership">
<Link href="/guides/prove-wallet-ownership">
guide
</Link>{" "}
to learn how to verify the signature.
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/apis/wallets/meshwallet/sign-data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function Left() {
<Codeblock data={example} />
<p>
Continue reading this{" "}
<Link href="https://meshjs.dev/guides/prove-wallet-ownership">
<Link href="/guides/prove-wallet-ownership">
guide
</Link>{" "}
to learn how to verify the signature.
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/guides/aiken.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ You can read more about this example on the [Aiken website](https://aiken-lang.o

### Create a new project

First, we will create a new project. Please refer to [this guide](https://meshjs.dev/guides/nextjs) for more information on creating a new Next.js project.
First, we will create a new project. Please refer to [this guide](/guides/nextjs) for more information on creating a new Next.js project.

Next, we create a new Aiken project within this project folder:

Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/guides/custom-provider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function MDXPage({ children }) {
);
}

As of writing (Dec 2022), Mesh offers a few options: [Blockfrost](https://blockfrost.io/) or [Koios](https://www.koios.rest/) (see a list of [Providers](https://meshjs.dev/providers)). These blockchain providers allow developers to access the Cardano blockchain and retrieve intricate data. For example, they can be used to query the UTXO of a smart contract and use it as part of a transaction, or to submit a signed transaction to the chain.
As of writing (Dec 2022), Mesh offers a few options: [Blockfrost](https://blockfrost.io/) or [Koios](https://www.koios.rest/) (see a list of [Providers](/providers)). These blockchain providers allow developers to access the Cardano blockchain and retrieve intricate data. For example, they can be used to query the UTXO of a smart contract and use it as part of a transaction, or to submit a signed transaction to the chain.

You can customize a provider to utilize GraphQL, cardano-cli, or websocket with Mesh SDK. Whatever the query method used to obtain the data, it will work perfectly with Mesh SDK so long as the output of the function is compatible with the interface.

Expand Down
12 changes: 6 additions & 6 deletions apps/playground/src/pages/guides/minting-on-nodejs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function MDXPage({ children }) {
);
}

In this guide, we will be minting some assets with **AppWallet** on Node.js.
In this guide, we will be minting some assets with **MeshWallet** on Node.js.

## System setup

Expand Down Expand Up @@ -125,7 +125,7 @@ Lets create a file named **main.ts** and import the packages we need and the fil

```
import {
AppWallet,
MeshWallet,
Transaction,
ForgeScript,
BlockfrostProvider,
Expand Down Expand Up @@ -155,18 +155,18 @@ const blockfrostKey = 'BLOCKFROST_KEY_HERE';

### 5\. Build the minting transaction

In this guide, we are building a minting transaction, but it could be any transactions. [Learn more about Transaction](https://meshjs.dev/apis/transaction).
In this guide, we are building a minting transaction, but it could be any transactions. [Learn more about Transaction](/apis/transaction).

Firstly, we need a blockchain provider, in this guide, we will import **BlockfrostProvider**, but you can use other providers as well:

```
const blockchainProvider = new BlockfrostProvider(blockfrostKey);
```

Next, lets initialize the **AppWallet** and its forging script. In this example, we initialize using CLI generated keys, but you can also load your wallet with private key and mnemonic phrases. [Learn more about AppWallet](https://meshjs.dev/apis/appwallet).
Next, lets initialize the **MeshWallet** and its forging script. In this example, we initialize using CLI generated keys, but you can also load your wallet with private key and mnemonic phrases. [Learn more about MeshWallet](/apis/wallets/meshwallet).

```
const wallet = new AppWallet({
const wallet = new MeshWallet({
networkId: networkId,
fetcher: blockchainProvider,
submitter: blockchainProvider,
Expand All @@ -182,7 +182,7 @@ const walletAddress = wallet.getPaymentAddress();
const forgingScript = ForgeScript.withOneSignature(walletAddress);
```

Then, lets create a new **Transaction**, loop through each recipient, and mint an assets with **mintAsset** ([Learn more about minting transactions](https://meshjs.dev/apis/transaction)):
Then, lets create a new **Transaction**, loop through each recipient, and mint an assets with **mintAsset** ([Learn more about minting transactions](/apis/transaction)):

```
const tx = new Transaction({ initiator: wallet });
Expand Down
6 changes: 3 additions & 3 deletions apps/playground/src/pages/guides/multisig-minting/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function MDXPage({ children }) {
);
}

A multi-signature (multi-sig) transaction requires more than one user to sign a transaction prior to the transaction being broadcast on a blockchain. You can think of it like a husband and wife savings account, where both signatures are required to spend the funds, preventing one spouse from spending the money without the approval of the other. For a multi-sig transaction, you can include 2 or more required signers, these signers can be wallets ([Browser Wallet](https://meshjs.dev/apis/wallets/browserwallet) or [Mesh Wallet](https://meshjs.dev/apis/wallets/meshwallet)) or Plutus script.
A multi-signature (multi-sig) transaction requires more than one user to sign a transaction prior to the transaction being broadcast on a blockchain. You can think of it like a husband and wife savings account, where both signatures are required to spend the funds, preventing one spouse from spending the money without the approval of the other. For a multi-sig transaction, you can include 2 or more required signers, these signers can be wallets ([Browser Wallet](/apis/wallets/browserwallet) or [Mesh Wallet](/apis/wallets/meshwallet)) or Plutus script.

In this guide, we will build a multi-sig transaction for minting. There are 2 wallets involved,

Expand Down Expand Up @@ -77,7 +77,7 @@ In this section, we will build the minting transaction.

In this guide, we won't be showing how to set up RESTful APIs and backend servers. There are thousands of tutorials on YouTube, we recommend building your backend server with [Vercel API](https://vercel.com/docs/rest-api) or [NestJs](https://www.youtube.com/results?search_query=nestjs) or [ExpressJs](https://www.youtube.com/results?search_query=expressjs).

First, we initialize a [blockchain provider](https://meshjs.dev/providers) and [`Mesh Wallet`](https://meshjs.dev/apis/wallets/meshwallet). In this example, we use mnemonic to restore our wallet, but you can initialize a wallet with mnemonic phrases, private keys, and Cardano CLI generated keys.
First, we initialize a [blockchain provider](/providers) and [`Mesh Wallet`](/apis/wallets/meshwallet). In this example, we use mnemonic to restore our wallet, but you can initialize a wallet with mnemonic phrases, private keys, and Cardano CLI generated keys.

```
const blockchainProvider = new BlockfrostProvider(
Expand All @@ -95,7 +95,7 @@ const meshWallet = new MeshWallet({
});
```

Next, let's define the forging script, here we used the first wallet address, but you can also define using `NativeScript`, see [Transaction - Minting assets](https://meshjs.dev/apis/transaction/minting):
Next, let's define the forging script, here we used the first wallet address, but you can also define using `NativeScript`, see [Transaction - Minting assets](/apis/transaction/minting):

```
const meshWalletAddress = meshWallet.getChangeAddress();
Expand Down
8 changes: 5 additions & 3 deletions apps/playground/src/pages/guides/nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ You just saved a few weeks of learning and a number days trying to get started.

React context is an essential tool for building web applications. It allow you to easily share state in your applications, so you can use the data in any component within the app. This means that when the user has connected their wallet, visiting different pages on the app ensure their wallet is still connected.

Open **pages/\_app.tsx**, import and include [**MeshProvider**](https://meshjs.dev/react/getting-started). Your **\_app.tsx** should look similar to this:
Open **pages/\_app.tsx**, import and include [**MeshProvider**](/react/getting-started). Your **\_app.tsx** should look similar to this:

```
import "../styles/globals.css";
Expand All @@ -118,7 +118,7 @@ export default MyApp;

### 2. Add connect wallet component and check wallet's assets

Lets add the [connect wallet component](https://meshjs.dev/react/ui-components) to allow users to connect wallets they have installed on their device. Connecting to wallets will ask the user for permission if not granted, and proceed to connect the selected wallet.
Lets add the [connect wallet component](/react/ui-components) to allow users to connect wallets they have installed on their device. Connecting to wallets will ask the user for permission if not granted, and proceed to connect the selected wallet.

Lastly, we link those components together, allowing users to choose a wallet to connect, and query for assets in the wallet with **wallet.getAssets()**.

Expand Down Expand Up @@ -187,8 +187,10 @@ npm run dev

Visit [http://localhost:3000](http://localhost:3000/) to connect available wallets and view the assets in wallet.

If you do not have any assets in your wallet, you can receive test ADA (tADA) from the [official faucet](https://docs.cardano.org/cardano-testnets/tools/faucet/).

If you are new to Cardano, you will first have to download one of the Cardano wallets. _Tall Nupinks_ has written a detailed [Cardano Wallets 101](https://cutedumborcs.substack.com/p/cardano-wallets-101) guide to help you understand the fundamentals of a Cardano wallet, including its features and how it works. With this guide, you will be able to make an informed decision on the best Cardano wallet for your needs.

### 3. Try on your own

Implement another component to display wallet's address and the amount of lovelace in your Next.js application. Check out the [wallet](https://meshjs.dev/apis/browserwallet) page for more details.
Implement another component to display wallet's address and the amount of lovelace in your Next.js application. Check out the [wallet](/apis/wallets/browserwallet) page for more details.
2 changes: 1 addition & 1 deletion apps/playground/src/pages/guides/smart-contract-transactions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ const datumConstr: Data = {
};
```

For cancel, update and purchase endpoints, we need the UTxO in the script address as inputs to create the transaction. We use **fetchAddressUTxOs()** from one of the [providers](https://meshjs.dev/providers) to query for UTxOs that contain the asset of our interest. Next, we filter the UTxO list by the datum hash, which we can get from the datum with **resolveDataHash()** (see [resolvers](https://meshjs.dev/apis/resolvers)). Here is the implementation for **\_getAssetUtxo()**, to get the UTxO in the script address that consists of the listed asset, and we use the datum hash to filter and get the correct UTxO for the transaction's input:
For cancel, update and purchase endpoints, we need the UTxO in the script address as inputs to create the transaction. We use **fetchAddressUTxOs()** from one of the [providers](/providers) to query for UTxOs that contain the asset of our interest. Next, we filter the UTxO list by the datum hash, which we can get from the datum with **resolveDataHash()** (see [resolvers](/apis/utilities/resolvers)). Here is the implementation for **\_getAssetUtxo()**, to get the UTxO in the script address that consists of the listed asset, and we use the datum hash to filter and get the correct UTxO for the transaction's input:

```
async function _getAssetUtxo({ scriptAddress, asset, datum }) {
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/guides/standalone.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Explanation:

### Run Your Application

In the code, you must replace `YOUR\_KEY\_HERE` with a valid blockfrost key, and replace the mnemonic words with your own. You can visit [Blockfrost](https://blockfrost.io/) to get a free API key, and generate a new mnemonic key from the [Mesh website](https://meshjs.dev/apis/appwallet#generateWallet).
In the code, you must replace `YOUR\_KEY\_HERE` with a valid blockfrost key, and replace the mnemonic words with your own. You can visit [Blockfrost](https://blockfrost.io/) to get a free API key, and generate a new mnemonic key from the [Mesh website](/apis/wallets/meshwallet#generateWallet).

Finally, start your application by running this command:

Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/pages/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function HomePage() {
<div className="flex flex-col gap-4">
<HeroTwoSections
title="Build applications on Cardano with ease"
description="Mesh is an open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain."
description="Mesh is a TypeScript open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain."
link={{ label: "Get started", href: "/getting-started" }}
image={
<div className="col-span-6 hidden lg:block h-96">
Expand Down
9 changes: 7 additions & 2 deletions apps/playground/src/pages/react/ui-components/connect-wallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ function Left() {
<p>
Add this CardanoWallet to allow the user to select a wallet to connect
to your dApp. After the wallet is connected, see{" "}
<Link href="/apis/browserwallet">Browser Wallet</Link> for a list of
<Link href="/apis/wallets/browserwallet">Browser Wallet</Link> for a list of
CIP-30 APIs.
</p>

Expand Down Expand Up @@ -138,6 +138,7 @@ function Right() {
example += ` label={"Connect a Wallet"}\n`;
example += ` isDark={isDark}\n`;
example += ` onConnected={afterConnectedWallet}\n`;
example += ` metamask={{ network: "preprod" }}\n`;
example += ` />\n`;
example += ` </>\n`;
example += ` );\n`;
Expand All @@ -150,7 +151,11 @@ function Right() {
code={example}
childrenAfterCodeFunctions={true}
>
<CardanoWallet label={"Connect a Wallet"} isDark={isDark} />
<CardanoWallet
label={"Connect a Wallet"}
isDark={isDark}
metamask={{ network: "preprod" }}
/>
</LiveCodeDemo>
);
}
2 changes: 1 addition & 1 deletion apps/playground/src/pages/react/wallet-hooks/use-wallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function Left() {
<Codeblock data={code1} />
<p>
<code>wallet</code> is a{" "}
<Link href="/apis/browserwallet">Browser Wallet</Link> instance, which
<Link href="/apis/wallets/browserwallet">Browser Wallet</Link> instance, which
expose all CIP wallets functions from getting assets to signing
tranasction.
</p>
Expand Down
Loading