# Sign Typed

## Sign Typed Data

{% tabs %}
{% tab title="Code Example" %}
{% code title="sign-typed.tsx" %}

```jsx
import { useRamperService } from '@ramper-v2/native-core';
 
const { signTypedData } = useRamperService();
 
const TYPE_DATA_TEST = JSON.stringify([
  {
    type: "string",
    name: "Message",
    value: "Hi, Alice!",
  },
  {
    type: "uint32",
    name: "A number",
    value: "1337",
  },
])
 
const handleSignTypeData = async () => {
  const result = await signTypedData(TYPE_DATA_TEST, 'eth_signTypedData');
};
 
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}

| Sign Typed Modal                                                                                                                                             | Detailed Data                                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Sign Typed Data - Modal](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsign-typed.ac999179.png\&w=828\&q=75) | ![Sign Typed Data - Detail](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsign-typed-detail.81558858.png\&w=828\&q=75) |
| {% endtab %}                                                                                                                                                 |                                                                                                                                                                      |
| {% endtabs %}                                                                                                                                                |                                                                                                                                                                      |

## Sign Typed Data V3

{% tabs %}
{% tab title="Code Example" %}
{% code title="sign-typed-v3.tsx" %}

```jsx
  import { useRamperService } from '@ramper-v2/native-core';
 
  const { signTypedData } = useRamperService();
 
  const TYPE_DATA_TEST =  JSON.stringify({
  types: {
    EIP712Domain: [
      { name: "name", type: "string" },
      { name: "version", type: "string" },
      { name: "chainId", type: "uint256" },
      { name: "verifyingContract", type: "address" },
    ],
    Person: [
      { name: "name", type: "string" },
      { name: "wallet", type: "address" },
    ],
    Mail: [
      { name: "from", type: "Person" },
      { name: "to", type: "Person" },
      { name: "contents", type: "string" },
    ],
  },
  primaryType: "Mail",
  domain: {
    name: "Ether Mail",
    version: "1",
    chainId: 88,
    verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
  },
  message: {
    from: {
      name: "Cow",
      wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
    },
    to: { name: "Bob", wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB" },
    contents: "Hello, Bob!",
  },
})
 
const handleSignTypeDataV3 = async () => {
  const result = await signTypedData(TYPE_DATA_TEST, 'eth_signTypedData_v3');
};
 
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}

| Sign Typed Modal                                                                                                                                                | Detailed Data                                                                                                                                                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Sign Typed Data V3 - Modal](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsign-typed.ac999179.png\&w=828\&q=75) | ![Sign Typed Data V3 - Detail](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsign-typed-detailv3.ec639e1b.png\&w=828\&q=75) |
| {% endtab %}                                                                                                                                                    |                                                                                                                                                                           |
| {% endtabs %}                                                                                                                                                   |                                                                                                                                                                           |

## Sign Typed Data V4

{% tabs %}
{% tab title="Code Example" %}
{% code title="sign-typed-v4.tsx" %}

```jsx
import { useRamperService } from '@ramper-v2/native-core';
const { signTypedData } = useRamperService();
 
const TYPE_DATA_TEST = JSON.stringify({
  domain: {
    chainId: "88",
    name: "Ether Mail",
    verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
    version: "1",
  },
  message: {
    contents: "Hello, Bob!",
    from: {
      name: "Cow",
      wallets: [
        "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
        "0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF",
      ],
    },
    to: [
      {
        name: "Bob",
        wallets: [
          "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
          "0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57",
          "0xB0B0b0b0b0b0B000000000000000000000000000",
        ],
      },
    ],
    attachment: "0x",
  },
  primaryType: "Mail",
  types: {
    EIP712Domain: [
      { name: "name", type: "string" },
      { name: "version", type: "string" },
      { name: "chainId", type: "uint256" },
      { name: "verifyingContract", type: "address" },
    ],
    Group: [
      { name: "name", type: "string" },
      { name: "members", type: "Person[]" },
    ],
    Mail: [
      { name: "from", type: "Person" },
      { name: "to", type: "Person[]" },
      { name: "contents", type: "string" },
      { name: "attachment", type: "bytes" },
    ],
    Person: [
      { name: "name", type: "string" },
      { name: "wallets", type: "address[]" },
    ],
  },
})
 
const handleSignTypeV4 = async () => {
  const result = await signTypedData(TYPE_DATA_TEST, 'eth_signTypedData_v4');
};
 
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}

| Sign Typed Modal                                                                                                                                                | Detailed Data                                                                                                                                                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![Sign Typed Data V4 - Modal](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsign-typed.ac999179.png\&w=828\&q=75) | ![Sign Typed Data V4 - Detail](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsign-typed-detailv4.abf45777.png\&w=828\&q=75) |
| {% endtab %}                                                                                                                                                    |                                                                                                                                                                           |
| {% endtabs %}                                                                                                                                                   |                                                                                                                                                                           |