Examples

This section provides practical examples of how to create and use different types of Actions. Each example includes a description of the Action's purpose, the complete Action object, and explanations of key components.

1.6.1 Simple Transfer Action

Here's an example of a simple transfer action that allows users to donate a fixed amount of ETH:

import { Action, TransferAction } from '@actions/sdk';

const donationAction: Action = {
    title: "Donate ETH",
    icon: "<https://example.com/eth-icon.png>",
    description: "Support our project by donating 0.1 ETH",
    label: "Donate Now",
    links: [
        {
            type: "transfer-action",
            label: "Donate 0.1 ETH",
            address: {
                type: "constant",
                id: "projectAddress",
                value: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e"
            },
            value: "100000000000000000", // 0.1 ETH in wei
            success: {
                message: "Thank you for your donation of 0.1 ETH!"
            },
            error: {
                message: "Donation failed. Please ensure you have sufficient funds and try again."
            }
        } as TransferAction
    ],
    error: {
        message: "An error occurred while processing the donation. Please try again later."
    }
};

Key points about this example:

• It uses a TransferAction to send a fixed amount of ETH (0.1) to a specified address.

• The recipient address is defined as a constant parameter.

• Success and error messages are provided for both the transfer action and the overall action.

1.6.2 Donation Action

This example demonstrates a more complex Action that allows users to donate DAI tokens with various options:

import { Action, ActionError, LinkedAction } from 'actions-sdk';

const error: ActionError = {
    message: 'Error displaying blink',
};

const links: LinkedAction[] = [
    {
        type: 'tx',
        label: 'Donate',
        chainId: 1,
        txData: {
            address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
            abi: 'transfer(address,uint256)',
            parameters: [
                {
                    type: 'text',
                    id: 'WALLET_ADDRESS',
                    scope: 'GLOBAL',
                    label: 'WALLET_ADDRESS',
                    required: true,
                },
                {
                    type: 'number',
                    id: 'AMOUNT',
                    scope: 'USER',
                    label: 'Amount',
                    required: true,
                },
            ],
        },
        success: {
            message: 'Donation successful!',
        },
        error: {
            message: 'Donation failed!',
        },
    },
    {
        type: 'tx',
        label: 'Donate 10 DAI',
        chainId: 1,
        txData: {
            address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
            abi: 'transfer(address,uint256)',
            parameters: [
                {
                    type: 'text',
                    id: 'WALLET_ADDRESS',
                    scope: 'GLOBAL',
                    label: 'WALLET_ADDRESS',
                    required: true,
                },
                {
                    type: 'constant',
                    id: 'AMOUNT',
                    value: 10000000000000000000,
                },
            ],
        },
        success: {
            message: 'Donation successful!',
        },
        error: {
            message: 'Donation failed!',
        },
    },
    {
        type: 'tx',
        label: 'Donate 50 DAI',
        chainId: 1,
        txData: {
            address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
            abi: 'transfer(address,uint256)',
            parameters: [
                {
                    type: 'text',
                    id: 'WALLET_ADDRESS',
                    scope: 'GLOBAL',
                    label: 'WALLET_ADDRESS',
                    required: true,
                },
                {
                    type: 'constant',
                    id: 'AMOUNT',
                    value: 50000000000000000000,
                },
            ],
        },
        success: {
            message: 'Donation successful!',
        },
        error: {
            message: 'Donation failed!',
        },
    },
    {
        type: 'tx',
        label: 'Donate 100 DAI',
        chainId: 1,
        txData: {
            address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
            abi: 'transfer(address,uint256)',
            parameters: [
                {
                    type: 'text',
                    id: 'WALLET_ADDRESS',
                    scope: 'GLOBAL',
                    label: 'WALLET_ADDRESS',
                    required: true,
                },
                {
                    type: 'constant',
                    id: 'AMOUNT',
                    value: 100000000000000000000,
                },
            ],
        },
        success: {
            message: 'Donation successful!',
        },
        error: {
            message: 'Donation failed!',
        },
    },
    {
        type: 'link',
        label: 'Learn more',
        href: '<https://donate-example.com>',
    },
];

export const donationAction: Action = {
    title: 'Donation Blink',
    icon: '<https://media.istockphoto.com/id/1353332258/photo/donation-concept-the-volunteer-giving-a-donate-box-to-the-recipient-standing-against-the-wall.jpg?s=612x612&w=0&k=20&c=9AL8Uj9TTtrbHpM78kMp9fqjT_8EqpEekjdixeKUzDw=>',
    description: 'Donate to the cause',
    label: 'Donate',
    links: links,
    error: error,
};

Key points about this example:

• It provides multiple donation options: a custom amount and fixed amounts of 10, 50, and 100 DAI.

