Skip to content

Commit

Permalink
Merge branch 'main' into dandelion
Browse files Browse the repository at this point in the history
  • Loading branch information
jinglescode authored Jan 25, 2023
2 parents 8bc44bd + 433e97f commit ebb9332
Show file tree
Hide file tree
Showing 24 changed files with 673 additions and 107 deletions.
53 changes: 29 additions & 24 deletions packages/demo/components/pages/about/faq.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,10 @@ export default function AboutFaq() {
</ul>
<p>
Like a well-woven fabric, Mesh connects business goals with
technology stacks. It enables developers (<i>resource</i>)
to build applications (<i>product</i>) according to project
requirements (<i>business</i>) on the blockchain (
<i>technology</i>). Mesh is filling the gap by making
product development accessible on Cardano.
technology stacks. It enables developers to build
applications according to project requirements on the
blockchain. Mesh is filling the gap by making product
development accessible on Cardano.
</p>
<p>
Whether you're a new developer, startup, Web3 market leader,
Expand Down Expand Up @@ -148,18 +147,6 @@ export default function AboutFaq() {
</a>{' '}
and tagged it with <code>mesh</code>.
</p>
<p>
If you don't receive an answer, please file{' '}
<a
href="https://github.com/MeshJS/mesh/issues"
target="_blank"
rel="noreferrer"
className="link"
>
an issue
</a>
, and we will help you out.
</p>
<p>
You can also ask questions on{' '}
<a
Expand Down Expand Up @@ -200,13 +187,31 @@ export default function AboutFaq() {
body={
<>
<p>
As Mesh is open source, the people in the Cardano
development community are a part of this journey. We look
forward to more developers and writers joining us to develop
this fantastic tool further. The users of Cardano
applications are also a part of Mesh, as they make it
possible for developers to build, adapt and improve current
and future applications.
As Mesh is an open-source library, this SDK belongs to the
Cardano development community. We look forward to more
developers and writers joining us to develop this fantastic
tool further. The users of Cardano applications are also a
part of Mesh, as they make it possible for developers to
build, adapt and improve current and future applications.
Mesh SDK is started by{' '}
<a
href="https://twitter.com/jinglescode"
rel="noreferrer"
className="link"
target="_blank"
>
Jingles
</a>{' '}
and{' '}
<a
href="https://twitter.com/abdelkrimdev"
rel="noreferrer"
className="link"
target="_blank"
>
Abdelkrim
</a>
.
</p>
</>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function Left({ userInput }) {
ADA Handle
</a>
's address with{' '}
<Link href="/apis/resolvers">Resolvers - fetchHandleAddress</Link>:
<code>fetchHandleAddress()</code>:
</p>
<Codeblock data={code1} isJson={false} />
<p>
Expand Down
12 changes: 9 additions & 3 deletions packages/demo/components/pages/apis/transaction/minting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -208,11 +208,17 @@ function Left({ userInput }) {
</p>
<Codeblock data={codeSnippetNative} isJson={false} />
<p>
You can get the <code>keyHash</code> with{' '}
<code>resolvePaymentKeyHash</code>. As for <code>slot</code>, get it
using <code>resolveSlotNo</code>. See{' '}
To get the <code>keyHash</code>, use the{' '}
<code>resolvePaymentKeyHash()</code>. To get the slot, use the{' '}
<code>resolveSlotNo()</code>. See{' '}
<Link href="/apis/resolvers">Resolvers</Link>.
</p>
<p>
Note: If you were expecting a particular Policy ID but received an
entirely different one, try switching the order
of the objects inside the <code>scripts</code> as the order of the
objects matters and must match the order used before.
</p>
</>
);
}
Expand Down
15 changes: 14 additions & 1 deletion packages/demo/components/pages/home/featureCli.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function FeatureCli() {
<div className="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6 format dark:format-invert">
<div className="mt-4 md:mt-0">
<h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
Get started in minutes
Get Started in Minutes
</h2>
<p className="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Set up entirely new application using the Mesh CLI. Choose from one
Expand All @@ -25,7 +25,20 @@ export default function FeatureCli() {
</Link>
</div>
<Card>
<h3>Starter Templates</h3>
<p>
Kick start your new Web3 project with one of our templates with a
single CLI command.
</p>
<Codeblock data={code1} isJson={false} />
<a
href="http://starter-template.meshjs.dev/"
className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 no-underline"
target="_blank"
rel="noreferrer"
>
Live Demo
</a>
</Card>
</div>
</section>
Expand Down
56 changes: 56 additions & 0 deletions packages/demo/components/pages/home/featureProviders.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<section className="bg-white dark:bg-gray-900">
<div className="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6 format dark:format-invert">
<div className="mt-4 md:mt-0">
<h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
Integrate with Services
</h2>
<p className="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Choose between{' '}
<a href="https://blockfrost.io/" target="_blank" rel="noreferrer">
Blockfrost
</a>
,{' '}
<a href="https://tangocrypto.com/" target="_blank" rel="noreferrer">
Tangocrypto
</a>
, or{' '}
<a href="https://www.koios.rest/" target="_blank" rel="noreferrer">
Koios
</a>{' '}
to access blockchain data. Query{' '}
<a href="https://adahandle.com/" target="_blank" rel="noreferrer">
ADA Handle
</a>{' '}
to get wallet's address. And more to come.
</p>
<Link href="/providers">
<div className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer">
See providers
<ChevronRightIcon className="ml-2 -mr-1 w-5 h-5" />
</div>
</Link>
</div>
<Card>
<h3>Blockchain Data Provider</h3>
<p>
You can import one of the providers, Mesh use it to query for
blockchain data for transaction building.
</p>
<Codeblock data={code1} isJson={false} />
</Card>
</div>
</section>
);
}
10 changes: 7 additions & 3 deletions packages/demo/components/pages/home/featureReact.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,8 @@ export default function FeatureReact() {
React Components
</h2>
<p className="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
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.
</p>
<Link href="/react">
<div className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer">
Expand All @@ -34,6 +33,11 @@ export default function FeatureReact() {
</Link>
</div>
<Card>
<h3>Connect Wallet</h3>
<p>
Import <code>CardanoWallet</code> to allow the user to select a
wallet to connect to your dApp.
</p>
<Codeblock data={code1} isJson={false} />
<CardanoWallet />
</Card>
Expand Down
51 changes: 16 additions & 35 deletions packages/demo/components/pages/home/featureTransaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand All @@ -80,9 +55,9 @@ export default function FeatureTransaction() {
Chainable Transaction Builder
</h2>
<p className="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
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.
</p>
<Link href="/apis/transaction">
<div className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer">
Expand All @@ -92,6 +67,12 @@ export default function FeatureTransaction() {
</Link>
</div>
<Card>
<h3>Transaction API</h3>
<p>
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.
</p>
<Button
onClick={() => setsendLovelace(!sendLovelace)}
style={sendLovelace ? 'success' : 'primary'}
Expand All @@ -116,12 +97,12 @@ export default function FeatureTransaction() {
>
Lock in Smart Contract
</Button>
<Button
{/* <Button
onClick={() => setsetTimeToStart(!setTimeToStart)}
style={setTimeToStart ? 'success' : 'primary'}
>
Set Time to Start
</Button>
</Button> */}
<Button
onClick={() => setsetTimeToExpire(!setTimeToExpire)}
style={setTimeToExpire ? 'success' : 'primary'}
Expand Down
48 changes: 48 additions & 0 deletions packages/demo/components/pages/home/featureWallet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
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 FeatureWallet() {
let code1 = ``;
code1 += `import { AppWallet } from '@meshsdk/core';\n\n`;
code1 += `const wallet = new AppWallet({\n`;
code1 += ` ...\n`;
code1 += ` key: {\n`;
code1 += ` type: 'cli',\n`;
code1 += ` payment: 'CLIGeneratedPaymentCborHexHere',\n`;
code1 += ` stake: 'optionalCLIGeneratedStakeCborHexHere',\n`;
code1 += ` },\n`;
code1 += `});\n`;

return (
<section className="bg-white dark:bg-gray-900">
<div className="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6 format dark:format-invert">
<div className="mt-4 md:mt-0">
<h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
Wallets Integrations
</h2>
<p className="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Mesh's transactions builder is compatible with many wallets;{' '}
<code>cardano-cli</code> generated wallets, seed phrases or private
key, or connect to client's CIP wallets.
</p>
<Link href="/apis/appwallet">
<div className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer">
Learn about wallets
<ChevronRightIcon className="ml-2 -mr-1 w-5 h-5" />
</div>
</Link>
</div>
<Card>
<h3>Import Existing Wallets</h3>
<p>
Import your <code>cardano-cli</code> generated wallets, and use it
to mint your NFT collection on your Web3 website!
</p>
<Codeblock data={code1} isJson={false} />
</Card>
</div>
</section>
);
}
7 changes: 2 additions & 5 deletions packages/demo/components/pages/home/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,11 @@ export default function Hero() {
<div className="grid items-center gap-8 mb-8 lg:gap-12 lg:grid-cols-12">
<div className="col-span-6 text-center sm:mb-6 lg:text-left lg:mb-0">
<h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl xl:text-6xl dark:text-white">
Build your application with ease on Cardano
Build applications on Cardano with ease
</h1>
<p className="max-w-xl mx-auto mb-6 font-light text-gray-500 lg:mx-0 xl:mb-8 md:text-lg xl:text-xl dark:text-gray-400">
Mesh is an open-source library providing numerous tools to easily
build powerful dApps on the Cardano blockchain. Ranging from
wallet interactions to transaction building, it can power
applications with varying levels of complexity, limited only by
your imagination.
build powerful dApps on the Cardano blockchain.
</p>
<Link href="/getting-started">
<div className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer">
Expand Down
4 changes: 4 additions & 0 deletions packages/demo/components/pages/home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import FeatureCli from './featureCli';
import FeatureProviders from './featureProviders';
import FeatureReact from './featureReact';
import FeatureTransaction from './featureTransaction';
import FeatureWallet from './featureWallet';
import Hero from './hero';
import Reasons from './reasons';

Expand All @@ -12,6 +14,8 @@ export default function Home() {
<FeatureReact />
<FeatureTransaction />
<FeatureCli />
<FeatureProviders />
<FeatureWallet />
</>
);
}
Loading

0 comments on commit ebb9332

Please sign in to comment.