diff --git a/lib/remark-plugins.js b/lib/remark-plugins.js index cc5c52fc..8a681852 100644 --- a/lib/remark-plugins.js +++ b/lib/remark-plugins.js @@ -31,6 +31,12 @@ const remarkPlugins = [ bodyElement: 'span', title: 'optional', }, + ['faucet']: { + containerElement: 'faucet', + titleElement: 'span', + bodyElement: 'span', + title: 'optional', + }, }, ], ]; diff --git a/src/components/custom-blocks/faucet.tsx b/src/components/custom-blocks/faucet.tsx new file mode 100644 index 00000000..a1ecaa14 --- /dev/null +++ b/src/components/custom-blocks/faucet.tsx @@ -0,0 +1,48 @@ +import { Box, BoxProps, color, space } from '@stacks/ui'; +import React from 'react'; + +import { border } from '@common/utils'; +import { css, Theme } from '@stacks/ui-core'; + +export const Faucet: React.FC = React.memo( + React.forwardRef(({ children, className, ...rest }, ref) => { + const isAlert = className?.includes('alert'); + return ( + + + css({ + '& p': { + flexGrow: 1, + pt: '4px', + }, + })(theme) + } + > + Faucet + + + ); + }) +); diff --git a/src/components/mdx/mdx-components.tsx b/src/components/mdx/mdx-components.tsx index 9a7df972..dd75d694 100644 --- a/src/components/mdx/mdx-components.tsx +++ b/src/components/mdx/mdx-components.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Pre, THead, @@ -24,6 +23,7 @@ import { import { Img } from '@components/mdx/image'; import { Code } from '@components/mdx/components'; import { PageReference } from '@components/custom-blocks/page-reference'; +import { Faucet } from '@components/custom-blocks/faucet'; export const Components = { h1: () => null, @@ -55,4 +55,5 @@ export const Components = { export const MDXComponents = { ...Components, pagereference: PageReference, + faucet: Faucet, }; diff --git a/src/pages/write-smart-contracts/hello-world-tutorial.md b/src/pages/write-smart-contracts/hello-world-tutorial.md index 32ccfc24..1b11f2fe 100644 --- a/src/pages/write-smart-contracts/hello-world-tutorial.md +++ b/src/pages/write-smart-contracts/hello-world-tutorial.md @@ -125,24 +125,7 @@ Review your new Stacks account details by opening up the file `cli_keychain.json Uploading and calling smart contracts requires you to pay network fees to process the transactions. You need to get some testnet tokens, so you can pay the fees in the next steps. -The **STX faucet** is an API endpoint you can call to request testnet tokens for the new account. In the terminal, run the following command: - -```bash -# replace with `address` property from your keychain -curl -XPOST "https://stacks-node-api.testnet.stacks.co/extended/v1/faucets/stx?address=" | json_pp -``` - -The response includes a `txId` property. This is the transaction that transfers funds to your Stacks address. - -```json -{ - "success": true, - "txId": "0xf2f0402f9f4c4d43b382690c4f7b97e24d5ff5dd5c619e3615daa64dca7ef4bc", - "txRaw": "8080000000040016..." -} -``` - --> You can also review the transaction status and details using the [Stacks Explorer](https://explorer.stacks.co/) +[@faucet] You need to wait up to a minute for the transaction to complete. Type the following in your terminal to see the balance: