diff --git a/apps/playground/src/components/link/index.tsx b/apps/playground/src/components/link/index.tsx index 562dad10..5480d9c9 100644 --- a/apps/playground/src/components/link/index.tsx +++ b/apps/playground/src/components/link/index.tsx @@ -17,7 +17,7 @@ export default function Link({ return ( diff --git a/apps/playground/src/components/site/footer/sitemap.tsx b/apps/playground/src/components/site/footer/sitemap.tsx index 253b3bd1..7bc20cdf 100644 --- a/apps/playground/src/components/site/footer/sitemap.tsx +++ b/apps/playground/src/components/site/footer/sitemap.tsx @@ -1,10 +1,10 @@ import Link from "~/components/link"; - import { linksAbout } from "~/data/links-about"; import { linksApi } from "~/data/links-api"; import { metaGetStarted } from "~/data/links-get-started"; import { metaGuides } from "~/data/links-guides"; import { metaSmartContract } from "~/data/links-smart-contracts"; +import { metaSolutions } from "~/data/links-solutions"; import { MenuItem } from "~/types/menu-item"; export default function Sitemap() { @@ -12,6 +12,7 @@ export default function Sitemap() {
+
{linksApi.map((api, i) => (
diff --git a/apps/playground/src/components/site/navbar/index.tsx b/apps/playground/src/components/site/navbar/index.tsx index 4a3e9df6..f8f59156 100644 --- a/apps/playground/src/components/site/navbar/index.tsx +++ b/apps/playground/src/components/site/navbar/index.tsx @@ -12,7 +12,7 @@ import SvgMesh from "~/components/svgs/mesh"; import { linksAbout } from "~/data/links-about"; import { linksApi } from "~/data/links-api"; import { linksGetStarted } from "~/data/links-get-started"; -import { linksSmartContracts } from "~/data/links-smart-contracts"; +import { linksSolutions } from "~/data/links-solutions"; import { socials } from "~/data/social"; import { useDarkmode } from "~/hooks/useDarkmode"; import MenuItem from "./menu-item"; @@ -124,11 +124,8 @@ export default function Navbar() { >
    - - + +
diff --git a/apps/playground/src/data/links-get-started.ts b/apps/playground/src/data/links-get-started.ts index ebb1c78d..84e9b92a 100644 --- a/apps/playground/src/data/links-get-started.ts +++ b/apps/playground/src/data/links-get-started.ts @@ -9,11 +9,8 @@ import { metaAiken } from "./links-aiken"; import { metaGuides } from "./links-guides"; import { metaYaci } from "./links-yaci"; -// import { metaFrameworks } from "./links-frameworks"; - export const linksGetStarted: MenuItem[] = [ metaGuides, - // metaFrameworks, { link: `https://github.com/MeshJS/examples`, title: "Examples", @@ -28,18 +25,6 @@ export const linksGetStarted: MenuItem[] = [ }, metaAiken, metaYaci, - // { - // link: `/getting-started/starter-templates`, - // title: "Starter Templates", - // desc: "Kick start your projects with our templates using CLI", - // icon: RocketLaunchIcon, - // }, - // { - // link: `/getting-started/migration-manual-installation`, - // title: "Migration / Manual Installation", - // desc: "Install Mesh into your existing project", - // icon: WrenchScrewdriverIcon, - // }, ]; export const metaGetStarted: MenuItem = { diff --git a/apps/playground/src/data/links-solutions.ts b/apps/playground/src/data/links-solutions.ts new file mode 100644 index 00000000..7813c02c --- /dev/null +++ b/apps/playground/src/data/links-solutions.ts @@ -0,0 +1,28 @@ +import { CloudIcon, FireIcon, UserGroupIcon } from "@heroicons/react/24/solid"; + +import { MenuItem } from "~/types/menu-item"; +import { metaSmartContract } from "./links-smart-contracts"; + +export const linksSolutions: MenuItem[] = [ + metaSmartContract, + { + link: `https://multisig.meshjs.dev/`, + title: "Multisig platform", + desc: "Secure your treasury and participant in Cardano governance as a team with multi-signature", + icon: UserGroupIcon, + }, + { + link: `https://cloud.meshjs.dev/`, + title: "Cloud Services", + desc: "Hosted services for your blockchain applications", + icon: CloudIcon, + }, +]; + +export const metaSolutions: MenuItem = { + title: "Solutions", + desc: "Mesh provides a set of solutions to help you build blockchain applications", + link: "/solutions", + icon: FireIcon, + items: linksSolutions, +}; diff --git a/apps/playground/src/pages/about/about-us/what-working-on.tsx b/apps/playground/src/pages/about/about-us/what-working-on.tsx new file mode 100644 index 00000000..8ae1c793 --- /dev/null +++ b/apps/playground/src/pages/about/about-us/what-working-on.tsx @@ -0,0 +1,21 @@ +import Link from "~/components/link"; +import { AboutSection } from "../"; + +export default function AboutWhatWorkingOn() { + return ( + + Check out our{" "} + + GitHub milestones + {" "} + to see what we are currently working on. + + } + > + <> + + ); +} diff --git a/apps/playground/src/pages/about/index.tsx b/apps/playground/src/pages/about/index.tsx index 7965fca3..9a9577d9 100644 --- a/apps/playground/src/pages/about/index.tsx +++ b/apps/playground/src/pages/about/index.tsx @@ -3,13 +3,15 @@ import AboutIncorporation from "./about-us/incorporation"; // import AboutMeeting from "./about-us/meeting"; import AboutStatus from "./about-us/status"; import AboutTeam from "./about-us/team"; +import AboutWhatWorkingOn from "./about-us/what-working-on"; export default function AboutPage() { return ( <> - {/* */} + {/* */} + @@ -23,7 +25,7 @@ export function AboutSection({ }: { children: React.ReactNode; title: string; - description: string; + description: React.ReactNode; }) { return (
@@ -32,9 +34,9 @@ export function AboutSection({

{title}

-

+

{description} -

+
{children}
diff --git a/apps/playground/src/pages/apis/transaction/minting/asset-metadata.tsx b/apps/playground/src/pages/apis/transaction/minting/asset-metadata.tsx new file mode 100644 index 00000000..77ee3b88 --- /dev/null +++ b/apps/playground/src/pages/apis/transaction/minting/asset-metadata.tsx @@ -0,0 +1,54 @@ +import Link from "~/components/link"; +import TwoColumnsScroll from "~/components/sections/two-columns-scroll"; +import Codeblock from "~/components/text/codeblock"; +import { demoAssetMetadata } from "~/data/cardano"; + +export default function MintingAssetMetadata() { + return ( + + ); +} + +function Left() { + let codeSnippet1 = `const assetMetadata: AssetMetadata = ${JSON.stringify( + demoAssetMetadata, + null, + 2, + )};`; + + let codeSnippet2 = `const assetMetadata: AssetMetadata = ${JSON.stringify( + { + ...demoAssetMetadata, + description: [ + "This NFT was minted by Mesh", + "Learn how you can do it at https://meshjs.dev/", + ], + }, + null, + 2, + )};`; + + return ( + <> +

+ There are many ways to define asset metadata, the best way to find all + is looking at the source code{" "} + + asset-metadata.ts + {" "} + file. +

+

The most common is to define it as a JSON object with description:

+ +

+ For string values that are longer than 64 length, you can break it into + a list of strings: +

+ + + ); +} diff --git a/apps/playground/src/pages/apis/transaction/minting/index.tsx b/apps/playground/src/pages/apis/transaction/minting/index.tsx index 83e51f54..f178d12b 100644 --- a/apps/playground/src/pages/apis/transaction/minting/index.tsx +++ b/apps/playground/src/pages/apis/transaction/minting/index.tsx @@ -6,7 +6,9 @@ import TitleIconDescriptionBody from "~/components/sections/title-icon-descripti import Metatags from "~/components/site/metatags"; import { metaMinting } from "~/data/links-transactions"; import { Intro } from "../common"; +import MintingAssetMetadata from "./asset-metadata"; import BurningOneSignature from "./burning-one-signature"; +import MintingMaskMetadata from "./mask-metadata"; import MintingCip68 from "./minting-cip68"; import MintingNativeScript from "./minting-native-script"; import MintingOneSignature from "./minting-one-signature"; @@ -16,6 +18,7 @@ import MintingRoyaltyToken from "./minting-royalty-token"; const ReactPage: NextPage = () => { const sidebarItems = [ { label: "Mint with One Signature", to: "mintingOneSignature" }, + { label: "Asset Metadata", to: "assetMetadata" }, { label: "Burn asset", to: "burningOneSignature" }, { label: "Mint with Native Script", to: "mintingNativeScript" }, { label: "Mint with Plutus Script", to: "mintingPlutusScript" }, @@ -49,11 +52,13 @@ const ReactPage: NextPage = () => { + + ); diff --git a/apps/playground/src/pages/apis/transaction/minting/mask-metadata.tsx b/apps/playground/src/pages/apis/transaction/minting/mask-metadata.tsx index 5ce240a2..6522bb4c 100644 --- a/apps/playground/src/pages/apis/transaction/minting/mask-metadata.tsx +++ b/apps/playground/src/pages/apis/transaction/minting/mask-metadata.tsx @@ -14,7 +14,7 @@ import TwoColumnsScroll from "~/components/sections/two-columns-scroll"; import Codeblock from "~/components/text/codeblock"; import { demoAddresses, demoAssetMetadata } from "~/data/cardano"; -export default function MintingNativeScript() { +export default function MintingMaskMetadata() { return (

- Additionally, you can define the forging script with{" "} - NativeScript. For example if you want to have a policy - locking script, you can create a new ForgeScript from{" "} - NativeScript: -

- - -

- To get the keyHash, use the{" "} - deserializeAddress(). To get the slot, use the{" "} - resolveSlotNo(). Check out{" "} - Resolvers on how to use these - functions. + Masking metadata is a way to hide the metadata from the transaction + before signing it. This is useful when you want to keep the metadata + private until the transaction is signed. Check the{" "} + Multisig Multing guide for a + end-to-end example.

- Important: if you are using a policy locking script, you must define{" "} - setTimeToExpire before the expiry; otherwise, you will - catch the ScriptWitnessNotValidatingUTXOW error. See{" "} - Transaction - set time. + In the following code snippet, we will see how to mask metadata before + signing the transaction. First we build the minting transaction, check + the other sections for more details.

- +

- Next, we define the metadata for the asset and create the asset object: + After building the transaction, we can save the original metadata to use + it later.

- -

- Finally, we create a transaction and mint the asset with the{" "} - mintAsset method: + Mask the metadata before sending it to the user for signing the + transaction.

- +

The user signs the transaction with the masked metadata.

+

- You can get the policy ID for this Native Script with{" "} - resolveNativeScriptHash: + After the user signs the transaction, we can write the original metadata + back to the transaction. Then we submit the transaction to the network.

- + ); } @@ -149,13 +110,10 @@ function Right() { const forgingScript = ForgeScript.fromNativeScript(nativeScript); - // define asset metadata - const assetMetadata1: AssetMetadata = demoAssetMetadata; - const asset1: Mint = { assetName: "MeshToken", assetQuantity: "1", - metadata: assetMetadata1, + metadata: demoAssetMetadata, label: "721", recipient: address, }; @@ -163,18 +121,28 @@ function Right() { const tx = new Transaction({ initiator: wallet }).setNetwork("preprod"); tx.mintAsset(forgingScript, asset1); tx.setTimeToExpire("99999999"); - const unsignedTx = await tx.build(); - const signedTx = await wallet.signTx(unsignedTx); - const txHash = await wallet.submitTx(signedTx); + + const originalMetadata = Transaction.readMetadata(unsignedTx); + + const maskedTx = Transaction.maskMetadata(unsignedTx); + + const signedTx = await wallet.signTx(maskedTx); + + const signedOriginalTx = Transaction.writeMetadata( + signedTx, + originalMetadata, + ); + + const txHash = await wallet.submitTx(signedOriginalTx); return txHash; } return ( { + return ( + <> + + + + ); +}; + +export default ReactPage; diff --git a/packages/mesh-common/src/types/asset-metadata.ts b/packages/mesh-common/src/types/asset-metadata.ts index 98879c7d..dde2da3f 100644 --- a/packages/mesh-common/src/types/asset-metadata.ts +++ b/packages/mesh-common/src/types/asset-metadata.ts @@ -7,17 +7,6 @@ export type RoyaltiesStandard = { export const royaltiesStandardKeys = ["rate", "address"]; -// export type MetadataStandard = { -// name: string; -// image: `${string}://${string}`; -// mediaType?: `image/${string}`; -// description?: string | string[]; -// instagram?: `https://instagram.com/${string}`; -// twitter?: `https://twitter.com/${string}`; -// discord?: `https://discord.gg/${string}`; -// website?: `https://${string}`; -// metadata?: object; -// }; type MetadataStandard = any; export const metadataStandardKeys = [