From 3baed71619bc3873b18d7638c92367ef57633307 Mon Sep 17 00:00:00 2001 From: "Hong Jing (Jingles)" Date: Mon, 26 Dec 2022 17:30:33 +0800 Subject: [PATCH 1/5] add custom provider guide and various UI updates --- .../demo/components/pages/home/featureCli.tsx | 15 +- .../pages/home/featureProviders.tsx | 56 +++ .../components/pages/home/featureReact.tsx | 10 +- .../pages/home/featureTransaction.tsx | 51 +-- .../components/pages/home/featureWallet.tsx | 48 +++ packages/demo/components/pages/home/hero.tsx | 7 +- packages/demo/components/pages/home/index.tsx | 4 + packages/demo/components/site/navbar.tsx | 12 +- .../demo/components/ui/cardTitleDescImage.tsx | 4 +- .../demo/pages/apis/transaction/staking.tsx | 2 +- .../demo/pages/guides/custom-provider.tsx | 378 ++++++++++++++++++ packages/demo/pages/guides/index.tsx | 7 + packages/demo/pages/providers/blockfrost.tsx | 2 +- packages/demo/pages/providers/koios.tsx | 2 +- .../guides/implement-custom-provider.png | Bin 0 -> 85212 bytes .../public/guides/service-g2192fe835_640.jpg | Bin 0 -> 74041 bytes 16 files changed, 543 insertions(+), 55 deletions(-) create mode 100644 packages/demo/components/pages/home/featureProviders.tsx create mode 100644 packages/demo/components/pages/home/featureWallet.tsx create mode 100644 packages/demo/pages/guides/custom-provider.tsx create mode 100644 packages/demo/public/guides/implement-custom-provider.png create mode 100644 packages/demo/public/guides/service-g2192fe835_640.jpg diff --git a/packages/demo/components/pages/home/featureCli.tsx b/packages/demo/components/pages/home/featureCli.tsx index 52441836..1b370381 100644 --- a/packages/demo/components/pages/home/featureCli.tsx +++ b/packages/demo/components/pages/home/featureCli.tsx @@ -11,7 +11,7 @@ export default function FeatureCli() {

- Get started in minutes + Get Started in Minutes

Set up entirely new application using the Mesh CLI. Choose from one @@ -25,7 +25,20 @@ export default function FeatureCli() {

+

Starter Templates

+

+ Kick start your new Web3 project with one of our templates with a + single CLI command. +

+ + Live Demo +
diff --git a/packages/demo/components/pages/home/featureProviders.tsx b/packages/demo/components/pages/home/featureProviders.tsx new file mode 100644 index 00000000..16b51deb --- /dev/null +++ b/packages/demo/components/pages/home/featureProviders.tsx @@ -0,0 +1,56 @@ +import { ChevronRightIcon } from '@heroicons/react/24/solid'; +import Link from 'next/link'; +import Card from '../../ui/card'; +import Codeblock from '../../ui/codeblock'; + +export default function FeatureProviders() { + let code1 = ``; + code1 += `import { KoiosProvider } from '@meshsdk/core';\n\n`; + code1 += `const koios = new KoiosProvider('api');\n`; + code1 += `await koios.fetchAssetAddress('assetunithere');`; + + return ( +
+
+
+

+ Integrate with Services +

+

+ Choose between{' '} + + Blockfrost + + ,{' '} + + Tangocrypto + + , or{' '} + + Koios + {' '} + to access blockchain data. Query{' '} + + ADA Handle + {' '} + to get wallet's address. And more to come. +

+ +
+ See providers + +
+ +
+ +

Blockchain Data Provider

+

+ You can import one of the providers, Mesh use it to query for + blockchain data for transaction building. +

+ + +
+
+ ); +} diff --git a/packages/demo/components/pages/home/featureReact.tsx b/packages/demo/components/pages/home/featureReact.tsx index 0b53f7f8..991bf376 100644 --- a/packages/demo/components/pages/home/featureReact.tsx +++ b/packages/demo/components/pages/home/featureReact.tsx @@ -22,9 +22,8 @@ export default function FeatureReact() { React Components

- Frontend components for wallet connections, and useful React - hooks to getting wallet states - Mesh provides everything you need - to bring your Web3 user interface to life. + Frontend components and useful React hooks, Mesh provides everything + you need to bring your Web3 user interface to life.

@@ -34,6 +33,11 @@ export default function FeatureReact() {
+

Connect Wallet

+

+ Import CardanoWallet to allow the user to select a + wallet to connect to your dApp. +

diff --git a/packages/demo/components/pages/home/featureTransaction.tsx b/packages/demo/components/pages/home/featureTransaction.tsx index 370e9fed..cfedec95 100644 --- a/packages/demo/components/pages/home/featureTransaction.tsx +++ b/packages/demo/components/pages/home/featureTransaction.tsx @@ -17,54 +17,29 @@ export default function FeatureTransaction() { code += `import { Transaction } from '@meshsdk/core';\n\n`; code += `const tx = new Transaction({ initiator: wallet })\n`; if (sendLovelace) { - code += ` // see /apis/transaction/basic\n`; - code += ` .sendLovelace(\n`; - code += ` 'addr_test1vpvx0sac...dh64kv0c7e4cxr',\n`; - code += ` '1000000'\n`; - code += ` )\n`; + code += ` .sendLovelace('addr_a...ab', '1000000')\n`; } if (sendAssets) { - code += ` // see /apis/transaction/basic\n`; - code += ` .sendAssets(\n`; - code += ` 'addr_test1vpvx0sac...dh64kv0c7e4cxr',\n`; - code += ` [\n`; - code += ` {\n`; - code += ` unit: '64af286e2ad0df4de2e7de15f...6f6b656e',\n`; - code += ` quantity: '1',\n`; - code += ` },\n`; - code += ` ]\n`; - code += ` )\n`; + code += ` .sendAssets('addr_b...cd', [{unit: 'asset...ef', quantity: '1'}])\n`; } if (mintAsset) { - code += ` // see /apis/transaction/minting\n`; - code += ` .mintAsset(\n`; - code += ` forgingScript,\n`; - code += ` asset,\n`; - code += ` )\n`; + code += ` .mintAsset(forgingScript, asset)\n`; } if (script) { - code += ` // see /apis/transaction/smart-contract\n`; code += ` .sendAssets(\n`; code += ` {\n`; code += ` address: scriptAddress,\n`; - code += ` datum: {\n`; - code += ` value: 'supersecret',\n`; - code += ` },\n`; + code += ` datum: {value: 'supersecret'},\n`; code += ` },\n`; code += ` [\n`; - code += ` {\n`; - code += ` unit: "64af286e2ad0df4de2e7de15f...6f6b656e",\n`; - code += ` quantity: "1",\n`; - code += ` },\n`; + code += ` {unit: "asset...ef", quantity: "1"},\n`; code += ` ],\n`; code += ` )\n`; } if (setTimeToStart) { - code += ` // see /apis/transaction/basic\n`; code += ` .setTimeToStart(slot)\n`; } if (setTimeToExpire) { - code += ` // see /apis/transaction/basic\n`; code += ` .setTimeToExpire(slot)\n`; } code += `;\n\n`; @@ -80,9 +55,9 @@ export default function FeatureTransaction() { Chainable Transaction Builder

- Mesh enables the creation of complex transactions. You can send ADA - and NFTS to multiple addresses, lock and unlock from smart - contracts, all with a single transaction. + Intuitive APIs to create complex transactions, perform multi-sig + minting, staking ADA to stake pools, and interacting with smart + contracts.

@@ -92,6 +67,12 @@ export default function FeatureTransaction() {
+

Transaction API

+

+ You can send ADA and NFTS to multiple addresses, lock and unlock + from smart contracts, mint assets and stake ADA; all with a single + transaction. +

- + */}