chore: adds on-brand design to private token project

yarn-project/boxes/private-token/package.json

@@ -35,15 +35,18 @@
     "rootDir": "./src"
   },
   "dependencies": {
+    "@aztec/aztec-ui": "^0.1.14",
     "@aztec/aztec.js": "workspace:^",
     "@aztec/circuits.js": "workspace:^",
     "@aztec/cli": "workspace:^",
     "@aztec/foundation": "workspace:^",
+    "classnames": "^2.3.2",
     "formik": "^2.4.3",
+    "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass-loader": "^13.3.2",
     "serve": "^14.2.1",
-    "tailwindcss": "^3.3.3",
     "yup": "^1.2.0"
   },
   "devDependencies": {

yarn-project/boxes/private-token/postcss.config.cjs

@@ -1,6 +1,5 @@
-const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 
 module.exports = {
-  plugins: [tailwindcss('./tailwind.config.cjs'), autoprefixer],
+  plugins: [autoprefixer],
 };

yarn-project/boxes/private-token/src/app/components/contract_function_form.module.scss

@@ -0,0 +1,67 @@
+.input {
+    border: none;
+    outline-width: 0;
+    outline-color: rgba(0, 0, 0, 0);
+    padding: 2px 20px 0 20px;
+    width: 100%;
+    height: 45px;
+    color: #000;
+    border: 1px solid rgba(0, 0, 0, 0);
+    font-size: 16px;
+    text-align: left;
+    font-weight: 400;
+    border-radius: 10px;
+    text-align: left;
+    text-overflow: ellipsis;
+    transition: box-shadow .2s;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, .1);
+    background-color: white;
+    -webkit-appearance: none;
+
+
+    &:disabled {
+        color: #4a4a4a;
+        background-color: rgba(239, 239, 239, 0.3);
+        background: radial-gradient(rgba(239, 239, 239, 0.3), rgba(239, 239, 239, 0.3));
+        -webkit-text-fill-color: #4a4a4a;
+        cursor: not-allowed;
+    }
+}
+
+.label {
+    font-weight: 450;
+    font-size: 18px;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    text-align: left;
+    margin-bottom: 15px;
+    justify-content: space-between;
+}
+
+.inputWrapper {
+    width: 100%;
+    display: flex;
+    gap: 15px;
+}
+
+.field {
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    margin: 30px;
+    width: 450px;
+    gap: 30px;
+}
+
+.actionButton {
+    width: 100%;
+    align-self: center;
+}

yarn-project/boxes/private-token/src/app/components/contract_function_form.tsx

@@ -1,11 +1,12 @@
+import { Button, Card, CardTheme, Loader } from '@aztec/aztec-ui';
 import { AztecAddress, CompleteAddress, Fr } from '@aztec/aztec.js';
 import { ContractAbi, FunctionAbi } from '@aztec/foundation/abi';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { CONTRACT_ADDRESS_PARAM_NAMES, DEFAULT_PUBLIC_ADDRESS, rpcClient } from '../../config.js';
 import { callContractFunction, deployContract, viewContractFunction } from '../../scripts/index.js';
 import { convertArgs } from '../../scripts/util.js';
-import { Button } from './index.js';
+import styles from './contract_function_form.module.scss';
 
 type NoirFunctionYupSchema = {
   // hack: add `any` at the end to get the array schema to typecheck
@@ -22,7 +23,7 @@ function generateYupSchema(functionAbi: FunctionAbi) {
   const initialValues: NoirFunctionFormValues = {};
   for (const param of functionAbi.parameters) {
     if (CONTRACT_ADDRESS_PARAM_NAMES.includes(param.name)) {
-  // these are hex strings instead, but yup doesn't support bigint so we convert back to bigint on execution
+      // these are hex strings instead, but yup doesn't support bigint so we convert back to bigint on execution
       parameterSchema[param.name] = Yup.string().required();
       initialValues[param.name] = DEFAULT_PUBLIC_ADDRESS;
       continue;
@@ -32,7 +33,7 @@ function generateYupSchema(functionAbi: FunctionAbi) {
         parameterSchema[param.name] = Yup.number().required();
         initialValues[param.name] = 100;
         break;
-    // not really needed for private token, since we hide the nullifier helper method which has the array input
+      // not really needed for private token, since we hide the nullifier helper method which has the array input
       case 'array':
         // eslint-disable-next-line no-case-declarations
         const arrayLength = param.type.length;
@@ -108,7 +109,6 @@ export function ContractFunctionForm({
   contractAddress,
   contractAbi,
   functionAbi,
-  title,
   buttonText = 'Submit',
   isLoading,
   disabled,
@@ -132,37 +132,31 @@ export function ContractFunctionForm({
   });
 
   return (
-    <div className="rounded-sm py-8">
-      <h2 className="py-4 text-lg">{title || `${functionAbi.name} (${functionAbi.functionType})`}</h2>
-      <form onSubmit={formik.handleSubmit} className="flex justify-between items-end py-4">
-        <div className="flex flex-wrap justify-start">
-          {functionAbi.parameters.map(input => (
-            <div key={input.name} className="inline-block text-left p-1">
-              <label htmlFor={input.name} className="block p-1">
-                {input.name} ({input.type.kind})
-              </label>
-              <div className="block p-1">
-                <input
-                  className="border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2"
-                  id={input.name}
-                  name={input.name}
-                  type="text"
-                  onChange={formik.handleChange}
-                  value={formik.values[input.name]}
-                />
-              </div>
-              {formik.touched[input.name] && formik.errors[input.name] && (
-                <div>{formik.errors[input.name]?.toString()}</div>
-              )}
-            </div>
-          ))}
+    <form onSubmit={formik.handleSubmit} className={styles.content}>
+      {functionAbi.parameters.map(input => (
+        <div key={input.name} className={styles.field}>
+          <label className={styles.label} htmlFor={input.name}>
+            {input.name} ({input.type.kind})
+          </label>
+          <input
+            className={styles.input}
+            id={input.name}
+            name={input.name}
+            disabled={isLoading}
+            type="text"
+            onChange={formik.handleChange}
+            value={formik.values[input.name]}
+          />
+          {formik.touched[input.name] && formik.errors[input.name] && (
+            <div>{formik.errors[input.name]?.toString()}</div>
+          )}
         </div>
-        <div className="p-2">
-          <Button isLoading={isLoading} disabled={disabled}>
-            {buttonText}
-          </Button>
-        </div>
-      </form>
-    </div>
+      ))}
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <Button disabled={disabled} text={buttonText} className={styles.actionButton} type="submit" />
+      )}
+    </form>
   );
 }

yarn-project/boxes/private-token/src/app/components/copy.module.scss

@@ -0,0 +1,6 @@
+.copy {
+    cursor: pointer;
+    width: 35px;
+    height: 25px;
+    padding: 2px 8px;
+}

yarn-project/boxes/private-token/src/app/components/copy.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import styles from './copy.module.scss';
+
+export function Copy({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <img
+      onClick={() => {
+        navigator.clipboard
+          .writeText(value)
+          .then(() => {
+            setCopied(true);
+            setTimeout(() => {
+              setCopied(false);
+            }, 3e3);
+          })
+          .catch(() => {
+            // eslint-disable-next-line no-console
+            console.error('Couldnt copy address');
+          });
+      }}
+      src={copied ? 'check.svg' : 'copy.svg'}
+      alt="Copy"
+      className={styles.copy}
+    />
+  );
+}

yarn-project/boxes/private-token/src/app/components/dropdown.module.scss

@@ -0,0 +1,68 @@
+.dropdownWrapper {
+    position: absolute;
+    top: 60px;
+    right: 0px;
+    border-radius: 10px;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    gap: 1px;
+    border: 1px solid #ebeaea;
+    background-color: #ebeaea;
+    z-index: 1;
+}
+
+.dropdownOptionBackground {
+    background-color: white;
+}
+
+.dropdownOption {
+    font-size: 14px;
+    padding: 10px 25px;
+    white-space: nowrap;
+    cursor: pointer;
+    font-weight: 600;
+    justify-content: space-between;
+    letter-spacing: 0.5px;
+    display: flex;
+}
+
+.singleOption {
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+.dropdownOption.disabled {
+    background-image: initial;
+    cursor: default;
+    background-color: #c4c4c4;
+}
+
+.dropdownOptionBackground:hover {
+    background-color: #ebeaea;
+}
+
+.dropdownOptionBackground.disabled:hover {
+    background-color: white;
+}
+
+.sublabel {
+    text-align: right;
+}
+
+.sublabels {
+    display: flex;
+    flex-direction: row;
+    font-weight: 450;
+}
+
+.feeOption {
+    gap: 5px;
+    display: flex;
+    flex-direction: column;
+}
+
+.label {
+    color: #2f1f49;
+}