init app-template-ui

.gitignore

@@ -3,6 +3,7 @@
 temp
 temp/**.*
 volumes/
+node_modules
 
 # Allow
 !.env.example

.neoconf.json

@@ -0,0 +1,12 @@
+{
+  "lspconfig": {
+    "rust_analyzer": {
+      "rust-analyzer.cargo.features": "all",
+      "rust-analyzer.rustfmt.overrideCommand": [
+        "leptosfmt",
+        "--stdin",
+        "--rustfmt"
+      ]
+    }
+  }
+}

Cargo.toml

@@ -1,5 +1,11 @@
 [workspace]
-members = ["sdk", "app-template", "sitemap-generator", "simple-payment-gateway"]
+members = [
+  "sdk",
+  "app-template",
+  "app-template-ui",
+  "sitemap-generator",
+  "simple-payment-gateway",
+]
 resolver = "2"
 
 [workspace.dependencies]
@@ -26,3 +32,12 @@ tower-http = { version = "0.5.2", features = ["fs", "trace"] }
 cynic-codegen = "3.5.1"
 rust_decimal = { version = "1.35.0", features = ["serde-float"] }
 iso_currency = { version = "0.4.4", features = ["with-serde", "iterator"] }
+pulldown-cmark = "0.11.0"
+http = "1"
+thiserror = "1"
+wasm-bindgen = "=0.2.92"
+console_error_panic_hook = "0.1"
+leptos = { version = "0.6", features = ["nightly"] }
+leptos_axum = { version = "0.6" }
+leptos_meta = { version = "0.6", features = ["nightly"] }
+leptos_router = { version = "0.6", features = ["nightly"] }

app-template-ui/Cargo.toml

@@ -0,0 +1,123 @@
+[package]
+name = "saleor-app-template-ui"
+version = "0.1.0"
+edition = "2021"
+authors = ["Djkáťo <djkatovfx@gmail.com>"]
+description = "A rust app template for Saleor using axum and leptos"
+homepage = "https://github.com/djkato/saleor-apps-rs"
+repository = "https://github.com/djkato/saleor-apps-rs"
+documentation = "https://github.com/djkato/saleor-apps-rs"
+keywords = ["saleor", "sdk", "plugin", "template"]
+categories = ["api-bindings", "web-programming::http-server"]
+license = "MIT OR Apache-2.0"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+axum = { workspace = true, optional = true }
+console_error_panic_hook = { workspace = true }
+leptos = { workspace = true, features = ["nightly"] }
+leptos_axum = { workspace = true, optional = true }
+leptos_meta = { workspace = true, features = ["nightly"] }
+leptos_router = { workspace = true, features = ["nightly"] }
+tokio = { version = "1.0", features = [
+    "macros",
+    "rt-multi-thread",
+], optional = true }
+tower = { workspace = true, optional = true }
+tower-http = { workspace = true, features = ["fs"], optional = true }
+wasm-bindgen = { workspace = true }
+tracing = { workspace = true, optional = true }
+thiserror = { workspace = true }
+http = { workspace = true }
+pulldown-cmark = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+saleor-app-sdk = { workspace = true }
+dotenvy = { workspace = true }
+
+[features]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+    "dep:axum",
+    "dep:tokio",
+    "dep:tower",
+    "dep:tower-http",
+    "dep:leptos_axum",
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+    "dep:tracing",
+]
+
+# Defines a size-optimized profile for the WASM bundle in release mode
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"
+
+[package.metadata.leptos]
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
+output-name = "saleor-app-template-ui"
+
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site"
+
+# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
+# Defaults to pkg
+site-pkg-dir = "pkg"
+
+# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
+# style-file = "style/main.scss"
+# Assets source dir. All files found here will be copied and synchronized to site-root.
+tailwind-input-file = "style/base.css"
+# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
+#
+# Optional. Env: LEPTOS_ASSETS_DIR.
+assets-dir = "public"
+
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+
+# The port to use for automatic reload monitoring
+reload-port = 3001
+
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
+end2end-cmd = "npx playwright test"
+end2end-dir = "end2end"
+
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+
+# The environment Leptos will run in, usually either "DEV" or "PROD"
+env = "DEV"
+
+# The features to use when compiling the bin target
+#
+# Optional. Can be over-ridden with the command line parameter --bin-features
+bin-features = ["ssr"]
+
+# If the --no-default-features flag should be used when compiling the bin target
+#
+# Optional. Defaults to false.
+bin-default-features = false
+
+# The features to use when compiling the lib target
+#
+# Optional. Can be over-ridden with the command line parameter --lib-features
+lib-features = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false
+
+# The profile to use for the lib target when compiling for release
+#
+# Optional. Defaults to "release".
+lib-profile-release = "wasm-release"

app-template-ui/end2end/package-lock.json

@@ -0,0 +1,74 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "end2end",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.28.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "node_modules/playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true,
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    }
+  },
+  "dependencies": {
+    "@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      }
+    },
+    "@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true
+    }
+  }
+}

app-template-ui/end2end/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.28.0"
+  }
+}

app-template-ui/end2end/playwright.config.ts

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

app-template-ui/end2end/tests/example.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage has title and heading text", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+
+  await expect(page).toHaveTitle("Welcome to Leptos");
+
+  await expect(page.locator("h1")).toHaveText("Welcome to Leptos!");
+});

app-template-ui/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
+  }
+}

app-template-ui/src/app.rs

@@ -0,0 +1,36 @@
+use crate::error_template::{AppError, ErrorTemplate};
+use crate::routes::home::Home;
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+#[derive(Params, PartialEq)]
+pub struct UrlAppParams {
+    slug: String,
+}
+
+#[component]
+pub fn App() -> impl IntoView {
+    // Provides context that manages stylesheets, titles, meta tags, etc.
+    provide_meta_context();
+
+    view! {
+        <Stylesheet id="leptos" href="/pkg/saleor-marketplace.css"/>
+
+        // sets the document title
+        <Title text="Saleors Harbour"/>
+
+        // content for this welcome page
+        <Router fallback=|| {
+            let mut outside_errors = Errors::default();
+            outside_errors.insert_with_default_key(AppError::NotFound);
+            view! { <ErrorTemplate outside_errors/> }.into_view()
+        }>
+            <main class="p-4 md:p-8 md:px-16">
+                <Routes>
+                    <Route path="" view=Home/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}

app-template-ui/src/components/mod.rs

@@ -0,0 +1 @@
+pub mod universal;

app-template-ui/src/components/universal/app_editor.rs

@@ -0,0 +1 @@
+use leptos::*;

app-template-ui/src/components/universal/mod.rs

@@ -0,0 +1 @@
+pub mod app_editor;

app-template-ui/src/error_template.rs

@@ -0,0 +1,72 @@
+use http::status::StatusCode;
+use leptos::*;
+use thiserror::Error;
+
+#[derive(Clone, Debug, Error)]
+pub enum AppError {
+    #[error("Not Found")]
+    NotFound,
+}
+
+impl AppError {
+    pub fn status_code(&self) -> StatusCode {
+        match self {
+            AppError::NotFound => StatusCode::NOT_FOUND,
+        }
+    }
+}
+
+// A basic function to display errors served by the error boundaries.
+// Feel free to do more complicated things here than just displaying the error.
+#[component]
+pub fn ErrorTemplate(
+    #[prop(optional)] outside_errors: Option<Errors>,
+    #[prop(optional)] errors: Option<RwSignal<Errors>>,
+) -> impl IntoView {
+    let errors = match outside_errors {
+        Some(e) => create_rw_signal(e),
+        None => match errors {
+            Some(e) => e,
+            None => panic!("No Errors found and we expected errors!"),
+        },
+    };
+    // Get Errors from Signal
+    let errors = errors.get_untracked();
+
+    // Downcast lets us take a type that implements `std::error::Error`
+    let errors: Vec<AppError> = errors
+        .into_iter()
+        .filter_map(|(_k, v)| v.downcast_ref::<AppError>().cloned())
+        .collect();
+    println!("Errors: {errors:#?}");
+
+    // Only the response code for the first error is actually sent from the server
+    // this may be customized by the specific application
+    #[cfg(feature = "ssr")]
+    {
+        use leptos_axum::ResponseOptions;
+        let response = use_context::<ResponseOptions>();
+        if let Some(response) = response {
+            response.set_status(errors[0].status_code());
+        }
+    }
+
+    view! {
+        <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
+        <For
+            // a function that returns the items we're iterating over; a signal is fine
+            each= move || {errors.clone().into_iter().enumerate()}
+            // a unique key for each item as a reference
+            key=|(index, _error)| *index
+            // renders each item to a view
+            children=move |error| {
+                let error_string = error.1.to_string();
+                let error_code= error.1.status_code();
+                view! {
+                    <h2>{error_code.to_string()}</h2>
+                    <p>"Error: " {error_string}</p>
+                }
+            }
+        />
+    }
+}

app-template-ui/src/fileserv.rs

@@ -0,0 +1,60 @@
+use crate::app::App;
+use axum::response::Response as AxumResponse;
+use axum::{
+    body::Body,
+    extract::State,
+    http::{Request, Response, StatusCode},
+    response::IntoResponse,
+};
+use leptos::*;
+use tower::ServiceExt;
+use tower_http::services::ServeDir;
+
+pub async fn file_and_error_handler(
+    State(options): State<LeptosOptions>,
+    req: Request<Body>,
+) -> AxumResponse {
+    let root = options.site_root.clone();
+    let (parts, body) = req.into_parts();
+
+    let mut static_parts = parts.clone();
+    static_parts.headers.clear();
+    if let Some(encodings) = parts.headers.get("accept-encoding") {
+        static_parts
+            .headers
+            .insert("accept-encoding", encodings.clone());
+    }
+
+    let res = get_static_file(Request::from_parts(static_parts, Body::empty()), &root)
+        .await
+        .unwrap();
+
+    if res.status() == StatusCode::OK {
+        res.into_response()
+    } else {
+        let handler = leptos_axum::render_app_to_stream(options.to_owned(), App);
+        handler(Request::from_parts(parts, body))
+            .await
+            .into_response()
+    }
+}
+
+async fn get_static_file(
+    request: Request<Body>,
+    root: &str,
+) -> Result<Response<Body>, (StatusCode, String)> {
+    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+    // This path is relative to the cargo root
+    match ServeDir::new(root)
+        .precompressed_gzip()
+        .precompressed_br()
+        .oneshot(request)
+        .await
+    {
+        Ok(res) => Ok(res.into_response()),
+        Err(err) => Err((
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Error serving files: {err}"),
+        )),
+    }
+}

app-template-ui/src/lib.rs

@@ -0,0 +1,16 @@
+pub mod app;
+pub mod error_template;
+#[cfg(feature = "ssr")]
+pub mod fileserv;
+
+pub mod components;
+pub mod routes;
+pub mod server;
+
+#[cfg(feature = "hydrate")]
+#[wasm_bindgen::prelude::wasm_bindgen]
+pub fn hydrate() {
+    use crate::app::*;
+    console_error_panic_hook::set_once();
+    leptos::mount_to_body(App);
+}

app-template-ui/src/main.rs

@@ -0,0 +1,49 @@
+pub mod server;
+pub mod components;
+pub mod routes;
+
+#[cfg(feature = "ssr")]
+pub mod fileserv;
+#[cfg(feature = "ssr")]
+pub mod error_template;
+
+#[cfg(feature = "ssr")]
+pub mod app;
+#[cfg(feature = "ssr")]
+#[tokio::main]
+async fn main() {
+
+    use axum::Router;
+    use leptos::*;
+    use leptos_axum::{generate_route_list, LeptosRoutes};
+    use crate::app::*;
+    use crate::fileserv::file_and_error_handler;
+    // Setting get_configuration(None) means we'll be using cargo-leptos's env values
+    // For deployment these variables are:
+    // <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
+    // Alternately a file can be specified such as Some("Cargo.toml")
+    // The file would need to be included with the executable when moved to deployment
+    let conf = get_configuration(None).await.unwrap();
+    let leptos_options = conf.leptos_options;
+    let addr = leptos_options.site_addr;
+    let routes = generate_route_list(App);
+
+    // build our application with a route
+    let app = Router::new()
+        .leptos_routes(&leptos_options, routes, App)
+        .fallback(file_and_error_handler)
+        .with_state(leptos_options);
+
+    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
+    logging::log!("listening on http://{}", &addr);
+    axum::serve(listener, app.into_make_service())
+        .await
+        .unwrap();
+}
+
+#[cfg(not(feature = "ssr"))]
+pub fn main() {
+    // no client-side main function
+    // unless we want this to work with e.g., Trunk for a purely client-side app
+    // see lib.rs for hydration function instead
+}

app-template-ui/src/routes/home.rs

@@ -0,0 +1,11 @@
+use leptos::*;
+
+#[component]
+pub fn Home() -> impl IntoView {
+    view! {
+        <h1>Yello!</h1>
+        <p class="italic text-lg">
+            r#"This is the home page for app-template-ui. You're not bridged with the Dashboard, so I can't show you anything, sorry!"#
+        </p>
+    }
+}

app-template-ui/src/routes/mod.rs

@@ -0,0 +1 @@
+pub mod home;

app-template-ui/src/server/functions.rs

@@ -0,0 +1 @@
+use leptos::*;

app-template-ui/src/server/mod.rs

@@ -0,0 +1 @@
+pub mod functions;

app-template-ui/style/base.css

@@ -0,0 +1,78 @@
+@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Space+Grotesk:wght@300..700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-brand-white;
+  }
+
+  html {
+    @apply text-brand-black;
+  }
+
+  ::selection {
+    @apply bg-brand-sunset-400;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-sans my-4 text-brand-sea-300 text-2xl;
+  }
+
+  h2 {
+    @apply text-brand-sea-300 text-xl;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-brand-sea-500 text-base;
+  }
+
+  p {
+    @apply font-serif my-2 text-base;
+  }
+
+  input:disabled,
+  button:disabled {
+    @apply brightness-50 cursor-not-allowed;
+  }
+
+  details,
+  summary {
+    @apply list-none;
+  }
+
+  input:focus,
+  input:active,
+  option:focus,
+  option:active {
+    @apply !outline-none !appearance-none !select-none shadow-none !border-none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}
+
+@layer components {
+  .header-gradient {
+    background: theme("colors.brand-sea.400");
+    background: linear-gradient(25deg,
+        theme("colors.brand-sunset.500") 0%,
+        theme("colors.brand-sea.300") 45%,
+        theme("colors.brand-sea.300") 55%,
+        theme("colors.brand-sunset.500") 100%);
+  }
+}

app-template-ui/tailwind.config.js

@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: {
+    files: ["*.html", "./src/**/*.rs"],
+  },
+  theme: {
+    fontFamily: {
+      sans: ["Space Grotesk", "sans-serif"],
+      serif: ["PT Serif", "serif"],
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "0.875rem",
+      "base-sans": "1rem",
+      lg: "1.125rem",
+      xl: "1.5rem",
+      "2xl": "2rem",
+    },
+    borderRadius: {
+      base: "0.5rem",
+      sm: "0.25rem",
+      xs: "0.156rem",
+      lg: "1rem",
+      xl: "2rem",
+      max: "999999px",
+    },
+    extend: {
+      colors: {
+        "brand-sea": {
+          100: "#C5ECE0",
+          200: "#17C3B2",
+          300: "#1DA0A8",
+          400: "#227C9D",
+          500: "#094074",
+        },
+        "brand-sunset": {
+          100: "#FEF9EF",
+          200: "#FFEED1",
+          300: "#FFE2B3",
+          400: "#FFD795",
+          500: "#FFCB77",
+        },
+        "brand-red": {
+          100: "#FED6D0",
+          200: "#FEB3B1",
+          300: "#FE9092",
+          400: "#FE7F83",
+          500: "#FE6D73",
+        },
+        "brand-black": "#161a1e",
+        "brand-white": "#fbfbfb",
+      },
+    },
+  },
+  plugins: [],
+};

rust-toolchain.toml

@@ -1,5 +1,5 @@
 [toolchain]
-# channel = "nightly-2024-03-23"
+channel = "nightly-2024-05-11"
 ## Toggle to this one for sdk releases
-channel = "stable"
-targets = ["x86_64-unknown-linux-gnu"]
+# channel = "stable"
+targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]