Add chainlink oracle to the UI

package.json

@@ -22,7 +22,7 @@
     "test:watch": "pnpm exec jest --watchAll --verbose"
   },
   "dependencies": {
-    "@bleu-fi/ui": "^0.1.33",
+    "@bleu-fi/ui": "^0.1.48",
     "@cowprotocol/app-data": "^1.2.2",
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@hookform/resolvers": "^3.3.4",

src/app/builder/page.tsx

@@ -1,11 +1,85 @@
 "use client";
 
-import { ReactFlowProvider } from "reactflow";
+import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
+import { useEffect, useState } from "react";
+import { Node, ReactFlowProvider } from "reactflow";
+import { Address } from "viem";
 
 import { Board } from "#/components/Board";
+import { defaultEdgeProps } from "#/components/edges";
 import Menu from "#/components/menus";
+import { defaultNodeProps } from "#/components/nodes";
+import { getDefaultStopLossData } from "#/components/nodes/StopLossNode";
+import { getDefaultSwapData } from "#/components/nodes/SwapNode";
+import { Spinner } from "#/components/Spinner";
+import { ChainId } from "#/lib/publicClients";
+import { INodeData } from "#/lib/types";
+
+const createInitNodes = async (chainId: ChainId, safeAddress: Address) => {
+  const swapData = getDefaultSwapData(chainId, safeAddress);
+  const conditionData = await getDefaultStopLossData({
+    chainId,
+    tokenBuy: swapData.tokenBuy,
+    tokenSell: swapData.tokenSell,
+  });
+
+  return [
+    {
+      id: "condition",
+      type: "stopLoss",
+      data: conditionData,
+      ...defaultNodeProps,
+    },
+    {
+      id: "swap",
+      type: "swap",
+      data: swapData,
+      ...defaultNodeProps,
+    },
+    {
+      id: "end",
+      type: "endNode",
+      selectable: false,
+      ...defaultNodeProps,
+    },
+  ] as Node<INodeData>[];
+};
+
+const initEdges = [
+  {
+    id: "condition-swap",
+    source: "condition",
+    target: "swap",
+    type: "addHook",
+    ...defaultEdgeProps,
+  },
+  {
+    id: "swap-end",
+    source: "swap",
+    target: "end",
+    type: "addHook",
+    ...defaultEdgeProps,
+  },
+];
 
 export default function PlaygroundPage() {
+  const {
+    safe: { safeAddress, chainId },
+  } = useSafeAppsSDK();
+  const [initNodes, setInitNodes] = useState<Node<INodeData>[]>([]);
+
+  useEffect(() => {
+    createInitNodes(chainId as ChainId, safeAddress as Address).then(
+      (nodes) => {
+        setInitNodes(nodes);
+      }
+    );
+  }, [chainId, safeAddress]);
+
+  if (initNodes.length === 0) {
+    return <Spinner />;
+  }
+
   return (
     <div className="hidden h-full flex-col md:flex text-white">
       <ReactFlowProvider>
@@ -17,7 +91,7 @@ export default function PlaygroundPage() {
             <div className="md:order-1">
               <div className="flex h-full flex-col space-y-4">
                 <div className="h-full">
-                  <Board />
+                  <Board initNodes={initNodes} initEdges={initEdges} />
                 </div>
               </div>
             </div>