✨[DAPP] Create vault and auto invest

apps/dapp/package.json

@@ -10,14 +10,15 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.17.0",
+    "@creit.tech/stellar-wallets-kit": "^1.9.5",
+    "@defindex/sdk": "^0.1.2",
     "@emotion/react": "^11.14.0",
     "@stellar/stellar-sdk": "^14.1.1",
     "next": "15.3.1",
     "next-themes": "^0.4.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-icons": "^5.5.0",
-    "stellar-react": "^0.0.6",
     "swr": "^2.3.3"
   },
   "devDependencies": {

apps/dapp/src/app/api/defindex/create-vault/route.ts

@@ -0,0 +1,49 @@
+import { defindexClient } from '@/lib/defindexClient';
+import { CreateDefindexVault, CreateVaultAutoInvestParams, SupportedNetworks } from '@defindex/sdk';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { vaultConfig, network, withDeposit } = body;
+
+    if (!vaultConfig) {
+      return NextResponse.json(
+        { error: 'vaultConfig is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!network || !['mainnet', 'testnet'].includes(network)) {
+      return NextResponse.json(
+        { error: 'network must be mainnet or testnet' },
+        { status: 400 }
+      );
+    }
+
+    const sdkNetwork = network === 'mainnet'
+      ? SupportedNetworks.MAINNET
+      : SupportedNetworks.TESTNET;
+
+    let result;
+    if (withDeposit) {
+      result = await defindexClient.createVaultAutoInvest(
+        vaultConfig as CreateVaultAutoInvestParams,
+        sdkNetwork
+      );
+    } else {
+      result = await defindexClient.createVault(
+        vaultConfig as CreateDefindexVault,
+        sdkNetwork
+      );
+    }
+
+    return NextResponse.json({ data: result });
+  } catch (error) {
+    console.error('Error creating vault:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to create vault' },
+      { status: 500 }
+    );
+  }
+}

apps/dapp/src/app/api/defindex/send/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { defindexClient } from '@/lib/defindexClient';
+import { SupportedNetworks } from '@defindex/sdk';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { signedXdr, network } = body;
+
+    if (!signedXdr) {
+      return NextResponse.json(
+        { error: 'signedXdr is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!network || !['mainnet', 'testnet'].includes(network)) {
+      return NextResponse.json(
+        { error: 'network must be mainnet or testnet' },
+        { status: 400 }
+      );
+    }
+
+    const sdkNetwork = network === 'mainnet'
+      ? SupportedNetworks.MAINNET
+      : SupportedNetworks.TESTNET;
+
+    const result = await defindexClient.sendTransaction(signedXdr, sdkNetwork);
+
+    return NextResponse.json({ data: result });
+  } catch (error) {
+    console.error('Error sending transaction:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to send transaction' },
+      { status: 500 }
+    );
+  }
+}

apps/dapp/src/app/api/defindex/vault-balance/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { defindexClient } from '@/lib/defindexClient';
+import { SupportedNetworks } from '@defindex/sdk';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const vaultAddress = searchParams.get('vaultAddress');
+    const userAddress = searchParams.get('userAddress');
+    const network = searchParams.get('network') as 'mainnet' | 'testnet';
+
+    if (!vaultAddress) {
+      return NextResponse.json(
+        { error: 'vaultAddress is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!userAddress) {
+      return NextResponse.json(
+        { error: 'userAddress is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!network || !['mainnet', 'testnet'].includes(network)) {
+      return NextResponse.json(
+        { error: 'network must be mainnet or testnet' },
+        { status: 400 }
+      );
+    }
+
+    const sdkNetwork = network === 'mainnet'
+      ? SupportedNetworks.MAINNET
+      : SupportedNetworks.TESTNET;
+
+    const balance = await defindexClient.getVaultBalance(
+      vaultAddress,
+      userAddress,
+      sdkNetwork
+    );
+
+    return NextResponse.json({ data: balance });
+  } catch (error) {
+    console.error('Error fetching vault balance:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to fetch vault balance' },
+      { status: 500 }
+    );
+  }
+}

apps/dapp/src/app/api/defindex/vault-info/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { defindexClient } from '@/lib/defindexClient';
+import { SupportedNetworks } from '@defindex/sdk';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const vaultAddress = searchParams.get('vaultAddress');
+    const network = searchParams.get('network') as 'mainnet' | 'testnet';
+
+    if (!vaultAddress) {
+      return NextResponse.json(
+        { error: 'vaultAddress is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!network || !['mainnet', 'testnet'].includes(network)) {
+      return NextResponse.json(
+        { error: 'network must be mainnet or testnet' },
+        { status: 400 }
+      );
+    }
+
+    const sdkNetwork = network === 'mainnet'
+      ? SupportedNetworks.MAINNET
+      : SupportedNetworks.TESTNET;
+
+    const vaultInfo = await defindexClient.getVaultInfo(vaultAddress, sdkNetwork);
+
+    return NextResponse.json({ data: vaultInfo });
+  } catch (error) {
+    console.error('Error fetching vault info:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to fetch vault info' },
+      { status: 500 }
+    );
+  }
+}