• Each donation option is represented as a separate transaction (tx) in the links array.

• The DAI token contract address is used for all transactions.

• Global inputs (like the user's wallet address) are used alongside user inputs and constants.

• A "Learn more" link is provided for additional information.

This example showcases how to create a more complex Action with multiple options for the user, demonstrating the flexibility of the Actions SDK in handling various scenarios.

1.6.3 Multi Transaction Action

This example showcases a more complex Action that involves multiple transactions for a token swap:

import {
    Action,
    ActionError,
    LinkedAction,
    InputScope,
    TxMultiAction,
    ConstantParameter,
    chainId,
    globalInputs,
} from 'actions-sdk';

const error: ActionError = {
    message: 'Error displaying swap action',
};

const links: LinkedAction[] = [
    {
        type: 'tx-multi',
        label: 'Swap Tokens',
        chainId: chainId.ETHEREUM_MAINNET,
        txData: [
            {
                address: '0xTOKEN_ADDRESS', // Address of the token to be swapped
                abi: 'approve(address,uint256)',
                parameters: [
                    {
                        type: 'constant',
                        id: 'SWAP_ROUTER_ADDRESS',
                        value: '0xSWAP_ROUTER_ADDRESS', // Address of the swap router
                    },
                    {
                        type: 'number',
                        id: 'AMOUNT_TO_SWAP',
                        scope: 'USER',
                        label: 'Amount to Swap',
                        required: true,
                    },
                ],
            },
            {
                address: '0xSWAP_ROUTER_ADDRESS', // Address of the swap router
                abi: 'swapExactTokensForTokens(uint256,uint256,address[],address,uint256)',
                parameters: [
                    {
                        type: 'referenced',
                        refParameterId: 'AMOUNT_TO_SWAP',
                    },
                    {
                        type: 'number',
                        id: 'MIN_AMOUNT_TO_RECEIVE',
                        scope: 'USER',
                        label: 'Minimum Amount to Receive',
                        required: true,
                    },
                    {
                        type: 'constant',
                        id: 'TOKEN_ADDRESSES',
                        value: ['0xTOKEN_A_ADDRESS', '0xTOKEN_B_ADDRESS'],
                    },
                    {
                        type: 'text',
                        id: 'WALLET_ADDRESS',
                        scope: 'GLOBAL',
                        label: globalInputs.WALLET_ADDRESS,
                        required: true,
                    },
                    {
                        type: 'constant',
                        id: 'UNIX_TIMESTAMP',
                        value: globalInputs.UNIX_TIMESTAMP,
                    },
                ],
            },
        ],
        success: {
            message: 'Swap successful!',
        },
        error: {
            message: 'Swap failed!',
        },
        displayConfig: {
            displayMode: 'combined',
            renderedTxIndex: 1,
        },
    },
    {
        type: 'link',
        label: 'Learn more about swapping',
        href: '<https://swap-info-example.com>',
    },
];

export const multiTransactionAction: Action = {
    title: 'Token Swap',
    icon: '<https://example.com/swap-icon.png>',
    description: 'Swap your tokens easily and efficiently',
    label: 'Swap',
    links: links,
    error: error,
};

Key points about this example:

• It uses a tx-multi type to perform a token swap, which involves multiple transactions.

• The first transaction approves the swap router to spend the user's tokens.

• The second transaction performs the actual token swap.

• It uses a mix of constant parameters, user inputs, and global inputs.

• The displayConfig is set to show the transactions as a combined action, with the second transaction (the actual swap) being the primary one displayed.

• A "Learn more" link is provided for users who want additional information about token swapping.

This example demonstrates how to create more complex, multi-step blockchain interactions using the Actions SDK, showcasing its ability to handle sophisticated DeFi operations.

1.6.4 NFT Sale Action

This example demonstrates how to create an Action for selling an NFT:

typescript
Copy
import { Action, ActionError, LinkedAction, chainId } from 'actions-sdk';

const error: ActionError = {
    message:
        'NFT Sale Action: An unexpected error occurred during the NFT sale process',
};

const links: LinkedAction[] = [
    {
        type: 'tx',
        label: 'Buy Milady #234 for PLACEHOLDER_VALUE ETH',
        chainId: chainId.ETHEREUM_MAINNET,
        txData: {
            address: '0x5Af0D9827E0c53E4799BB226655A1de152A425a5',// NFTActionHelper contract address
            abi: 'fulfillOrder(address,uint256)',
            parameters: [
                {
                    type: 'constant',
                    id: 'tokenAddress',
                    value: '0x5Af0D9827E0c53E4799BB226655A1de152A425a5',
                },
                {
                    type: 'constant',
                    id: 'tokenId',
                    value: 'PLACEHOLDER_TOKEN_ID',
                },
            ],
            value: 'PLACEHOLDER_VALUE',// Should be price of NFT in wei
        },
        success: {
            message: 'NFT Sale successful! Check your wallet!',
        },
        error: {
            message: 'NFT Sale failed!',
        },
    },
];

export const nftSaleAction: Action = {
    title: 'Collection Name #tokenID',// e.g. "Milady #234"
    icon: 'https://media.istockphoto.com/id/1353332258/photo/donation-concept-the-volunteer-giving-a-donate-box-to-the-recipient-standing-against-the-wall.jpg?s=612x612&w=0&k=20&c=9AL8Uj9TTtrbHpM78kMp9fqjT_8EqpEekjdixeKUzDw=',
    description: 'Buy Milady #234',
    label: 'NFT Sale',
    links: links,
    error: error,
};

Key points about this example:

• It uses a tx type to perform the NFT sale transaction.

• The action is set up to interact with an NFTActionHelper contract to fulfill the order.

• Placeholder values are used for the token ID and price, which would be replaced with actual values in a real implementation.

• The action is configured for the Ethereum mainnet.

1.6.5 ERC-20 Payment Action

This example shows how to create an Action for making a payment using an ERC-20 token:

typescript
Copy
import { Action, ActionError, LinkedAction, chainId } from 'actions-sdk';

const error: ActionError = {
    message:
        'Payment Action: An unexpected error occurred during the payment process',
};

const links: LinkedAction[] = [
    {
        type: 'tx',
        label: 'Subscribe for 10 DAI',
        chainId: chainId.ETHEREUM_MAINNET,
        txData: {
            address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',// Token contract address
            abi: 'transfer(address,uint256)',
            parameters: [
                {
                    type: 'constant',
                    id: 'recipient',
                    value: '0xd8da6bf26964af9d7eed9e03e53415d37aa96045',// Recipient address
                },
                {
                    type: 'constant',
                    id: 'amount',
                    value: '10000000000000000000',
                },
            ],
        },
        success: {
            message: 'Payment successful! Check your email for the newsletter',
        },
        error: {
            message: 'Payment failed! Please try again later',
        },
    },
];

export const paymentActionERC20: Action = {
    title: 'Monthly newsletter subscription',
    icon: 'https://media.istockphoto.com/id/1353332258/photo/donation-concept-the-volunteer-giving-a-donate-box-to-the-recipient-standing-against-the-wall.jpg?s=612x612&w=0&k=20&c=9AL8Uj9TTtrbHpM78kMp9fqjT_8EqpEekjdixeKUzDw=',
    description: 'Subscribe to our monthly newsletter for 10 DAI',
    label: 'Payment Action',
    links: links,
    error: error,
};

Key points about this example:

• It uses a tx type to perform an ERC-20 token transfer.

• The action is set up to transfer 10 DAI tokens to a specified recipient address.

• The token contract address for DAI is used.

• The action is configured for the Ethereum mainnet.

1.6.6 Native Token (ETH) Payment Action

This example demonstrates how to create an Action for making a payment using the native token (ETH):

typescript
Copy
import { Action, ActionError, LinkedAction, chainId } from 'actions-sdk';

const error: ActionError = {
    message:
        'Payment Action: An unexpected error occurred during the payment process',
};

const links: LinkedAction[] = [
    {
        type: 'transfer-action',
        label: 'Subscribe for 0.01 ETH',
        chainId: chainId.ETHEREUM_MAINNET,
        address: {
            type: 'constant',
            id: 'recipient',
            value: '0xd8da6bf26964af9d7eed9e03e53415d37aa96045',// Recipient address
        },
        value: {
            type: 'constant',
            id: 'price',
            value: '10000000000000000',
        },
        success: {
            message: 'Payment successful! Check your email for the newsletter',
        },
        error: {
            message: 'Payment failed! Please try again later',
        },
    },
];

export const paymentActionNative: Action = {
    title: 'Monthly newsletter subscription',
    icon: 'https://media.istockphoto.com/id/1353332258/photo/donation-concept-the-volunteer-giving-a-donate-box-to-the-recipient-standing-against-the-wall.jpg?s=612x612&w=0&k=20&c=9AL8Uj9TTtrbHpM78kMp9fqjT_8EqpEekjdixeKUzDw=',
    description: 'Subscribe to our monthly newsletter for 0.01 ETH',
    label: 'Payment Action',
    links: links,
    error: error,
};

Key points about this example:

• It uses a transfer-action type, which is specifically designed for native token transfers.

• The action is set up to transfer 0.01 ETH to a specified recipient address.

• The value is specified in wei (10000000000000000 wei = 0.01 ETH).

• The action is configured for the Ethereum mainnet.