AssetPicker + PubKeyPicker

package.json

@@ -15,7 +15,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^2.0.0-beta.5",
+    "@stellar/design-system": "^2.0.0-beta.6",
     "@tanstack/react-query": "^5.24.1",
     "@tanstack/react-query-devtools": "^5.24.1",
     "dompurify": "^3.0.9",
@@ -24,6 +24,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "stellar-sdk": "^11.2.2",
     "zustand": "^4.5.1",
     "zustand-querystring": "^0.0.19"
   },

src/app/page.tsx

@@ -1,17 +1,36 @@
 "use client";
 
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Card, Link, Text, Icon } from "@stellar/design-system";
 
 import { NextLink } from "@/components/NextLink";
 import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
 import { InfoCards } from "@/components/InfoCards";
 import { SdsLink } from "@/components/SdsLink";
+import { AssetPicker } from "@/components/FormElements/AssetPicker";
+
 import { Routes } from "@/constants/routes";
+import { AssetType } from "@/types/types";
+import { IncludeFailedPicker } from "@/components/FormElements/IncludeFailedPicker";
+import { OrderPicker } from "@/components/FormElements/OrderPicker";
 
 export default function Introduction() {
   const router = useRouter();
 
+  const [stringAssetId, setStringAssetId] = useState<AssetType | undefined>(
+    "issued",
+  );
+  const [stringAssetValue, setStringAssetValue] = useState<any>("aaa:bbb");
+
+  const [objectAssetId, setObjectAssetId] = useState<AssetType | undefined>(
+    "credit_alphanum4",
+  );
+  const [objectAssetValue, setObjectAssetValue] = useState<any>({
+    code: "ccc",
+    issuer: "ddd",
+  });
+
   const infoCards = [
     {
       id: "stellar-quest",
@@ -54,6 +73,50 @@ export default function Introduction() {
 
   return (
     <LayoutContentContainer>
+      {/* TODO: remove, for testing only */}
+      <Card>
+        <div style={{ display: "grid", gap: 30 }}>
+          <AssetPicker
+            label="Asset"
+            id="test"
+            variant="string"
+            selectedOption={stringAssetId}
+            includeNone
+            value={stringAssetValue}
+            onChange={(opId, opValue) => {
+              setStringAssetId(opId);
+              setStringAssetValue(opValue);
+            }}
+          />
+
+          <AssetPicker
+            label="Base Asset"
+            id="test-1"
+            variant="object"
+            selectedOption={undefined}
+            value={objectAssetValue}
+            onChange={(opId, opValue) => {
+              setObjectAssetId(opId);
+              setObjectAssetValue(opValue);
+            }}
+          />
+
+          <IncludeFailedPicker
+            id="failed"
+            selectedOption=""
+            value={false}
+            onChange={() => {}}
+          />
+
+          <OrderPicker
+            id="order"
+            selectedOption=""
+            value="asc"
+            onChange={() => {}}
+          />
+        </div>
+      </Card>
+
       <Card>
         <div className="CardText">
           <Text size="lg" as="h1" weight="medium">

src/components/ExpandBox/index.tsx

@@ -0,0 +1,15 @@
+import "./styles.scss";
+
+export const ExpandBox = ({
+  children,
+  isExpanded,
+}: {
+  children: React.ReactNode;
+  isExpanded: boolean;
+}) => {
+  return (
+    <div className="ExpandBox" data-is-expanded={isExpanded}>
+      <div className="ExpandBox__inset">{children}</div>
+    </div>
+  );
+};

src/components/ExpandBox/styles.scss

@@ -0,0 +1,13 @@
+.ExpandBox {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.5s ease-out;
+
+  &[data-is-expanded="true"] {
+    grid-template-rows: 1fr;
+  }
+
+  &__inset {
+    overflow: hidden;
+  }
+}