> For the complete documentation index, see [llms.txt](https://docs.trustlesswork.com/trustless-work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trustlesswork.com/trustless-work/v1-pt/sdk-blocks-de-escrow/ciclo-de-vida-de-liberacao-unica.md).

# Ciclo de vida de liberação única

Guia passo a passo para implementar o ciclo de vida Single Release do Escrow

Importante

Não funciona para um caso de uso real, apenas para fins de teste. Mas se você quiser implementar, pode usar o código abaixo como referência e personalizá-lo conforme suas necessidades.

### Crie um projeto Next.js# <a href="#create-nextjs-project" id="create-nextjs-project"></a>

Comece criando um novo projeto Next.js com TypeScript e Tailwind CSS. Para facilitar a configuração, por favor use o alias de caminho com "@/":

```
npx create-next-app@latest
```

Navegue até o diretório do seu projeto:

```
cd my-trustless-app
```

### Instale o Trustless Work Blocks# <a href="#install-trustless-work-blocks" id="install-trustless-work-blocks"></a>

Instale o pacote principal da biblioteca:

npm

```
npm install @trustless-work/blocks
```

#### Execute a configuração via CLI <a href="#run-cli-setup" id="run-cli-setup"></a>

Inicialize seu projeto com a CLI do Trustless Work:

```
npx trustless-work init
```

O que o comando init faz:

* Instala componentes shadcn/ui (com prompts interativos)
* Instala dependências necessárias: @tanstack/react-query, @trustless-work/escrow, axios, zod, react-hook-form, @creit.tech/stellar-wallets-kit, react-day-picker, etc.
* Cria `.twblocks.json` arquivo de configuração
* Opcionalmente conecta providers no seu Next.js `app/layout.tsx`

### Configuração de Ambiente <a href="#environment-configuration" id="environment-configuration"></a>

[Documentação](https://docs.trustlesswork.com/trustless-work/developer-resources/authentication/request-api-key)

Crie um `.env` arquivo na raiz do seu projeto:

.env

```
# Obrigatório: Sua chave de API do Trustless Work 
NEXT_PUBLIC_API_KEY=sua_chave_api_aqui
```

### Adicione Conectividade de Carteira <a href="#add-wallet-connectivity" id="add-wallet-connectivity"></a>

Adicione conectividade de carteira ao seu app:

```
npx trustless-work add wallet-kit
```

#### Envuelva seu app com o WalletProvider: <a href="#wrap-app-wallet-provider" id="wrap-app-wallet-provider"></a>

Envuelva seu app com o WalletProvider em seu layout.tsx:

app/layout.tsx

```
return (
    <WalletProvider>{children}</WalletProvider> 
);
```

#### Exemplo de uso em uma página: <a href="#example-usage-wallet-page" id="example-usage-wallet-page"></a>

Adicione conectividade de carteira ao seu app:

app/page.tsx

```
"use client";

import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";

export default function Home() {
  return (
    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <header className="flex justify-between items-center w-full">
        <h2 className="text-2xl font-bold">Trustless Work</h2>

        {/* Botão da Carteira */}
        <WalletButton />
      </header>
    </div>
  );
}
```

### Adicione Helpers <a href="#add-helpers" id="add-helpers"></a>

Adicione helpers ao seu app:

```
npx trustless-work add helpers
```

### Adicione Tanstack Query <a href="#add-tanstack-query" id="add-tanstack-query"></a>

Adicione Tanstack Query ao seu app:

```
npx trustless-work add tanstack
```

### Adicione Tratamento de Erros <a href="#add-handle-errors" id="add-handle-errors"></a>

Adicione Handle Errors ao seu app:

```
npx trustless-work add handle-errors
```

### Adicione Providers (Se você pulou o comando init) <a href="#add-providers" id="add-providers"></a>

Adicione Providers ao seu app:

```
npx trustless-work add providers
```

### Adicione Componentes de Single Release Escrows <a href="#add-single-release-escrows" id="add-single-release-escrows"></a>

Adicione Single Release Escrows ao seu app:

```
npx trustless-work add escrows/single-release
```

### Adicione Componentes de Single-Multi Release Escrows <a href="#add-single-multi-release-escrows" id="add-single-multi-release-escrows"></a>

Adicione Single-Multi Release Escrows ao seu app:

```
npx trustless-work add escrows/single-multi-release
```

### Adicione Escrows por Cards de Role <a href="#add-escrows-by-role-cards" id="add-escrows-by-role-cards"></a>

Adicione Escrows by Role Cards ao seu app:

```
npx trustless-work add escrows/escrows-by-role/cards
```

#### Importe Ações <a href="#import-actions" id="import-actions"></a>

No código, há algumas ações comentadas. Você pode descomentá-las e importá-las do bloco single-release. Veja as notas nos componentes escrows by role ou by signer.

#### Código Comentado <a href="#commented-out-code" id="commented-out-code"></a>

escrows/escrows-by-role/details/Actions.tsx

```
return (
    <div className="flex items-start justify-start flex-col gap-2 w-full">
      {/* Você pode adicionar os botões aqui, usando os botões dos blocks. Essas ações são condicionais com base nas flags do escrow e nas funções de usuário. */}
      {hasConditionalButtons && (
        <div className="flex flex-col gap-2 w-full">
          {/* O componente UpdateEscrowDialog deve ser renderizado com base no tipo de escrow. Isso significa que, se selectedEscrow.type for "single-release", então o UpdateEscrowDialog (do bloco single-release) deve ser renderizado. Se selectedEscrow.type for "multi-release", então o UpdateEscrowDialog (do bloco multi-release) deve ser renderizado. */}
          {/* {shouldShowEditButton && <UpdateEscrowDialog />} */}

          {/* Funciona apenas com escrows single-release */}
          {/* Só aparece se o escrow tiver saldo */}
          {/* {shouldShowDisputeButton && <DisputeEscrowButton />} */}

          {/* Funciona apenas com escrows single-release */}
          {/* Só aparece se o escrow estiver em disputa */}
          {/* {shouldShowResolveButton && <ResolveDisputeDialog />} */}

          {/* Funciona apenas com escrows single-release */}
          {/* Só aparece se todos os marcos estiverem aprovados */}
          {/* {shouldShowReleaseFundsButton && <ReleaseEscrowButton />} */}
        </div>
      )}

      <FundEscrowDialog />
    </div>
  );
```

#### Ações Importadas <a href="#actions-imported" id="actions-imported"></a>

escrows/escrows-by-role/details/Actions.tsx

```
// Se você precisar de ambos os tipos, deve importar ambas as versões para atualizar o escrow
import { UpdateEscrowDialog } from "../../single-release/update-escrow/dialog/UpdateEscrow";
/* import { UpdateEscrowDialog as UpdateEscrowDialogMultiRelease } from "../../multi-release/update-escrow/dialog/UpdateEscrow"; */
import { FundEscrowDialog } from "../../single-multi-release/fund-escrow/dialog/FundEscrow";
import { DisputeEscrowButton } from "../../single-release/dispute-escrow/button/DisputeEscrow";
import { ResolveDisputeDialog } from "../../single-release/resolve-dispute/dialog/ResolveDispute";
import { ReleaseEscrowButton } from "../../single-release/release-escrow/button/ReleaseEscrow";

return (
    <div className="flex items-start justify-start flex-col gap-2 w-full">
      {/* Você pode adicionar os botões aqui, usando os botões dos blocks. Essas ações são condicionais com base nas flags do escrow e nas funções de usuário. */}
      {hasConditionalButtons && (
        <div className="flex flex-col gap-2 w-full">
          {/* O componente UpdateEscrowDialog deve ser renderizado com base no tipo de escrow. Isso significa que, se selectedEscrow.type for "single-release", então o UpdateEscrowDialog (do bloco single-release) deve ser renderizado. Se selectedEscrow.type for "multi-release", então o UpdateEscrowDialog (do bloco multi-release) deve ser renderizado. */}
          {shouldShowEditButton && <UpdateEscrowDialog />}

          {/* Funciona apenas com escrows single-release */}
          {shouldShowDisputeButton && <DisputeEscrowButton />}

          {/* Funciona apenas com escrows single-release */}
          {shouldShowResolveButton && <ResolveDisputeDialog />}

          {/* Funciona apenas com escrows single-release */}
          {shouldShowReleaseFundsButton && <ReleaseEscrowButton />}
        </div>
      )}

      <FundEscrowDialog />
    </div>
  );
```

### Configuração Manual de Providers <a href="#manual-provider-setup" id="manual-provider-setup"></a>

Envuelva seu app com os providers necessários nesta ordem específica:

app/layout.tsx

```
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ReactQueryClientProvider } from "@/components/tw-blocks/providers/ReactQueryClientProvider";
import { TrustlessWorkProvider } from "@/components/tw-blocks/providers/TrustlessWork";
import { WalletProvider } from "@/components/tw-blocks/wallet-kit/WalletProvider";
import { EscrowProvider } from "@/components/tw-blocks/providers/EscrowProvider";
import { EscrowDialogsProvider } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
import { EscrowAmountProvider } from "@/components/tw-blocks/providers/EscrowAmountProvider";
import { Toaster } from "@/components/ui/sonner";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        // opcional: use geistSans.variable e geistMono.variable
        className="antialiased"
      >
        <ReactQueryClientProvider>
          <TrustlessWorkProvider>
            <WalletProvider>
              <EscrowProvider>
                <EscrowDialogsProvider>
                  <EscrowAmountProvider>
                    {children}

                    <Toaster />
                  </EscrowAmountProvider>
                </EscrowDialogsProvider>
              </EscrowProvider>
            </WalletProvider>
          </TrustlessWorkProvider>
        </ReactQueryClientProvider>
      </body>
    </html>
  );
}
```

A ordem dos Providers importaOs providers devem ser aninhados nesta ordem exata para funcionamento adequado.

### Exemplo de uso em uma página: <a href="#example-usage-complete-page" id="example-usage-complete-page"></a>

Agora, você é capaz de interagir com todo o ciclo de vida do escrow.

app/page.tsx

```
"use client";

import { EscrowsByRoleCards } from "@/components/tw-blocks/escrows/escrows-by-role/cards/EscrowsCards";
import { InitializeEscrowDialog } from "@/components/tw-blocks/escrows/single-release/initialize-escrow/dialog/InitializeEscrow";
import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";

export default function Home() {
  return (
    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <header className="flex justify-between items-center w-full">
        <h2 className="text-2xl font-bold">Trustless Work</h2>
        <WalletButton />
      </header>
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <div className="container">
          <div className="flex w-full mb-4 justify-end">
            <div className="flex w-1/6">
              <InitializeEscrowDialog />
            </div>
          </div>

          <EscrowsByRoleCards />
        </div>
      </main>
    </div>
  );
}

```

Todos os blocks foram adicionados, agora use-os!Você já tem todos os blocks necessários para começar a usar o ciclo de vida do escrow single-release.

### UI Final <a href="#final-ui" id="final-ui"></a>

Usando esses componentes, você será capaz de completar todo o ciclo de vida do escrow.

Conselho importante de uso- Esses componentes de cards funcionam **por função**. Na seção de filtros, você pode selecionar a função que deseja ver os escrows. Com base nisso, os botões de ação serão renderizados.\
\- Antes de começar a usar a UI, você deve adicionar o **USDC** ativo à sua carteira. Caso contrário, você não poderá interagir com o Trustless Work.

#### Diálogo de Conexão da Carteira <a href="#wallet-connection-dialog" id="wallet-connection-dialog"></a>

Mostre o diálogo de conexão da carteira:

![Escrow Lifecycle](https://blocks.trustlesswork.com/_next/image?url=%2Fstart-from-scratch%2Fwallet-kit.png\&w=1080\&q=75)

#### Cards por Função <a href="#cards-by-role" id="cards-by-role"></a>

Mostre os cards por função:

![Escrow Lifecycle](https://blocks.trustlesswork.com/_next/image?url=%2Fstart-from-scratch%2Fcards-by-role.png\&w=2048\&q=75)

#### Diálogo de Inicialização de Escrow <a href="#initialize-escrow-dialog" id="initialize-escrow-dialog"></a>

Mostre o diálogo de inicialização de escrow:

![Escrow Lifecycle](https://blocks.trustlesswork.com/_next/image?url=%2Fstart-from-scratch%2Finitialize-escrow.png\&w=2048\&q=75)

#### Diálogo de Detalhes do Escrow <a href="#escrow-details-dialog" id="escrow-details-dialog"></a>

Mostre o diálogo de detalhes do escrow:

![Escrow Lifecycle](https://blocks.trustlesswork.com/_next/image?url=%2Fstart-from-scratch%2Fdetails.png\&w=2048\&q=75)

A maneira mais fácil de implementar escrows em blockchain."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trustlesswork.com/trustless-work/v1-pt/sdk-blocks-de-escrow/ciclo-de-vida-de-liberacao-unica.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.