Custom Template Package

This repository allows users to create and contribute their own custom templates for interacting with decentralized applications. By creating new templates, users can add specific configurations and functionality that suit their use cases.

Table of Contents

• Custom Template Package
  • Table of Contents
  • Installation
  • Creating a Custom Template
  • Configuring the Custom Template
  • Contributing
  • Folder Structure
    • Example Folder Structure
  • License

Installation

To use this package, clone the repository and install the necessary dependencies:

git clone https://github.com/your-repo/custom-template-package.git
cd custom-template-package
npm install

Creating a Custom Template

To create a custom template:

1. Navigate to the /templates directory.
2. Create a new folder named after your custom template.
3. Inside this folder:
   • Add an index.tsx file to define the template logic and UI.
   • Include an image.png file to represent the template visually.

Example Structure

/src
  ├── /templates
  │   ├── /my-custom-template
  │   │   ├── index.tsx
  │   │   └── image.png
  ├── index.ts
  └── types.ts

Configuring the Custom Template

Each template must export a configuration object that defines its properties and behavior:

1. Edit index.tsx in your custom template folder to define the main component logic.
2. Create the Template Configuration:

const createTemplateConfig = (getClientFactory, addToTxnBuilder) => ({
  name: "My Custom Template",
  description: "Description of the custom template",
  getCustomView: () => <MyCustomTemplateComponent getClientFactory={getClientFactory} addToTxnBuilder={addToTxnBuilder} />,
  bgImage: image,
  docs: "https://docs-link.com",
  isBeta: false,
  comingSoon: false,
  type: "Template",
  supportedChains: [arbitrum.id],
});

export default createTemplateConfig;

3. Register Your Template:
   • Import your custom template in src/index.ts.
   • Add it to the CustomTemplatesFactory and register it inside getTemplatesConfig.

Contributing

To contribute:

1. Fork the repository.
2. Create a new branch for your changes.
3. Add your custom template to the /templates folder.
4. Submit a pull request (PR) with a description of your template and its functionality.

Please ensure that your code follows the existing coding standards and includes necessary documentation.

Folder Structure

Each custom template should be created inside the /templates directory. Every custom template folder should contain the following files:

1. index.tsx: The main React component file where the template logic and UI are defined.
2. image.png: An image that will serve as the background or thumbnail for the template.
3. Any other files required for the custom component (if needed).

Example Folder Structure

Here is the folder structure of the project:

/src
  ├── /templates
  │   ├── /custom-template
  │   │   ├── index.tsx
  │   │   └── image.png
  │   └── /your-custom-template
  │       ├── index.tsx
  │       └── image.png
  ├── index.ts
  └── types.ts

License

This project is open-source and available under the MIT License.