feat: add placeholder component for faucet calls

lib/remark-plugins.js

@@ -31,6 +31,12 @@ const remarkPlugins = [
         bodyElement: 'span',
         title: 'optional',
       },
+      ['faucet']: {
+        containerElement: 'faucet',
+        titleElement: 'span',
+        bodyElement: 'span',
+        title: 'optional',
+      },
     },
   ],
 ];

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<BoxProps> = React.memo(
+  React.forwardRef(({ children, className, ...rest }, ref) => {
+    const isAlert = className?.includes('alert');
+    return (
+      <Box
+        as="div"
+        display="block"
+        my={space('extra-loose')}
+        className={className}
+        ref={ref as any}
+        {...rest}
+      >
+        <Box
+          border="1px solid"
+          {...{
+            position: 'relative',
+            display: 'grid',
+            placeItems: 'center',
+            gridTemplateColumns: '1fr',
+            alignItems: 'flex-start',
+            border: isAlert ? border() : border(),
+            bg: isAlert ? color('bg') : color('bg-alt'),
+            borderRadius: 'md',
+            boxShadow: isAlert ? 'mid' : 'unset',
+            py: space('base'),
+            px: space('base'),
+          }}
+          css={(theme: Theme) =>
+            css({
+              '& p': {
+                flexGrow: 1,
+                pt: '4px',
+              },
+            })(theme)
+          }
+        >
+          Faucet
+        </Box>
+      </Box>
+    );
+  })
+);

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,
 };

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:
+[@faucet]
-
-```bash
-# replace <stx_address> with `address` property from your keychain
-curl -XPOST "https://stacks-node-api.testnet.stacks.co/extended/v1/faucets/stx?address=<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/)
 
 You need to wait up to a minute for the transaction to complete. Type the following in your terminal to see the balance: