# Sign a transaction with Polkadot{.js} extension in a browser environment

A transaction must be signed before it can be submitted for processing. This means that a transaction needs to be authenticated by a third-party entity, as a wallet, or an extension, which we'll refer to as "the signer." The signer's role is to validate the transaction, officially record it on the blockchain, and cover the transaction fees.

{% hint style="info" %}
If you are not familiar with the process of creating a transaction on the Ternoa chain, we highly suggest first reading the Getting Started section of the documentation with a focus on: 

* [The Ternoa-js architecture ](/getting-started/javascript-sdk/ternoa-js-library/architecture.md)
* [The Ternoa-js workflow](/getting-started/javascript-sdk/ternoa-js-library/workflow.md)
  {% endhint %}

If you've explored the Guides section, you may have noticed a frequently used parameter in many functions: *the Keyring*. The Keyring is essential for managing a collection of keypairs utilized for signing transactions.\
\
In our example, while we use the keyring to focus on the specific content we wish to illustrate, it's important to note that in most real-world decentralized application (dApp) scenarios, the approach differs. Generally, retrieving the keyring from a seed is not a recommended practice to incorporate in your project, and it's typically not favored by dApp users. Asking for or providing a seed phrase should be avoided unless the situation is entirely without risk.

#### Utilizing Polkadot extension, Next.js, and TypeScript:

In the code snippet below, we will step by step cover a signing use-case to create a basic NFT on the chain using the @polkadot/extension-dapp and uploading your File and Metadata on IPFS.

Please, note that this solution is not the only one. **Feel free to use any provider that would suit best your dApp.**

*This code snipped is designed to work in a **Next-js environment**. According to Next-js server-side components rules, the import of the @polkadot/extension-dapp extension library might need to be slightly adapted to work in your javascript environment.*

```typescript
import {
  checkTransactionSuccess,
  createNftTx,
  Errors,
  getRawApi,
  NftMetadataType,
  query,
  submitTxBlocking,
  TernoaIPFS,
  WaitUntil,
  File,
  NFTCreatedEvent,
} from "ternoa-js";

export const createAndSignNFT = async (
  file: File,
  metadata: NftMetadataType,
  ipfsClient: TernoaIPFS,
  address: string
) => {
  try {
    //1 - Store the File and Metadata on IPFS
    const { Hash } = await ipfsClient.storeNFT(file, metadata);
    //2 - generate tx to sign
    const txHex = await createNftTx(Hash);

    //3.1 - Generate a nonce
    const nonce = (
      await query("system", "account", [address])
    ).nonce.toNumber();
    //3.2- Connect to the extension you want to use to get an injector (here we use directly Polkadot extension)
    const { web3FromAddress } = await import("@polkadot/extension-dapp");
    const injector = await web3FromAddress(address);
    const signer = injector?.signer;

    //4.1 - Retrieve Ternoa API
    const api = getRawApi();
    //4.2- Sign transaction using both the nonce and the signer
    const signedTx = (
      await api.tx(txHex).signAsync(address, { nonce, signer })
    ).toHex();

    //5.1 - Submit the signed transaction
    const { events } = await submitTxBlocking(
      signedTx,
      WaitUntil.BlockInclusion
    );
    //5.2 - Return the filtered NFTCreatedEvent
    return events.findEventOrThrow(NFTCreatedEvent);
  } catch (error) {
    console.log(error);
  }
};
```

*We suggest breaking down certain portions of this function into multiple modular and reusable atomic functions. This example illustrates a comprehensive and complete workflow to enhance comprehension.*


---

# Agent Instructions: 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.ternoa.network/build-1/javascript/ternoa-js-library-utilities/sign-a-transaction-with-polkadot-.js-extension-in-a-browser-environment.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.