chore: playground improvements

playground/src/components/common/FnParameter.tsx

@@ -65,6 +65,34 @@ export function FunctionParameter({ parameter, required, onParameterChange }: Fu
     }
   };
 
+  function getParameterType(type: AbiType) {
+    switch (type.kind) {
+      case 'field':
+        return 'number';
+      case 'integer':
+        return 'number';
+      case 'string':
+        return 'text';
+      default:
+        return 'text';
+    }
+  }
+
+  function getParameterLabel(type: AbiType) {
+    switch (type.kind) {
+      case 'field':
+        return 'number';
+      case 'integer':
+        return 'int';
+      case 'string':
+        return 'string';
+      case 'boolean':
+        return 'bool';
+      default:
+        return '';
+    }
+  }
+
   return (
     <div css={container}>
       {isAddressStruct(parameter.type) && !manualInput ? (
@@ -112,8 +140,8 @@ export function FunctionParameter({ parameter, required, onParameterChange }: Fu
           variant="outlined"
           disabled={['array', 'struct', 'tuple'].includes(parameter.type.kind) && !isAddressStruct(parameter.type)}
           key={parameter.name}
-          type="text"
-          label={capitalize(parameter.name)}
+          type={getParameterType(parameter.type)}
+          label={`${capitalize(parameter.name)}  (${getParameterLabel(parameter.type)})`}
           onChange={e => handleParameterChange(e.target.value, parameter.type)}
         />
       )}

playground/src/components/common/LoadingModal.tsx

@@ -165,11 +165,15 @@ const funFacts = [
   'The Aztec protocol was founded in 2017',
   "We're almost there...",
   'Aztec Connect was the first private DeFi application',
-  'Aztec invented PLONK which is really cool',
+  'Aztec invented PLONK which is really cool and underpins all modern zkVMs',
   'Aztec supports private, public, and hybrid smart contract execution',
-  'Aztec enables privacy and full composability',
+  'Aztec enables privacy and full composability across private and public calls',
+  'All transactions on Aztec start off private (since all accounts and transaction entrypoints are private)',
+  'Aztec is the first L2 to launch a decentralized testnet on day 1',
+  'While you wait for this proof, check out somethinghappened.wtf',
 ];
 
+
 export function LoadingModal() {
   const { currentTx, setCurrentTx, logs } = useContext(AztecContext);
   const [currentFunFact, setCurrentFunFact] = useState(0);

playground/src/components/contract/Contract.tsx

@@ -19,10 +19,15 @@ import { formatFrAsString } from '../../utils/conversion';
 import { CreateContractDialog } from './components/CreateContractDialog';
 import ClearIcon from '@mui/icons-material/Clear';
 import { CopyToClipboardButton } from '../common/CopyToClipboardButton';
+
 import { ContractUpload } from './components/ContractUpload';
 import { ContractFilter } from './components/ContractFilter';
 import { FunctionCard } from './components/FunctionCard';
 import { useTransaction } from '../../hooks/useTransaction';
+import { ContractDescriptions, ContractDocumentationLinks, ContractMethodOrder } from '../../utils/constants';
+import Box from '@mui/material/Box';
+import CardContent from '@mui/material/CardContent';
+import Card from '@mui/material/Card';
 
 const container = css({
   display: 'flex',
@@ -55,15 +60,39 @@ const headerContainer = css({
 
 const header = css({
   display: 'flex',
+  flexDirection: 'column',
   width: '100%',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+});
+
+const titleContainer = css({
+  display: 'flex',
+  flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+  width: '100%',
+  marginBottom: '1rem',
 });
 
 const contractActions = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
+  minWidth: '150px',
+});
+
+const deployButton = css({
+  background: '#8C7EFF',
+  height: '30px',
+  fontSize: '14px',
+  fontWeight: 600,
+  padding: '20px 16px',
+  borderRadius: '6px',
+  '@media (max-width: 900px)': {
+    padding: '4px',
+    height: 'auto',
+  },
 });
 
 const loadingArtifactContainer = css({
@@ -137,6 +166,12 @@ export function ContractComponent() {
     }
   }, [currentContractArtifact, currentContractAddress, wallet]);
 
+  useEffect(() => {
+    if (!currentContractAddress) {
+      setOpenCreateContractDialog(true);
+    }
+  }, [currentContractAddress]);
+
   const handleContractCreation = async (
     contract?: ContractInstanceWithAddress,
     publiclyDeploy?: boolean,
@@ -173,39 +208,51 @@ export function ContractComponent() {
         <div css={contractFnContainer}>
           <div css={headerContainer}>
             <div css={header}>
-              <Typography variant="h3" css={contractName}>
-                {currentContractArtifact.name}
-              </Typography>
-              {!currentContractAddress && wallet && (
-                <div css={contractActions}>
-                  <Button size="small" variant="contained" onClick={() => setOpenCreateContractDialog(true)}>
-                    Register/Deploy
-                  </Button>
-                  {openCreateContractDialog && (
-                    <CreateContractDialog
-                      contractArtifact={currentContractArtifact}
-                      open={openCreateContractDialog}
-                      onClose={handleContractCreation}
-                    />
-                  )}
-                </div>
-              )}
-              {currentContractAddress && (
-                <div css={contractActions}>
-                  <Typography color="text.secondary">{formatFrAsString(currentContractAddress.toString())}</Typography>
-                  <CopyToClipboardButton disabled={false} data={currentContractAddress.toString()} />
-                  <IconButton
-                    onClick={() => {
-                      setCurrentContractAddress(null);
-                      setCurrentContract(null);
-                      setCurrentContractArtifact(null);
-                    }}
-                  >
-                    <ClearIcon />
-                  </IconButton>
-                </div>
+              <Box sx={titleContainer}>
+                <Typography variant="h3" css={contractName}>
+                  {currentContractArtifact.name}
+                </Typography>
+
+                {!currentContractAddress && wallet && (
+                  <div css={contractActions}>
+                    <Button size="small" variant="contained" css={deployButton} onClick={() => setOpenCreateContractDialog(true)}>
+                      Deploy / Load Contract
+                    </Button>
+                    {openCreateContractDialog && (
+                      <CreateContractDialog
+                        contractArtifact={currentContractArtifact}
+                        open={openCreateContractDialog}
+                        onClose={handleContractCreation}
+                      />
+                    )}
+                  </div>
+                )}
+
+                {currentContractAddress && (
+                  <div css={contractActions}>
+                    <Typography color="text.secondary">{formatFrAsString(currentContractAddress.toString())}</Typography>
+                    <CopyToClipboardButton disabled={false} data={currentContractAddress.toString()} />
+                    <IconButton
+                      onClick={() => {
+                        setCurrentContractAddress(null);
+                        setCurrentContract(null);
+                        setCurrentContractArtifact(null);
+                      }}
+                    >
+                      <ClearIcon />
+                    </IconButton>
+                  </div>
+                )}
+
+              </Box>
+
+              {!!ContractDescriptions[currentContractArtifact.name] && (
+                <Typography variant="body1" css={{ marginBottom: '2rem' }}>
+                  {ContractDescriptions[currentContractArtifact.name]}
+                </Typography>
               )}
             </div>
+
             <ContractFilter filters={filters} onFilterChange={setFilters} />
           </div>
           {functionAbis
@@ -218,9 +265,26 @@ export function ContractComponent() {
                   (filters.utility && fn.functionType === FunctionType.UTILITY)) &&
                 (filters.searchTerm === '' || fn.name.includes(filters.searchTerm)),
             )
+            .sort((a, b) => {
+              if (ContractMethodOrder[currentContractArtifact.name]) {
+                return ContractMethodOrder[currentContractArtifact.name]?.indexOf(a.name) - ContractMethodOrder[currentContractArtifact.name]?.indexOf(b.name)
+              }
+              return 0;
+            })
             .map(fn => (
-              <FunctionCard fn={fn} key={fn.name} contract={currentContract} onSendTxRequested={sendTx} />
+              <FunctionCard fn={fn} key={fn.name} contract={currentContract} contractArtifact={currentContractArtifact} onSendTxRequested={sendTx} />
             ))}
+
+          {!!ContractDocumentationLinks[currentContractArtifact.name] && (
+            <Card sx={{ margin: '3rem 0.5rem' }}>
+              <CardContent>
+                <Typography variant="body1">
+                  <span>Find the in-depth tutorial for {currentContractArtifact.name} </span>
+                  <a href={ContractDocumentationLinks[currentContractArtifact.name]} target="_blank" rel="noopener noreferrer">here</a>
+                </Typography>
+              </CardContent>
+            </Card>
+          )}
         </div>
       )}
     </div>

playground/src/components/contract/components/ContractFilter.tsx

@@ -16,6 +16,7 @@ const search = css({
   '@media (width > 800px)': {
     maxWidth: '500px',
   },
+  marginBottom: '1rem',
 });
 
 const checkBoxLabel = css({
@@ -58,7 +59,7 @@ export function ContractFilter({ filters, onFilterChange }: ContractFilterProps)
           }}
         >
           <Tooltip
-            title="These functions are simulated locally and only proofs are sent to Aztec"
+            title="Function signature and execution are kept private by executing locally and generating a zk proof of correct execution. The proof is sent to Aztec."
             arrow
             slotProps={{
               tooltip: {
@@ -112,7 +113,7 @@ export function ContractFilter({ filters, onFilterChange }: ContractFilterProps)
           </Tooltip>
 
           <Tooltip
-            title="Only invoked by applications that interact with contracts to perform state queries from an off-chain client. They are unconstrained, meaning no proofs are generated"
+            title="These are off-chain getters (for you to query the state) without generating any proofs. They are unconstrained, so no proof is generated and data is fetched locally."
             arrow
             slotProps={{
               tooltip: {

playground/src/components/contract/components/ContractUpload.tsx

@@ -7,6 +7,8 @@ import Typography from '@mui/material/Typography';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import { useContext } from 'react';
 import { AztecContext } from '../../../aztecEnv';
+import Box from '@mui/material/Box';
+import { VERSION } from '../../../utils/constants';
 
 const dropZoneContainer = css({
   display: 'flex',
@@ -29,7 +31,7 @@ const uploadIcon = css({
 export function ContractUpload() {
   const { setCurrentContractArtifact } = useContext(AztecContext);
 
-  const { getRootProps, getInputProps } = useDropzone({
+  const { getRootProps, getInputProps, } = useDropzone({
     onDrop: async files => {
       const file = files[0];
       const reader = new FileReader();
@@ -43,6 +45,7 @@ export function ContractUpload() {
       'application/json': ['.json'],
     },
     multiple: false,
+    noDragEventsBubbling: true,
   });
 
   return (
@@ -54,9 +57,31 @@ export function ContractUpload() {
           Upload Contract JSON Artifact
         </Typography>
         <Typography>Drag and drop a contract JSON file here, or click to select a file</Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ mt: 1, mb: 3, display: 'block' }}>
-          The contract artifact should be a JSON file exported from your Noir/Aztec project
-        </Typography>
+
+
+        <Box sx={{ textAlign: 'left', backgroundColor: 'var(--mui-palette-grey-A200)', p: 2, borderRadius: '5px', my: 3 }}>
+          <Box>
+            <a href="https://docs.aztec.network/developers/tutorials/codealong/contract_tutorials/counter_contract" target="_blank" rel="noopener noreferrer">Learn</a>
+            <span> to write your own Aztec smart contracts and upload them here when ready.</span>
+          </Box>
+
+          <Box sx={{ mt: 2 }}>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              1. Install Aztec CLI by running `aztec-up {VERSION}`
+              <br />
+              2. Run `aztec-nargo compile` in your project directory
+              <br />
+              3. Look for `{'<your-project-name>'}.json` file in the ./target directory
+            </Typography>
+          </Box>
+        </Box>
+
         <Button
           variant="contained"
           color="primary"