apps/dapp/src/components/CreateVault/AddStrategies.tsx

@@ -0,0 +1,58 @@
+import { AssetContext, VaultContext } from '@/contexts'
+import { decimalRegex, parseNumericInput } from '@/helpers/input'
+import { HStack, Stack } from '@chakra-ui/react'
+import React, { useContext } from 'react'
+import BackgroundCard from '../ui/BackgroundCard'
+import { baseMargin } from '../ui/Common'
+import { FormField } from '../ui/CustomInputFields'
+import { SelectStrategies } from './SelectStrategies'
+import { StrategyAllocationSliders } from './StrategyAllocationSliders'
+
+export function AddStrategies() {
+  const assetContext = useContext(AssetContext);
+  const vaultContext = useContext(VaultContext);
+
+  const handleDepositAmount = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {
+    if (!decimalRegex.test(e.target.value) && e.target.value != '') return
+    const assetAllocation = vaultContext?.newVault.assetAllocation.map((item) => {
+      let newItem = item
+      const amount = parseNumericInput(e.target.value, 7);
+      if (item.address === vaultContext?.newVault.assetAllocation[i].address) {
+        newItem = {
+          ...item,
+          amount: Number(amount),
+        }
+      }
+      return newItem
+    });
+    vaultContext?.setNewVault({
+      ...vaultContext.newVault,
+      assetAllocation: assetAllocation!,
+    })
+  }
+
+  return (
+    <BackgroundCard title='Add Strategies' titleFontWeight='bold' titleFontSize='xl'>
+      <HStack alignItems="flex-start">
+        {vaultContext?.newVault.assetAllocation.map((item, index) => (
+          <Stack key={index} w={'full'} alignContent={'center'} justifyContent={'center'} mt={baseMargin} gap={4}>
+            <FormField
+              label={item.symbol?.toUpperCase() || ''}
+              placeholder="Initial deposit"
+              type="number"
+              min={0}
+              value={parseNumericInput(vaultContext.newVault.assetAllocation[index]?.amount.toString(), 7) || 0}
+              onChange={(e) => handleDepositAmount(e, index)}
+            />
+            <SelectStrategies asset={assetContext!.assets.find((a) => a.address === item.address)!} />
+            <StrategyAllocationSliders
+              assetIndex={index}
+              assetAmount={item.amount}
+              assetSymbol={item.symbol?.toUpperCase() || ''}
+            />
+          </Stack>
+        ))}
+      </HStack>
+    </BackgroundCard>
+  )
+}

apps/dapp/src/components/CreateVault/CreateVault.css

@@ -0,0 +1,19 @@
+[data-scope="checkbox"][data-part="control"] {
+  border-radius: 25%;
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(211, 255, 180, 0.5) !important;
+}
+
+[data-scope="checkbox"][data-part="control"][data-state="checked"] {
+  background-color: rgba(211, 255, 180, 0.2) !important;
+  border-color: #D3FFB4 !important;
+}
+
+[data-scope="checkbox"][data-part="indicator"],
+[data-scope="checkbox"][data-part="indicator"] svg,
+.checkbox,
+.checkbox svg {
+  color: #D3FFB4 !important;
+  stroke: #D3FFB4 !important;
+  fill: none !important;
+}