Forem: Karthi Keyan

Openclaw: Cron ⚔️ Heartbeat

Karthi Keyan — Fri, 13 Mar 2026 05:26:58 +0000

Both systems are just different ways to trigger an Agent Turn (an LLM inference call). The difference is in the Gateway Orchestration and the Context Injection.

1. The Heartbeat: The "Main Loop"

Architecture: Periodic Polling (Stateful)

Where it lives: The Heartbeat is a fixed timer running inside the Main Session event loop.
The Technical Flow:
1. Every 30m, the Gateway injects a System Event into the message history.
2. The Gateway gathers the current Main Session context (your last 50 messages, files, current project state).
3. It appends the content of HEARTBEAT.md as a prompt.
4. It sends the entire history + heartbeat prompt to the LLM.
Key Characteristic: It is Cumulative. The LLM knows what you just said because the Heartbeat happens inside your existing chat window.

2. The Cron: The "Sidecar Runner"

Architecture: Scheduler (Stateless by default)

Where it lives: A standalone scheduler (croner) that monitors ~/.openclaw/cron/jobs.json.
The Technical Flow (Isolated Mode):
1. The timer hits 0.
2. The Gateway creates a New, Empty Session (e.g., cron:job-123).
3. It injects a specific message (e.g., "Generate report").
4. It sends only that message to the LLM.
5. Once the LLM finishes, the Gateway extracts the "Summary" and sends it to your output channel (Telegram/Slack).
6. The session is discarded.
Key Characteristic: It is Isolated. The LLM has zero knowledge of your current conversation unless you explicitly pass it in.

Comparison Table: Technical Specs

Feature	Heartbeat	Cron (Isolated)
Trigger	Gateway internal interval	croner library (Unix-style)
Process	Part of the main agent thread	Spawns a dedicated agent turn
Context	Full (History + Workspace)	Minimal (Lightweight context)
State	Persistent in Main Session	Ephemeral (Wiped after run)
Timing	Approximate (± mins)	Precise (Staggered by 0-5m)
Outcome	Appears in your main chat	Delivered via "Announce" mode

"Is Cron just a Python script?"

No. If you want to run a "Python script" without an AI, you don't use OpenClaw Cron; you use a standard Linux Crontab.

In OpenClaw, a Cron Job is a Scheduled Prompt. The "Task" it does is:

Wake up the Agent.
Tell the Agent: "Go execute this specific Tool/Prompt."
The Agent uses its reasoning to decide how to call the tool (e.g., exec_tool, Google Search).

Why does Heartbeat exist if we have Cron?

Token Efficiency. If you have 10 things to check (Weather, Gmail, GitHub, Jira, Calendar), and you use Cron, you are starting 10 separate LLM calls. That's 10x the "cold start" token overhead.

With Heartbeat, the Gateway sends one prompt: "Here is a list of 10 things to check. Do them all now." The LLM processes all 10 in a single inference pass, which is significantly cheaper and faster for "background awareness."

Summary for the Architect:

Heartbeat = A "Checklist" injected into the Main Process to maintain background awareness.
Cron = A "Lambda Function" that wakes up a Sub-Process to do a specific job and then dies.

Resolving Agent "Terminal Blindness"

Karthi Keyan — Sat, 20 Dec 2025 05:04:28 +0000

Overview

"Terminal Blindness" is a condition where an AI coding agent can execute terminal commands but fails to see the resulting standard output (stdout) or standard error (stderr). This is almost always caused by shell integrations and "fancy" prompts that emit non-printable ANSI escape sequences and OSC (Operating System Command) codes.

Works for Kiro & Antigravity AI IDE

The Problem: The "Noise" vs. "Signal" Conflict

1. Escape Sequence Interference

Modern shells often use plugins like ble.sh, Starship, Atuin, or IDE-specific integrations (like VS Code or Kiro). These tools emit hidden sequences to the terminal to handle:

Command success/failure indicators (OSC 633)
Current working directory tracking
Syntax highlighting
Prompt "decorations"

2. The Agent's Perspective

When an agent reads the terminal buffer, its capture tools are designed to filter raw text. If a shell command is wrapped in heavy escape sequences (e.g., a PROMPT_COMMAND that triggers before and after every execution), the capture tool often sees a "mangled" stream. In many cases, the tool fails to synchronize with the output, resulting in an empty string being returned to the agent.

The Solution: The "Early Return" Strategy

The fix involves two architectural changes:

A. Environment Separation

We split the shell configuration into two distinct categories:

Machine Environment (~/.bash_env.sh): Tools, PATHs, SDKs, and toolchain initializations (NVM, Cargo, Flutter, Brew). These emit no output.
Interactive Shell (~/.bashrc): UI/UX enhancements, completions, and shell integrations.

B. Agent Detection & Early Return

We implement a detection block at the very top of ~/.bashrc that triggers when the ANTIGRAVITY_AGENT environment variable is present.

# 1. Load the essential environment first
if [ -f ~/.bash_env.sh ]; then
    . ~/.bash_env.sh
fi

# 2. Detect the agent and short-circuit the interactive "fluff"
if [[ -n "$ANTIGRAVITY_AGENT" ]]; then
    export PS1='$ '      # Pure, simple prompt
    unset PROMPT_COMMAND # Remove hooks that emit invisible codes
    return               # STOP processing the rest of .bashrc
fi

# 3. Everything below this line only runs for the HUMAN user
# (Completions, Shell integrations, aliases, etc.)

Impact & Affected Environments

Operating Systems

This issue is OS-agnostic but is most prevalent on systems where users favor customized developer environments:

Fedora/Ubuntu/Arch Linux: High prevalence due to easy access to ble.sh, zsh, and oh-my-zsh.
macOS: Extremely common with Users running iTerm2 integrations or zsh themes.
Windows (WSL2): Common when users mirror their Linux setups.

Specific Software Triggers

You are likely to encounter this if you use:

Shell Integrations: OSC 633 (VS Code), OSC 133, or IDE-specific shell hooks.
Enhanced Bash: ble.sh is a frequent culprit as it re-implements much of the bash input/output logic.
Prompt Managers: Starship, Oh My Posh, or Powerlevel10k.
History Tools: Atuin or other tools that hook into the command lifecycle.

Summary of Benefits

Agent Sight: Crystal-clear stdout/stderr visibility for the AI.
Zero Human Trade-offs: The user keeps their fancy prompt and workflow tools untouched.
Speed: The agent's shell starts faster by skipping unnecessary completions and UI logic.

Reference

Why I Ditched ChatGPT and Cursor for OpenCode: A Smarter, Cheaper Way to Build AI Agents

Karthi Keyan — Thu, 20 Nov 2025 07:35:56 +0000

As developers, we're always chasing efficiency—faster workflows, lower costs, and more control over our tools. For the longest time, I relied on proprietary AI chat platforms like ChatGPT, Cursor and Claude for quick prototyping, research, and even code generation. But let's be honest: they're convenient, but they're also inefficient and surprisingly expensive in the long run. If you're tired of opaque pricing, vendor lock-in, and limited customization, it's time to explore open-source alternatives like OpenCode. In this post, I'll share why I made the switch, how OpenCode saves you money with bring-your-own-keys (BYOK), and a simple hack to add web search functionality using Tavily's MCP integration. 🚀

This won't take more than 5 - 10 minutes, bookmark this blog & read this blog when you are free

The Hidden Costs of Proprietary AI Chats

Platforms like ChatGPT (from OpenAI) and Claude (from Anthropic) are fantastic for casual use. You log in, type a prompt, and get instant results. But dig deeper, and the inefficiencies pile up:

Overhead and Inefficiency: Every interaction routes through their servers, which means latency from network hops, rate limits during peak times, and no direct control over the underlying models. If you're building agents or automating tasks, you're constantly context-switching between the chat interface and your IDE—copy-pasting code, debugging in isolation, and losing productivity. 😩
Cost Creep: Subscriptions seem affordable at first (e.g., $20/month for ChatGPT Plus), but they scale poorly. Heavy users hit token limits quickly, leading to upgrades or per-API-call billing. Worse, you're paying for bundled features you might not need, like image generation or voice modes. In my experience, what starts as "just a quick query" balloons into hundreds of dollars annually—especially if you're experimenting with multiple models. 💸
Lack of Flexibility: You're locked into their ecosystem. Want to swap models mid-project? Tough luck without rewriting prompts. And forget about fine-tuning or integrating custom tools without jumping through hoops.

Enter OpenCode: an open-source AI code interpreter that flips the script by putting you in the driver's seat.

OpenCode: Bring Your Own Keys for Ultimate Control and Savings

OpenCode is a lightweight, local-first tool that turns your machine into a powerful AI agent hub. It's designed for developers who want to run AI models directly in their workflow—think VS Code or Cursor integration on steroids. Here's why it's a game-changer:

Bring Your Own Keys (BYOK): No more proprietary lock-in. OpenCode lets you plug in API keys from any provider, giving you access to a wide range of models without the middleman markup. 🔑
Cost-Effective with OpenRouter: One of my favorite integrations is OpenRouter, a model-agnostic API aggregator. You can purchase credits directly (starting as low as a few cents per million tokens) and route requests to the best/cheapest model for the job—be it Grok, GPT, Claude, or open-source options like Llama. For example:
- Sign up at openrouter.ai.
- Buy credits (e.g., $10 gets you millions of tokens depending on the model).
- Add your OpenRouter API key to OpenCode's config.

This setup is way cheaper than flat subscriptions. I've cut my AI costs by 70% by optimizing model selection—using cheaper ones for simple tasks and premium for complex reasoning. 📉

Seamless Developer Workflow: OpenCode runs as an extension or standalone app, embedding AI right into your terminal or editor. It supports multi-model chaining, plan-mode execution, and even REPL-like interactions for iterative coding. No more tab-switching; everything happens in one place. 💻

But like any tool, it's not perfect. One key disadvantage? Out-of-the-box, OpenCode lacks built-in web search capabilities. Your agents can't fetch real-time data from the internet, which limits tasks like research or dynamic querying. Fortunately, this is easy to fix with MCP (Model Context Protocol) servers.

Adding Web Search to OpenCode with Tavily MCP

MCP is OpenCode's extensible protocol for integrating external tools, and Tavily (an AI-optimized search API) has an official MCP server that's dead simple to set up. This adds robust web search to your agents—think semantic queries, factual summaries, and citations—all without leaving your workflow. 🔍

Here's how to do it on Fedora Linux (tested on Fedora 42 as of November 2025):

Get a Tavily API Key: Sign up at https://app.tavily.com/ and grab a free dev key (1,000 credits/month—enough for hundreds of searches). For example: tvly-dev-YourKeyHere.
Configure Globally in OpenCode: OpenCode uses a global config file for MCP servers, located at ~/.config/opencode/opencode.jsonc (the .jsonc extension allows comments for clarity). If the file doesn't exist, create it:

mkdir -p ~/.config/opencode
touch ~/.config/opencode/opencode.jsonc

Open the file in your editor (e.g., nano ~/.config/opencode/opencode.jsonc) and add this:

 {
     "$schema": "https://opencode.ai/config.json",
     "mcp": {
       "tavily": {
         "type": "remote",
         "url": "https://mcp.tavily.com/mcp/?tavilyApiKey=tvly-dev-YourKeyHere",  // Replace with your actual key
         "enabled": true
       }
     }
   }

Save and restart OpenCode.

Test It Out: In OpenCode, start a new session and prompt something like: "Search the web for the latest Fedora updates." Your agent will use Tavily's tavily_search tool to fetch real-time results with sources. Boom—web-enabled AI at no extra cost beyond Tavily's credits.

This setup transforms OpenCode from a solid code interpreter into a full-fledged research agent, all while keeping costs low and control high.

Wrapping Up: Make the Switch Today

If you're still grinding through Perplexity tabs or Gemini conversations, give OpenCode a shot. It's free, open-source, and empowers you to build cost-effective AI workflows with BYOK and OpenRouter integrations. Sure, adding features like search requires a quick config tweak—but that's the beauty of open tools: they're hackable.

I've been using this stack for months, and it's saved me time and money. Download OpenCode from https://opencode.ai/, grab those keys, and start experimenting. Questions? Drop a comment below—I'd love to hear your setups!

My blog is just a starting point, the possibilites are endless. What open-source AI tools are you using? Share in the comments! 🌟

X Post Enhancer: Making Your Social Posts Smarter

Karthi Keyan — Mon, 27 Jan 2025 07:47:53 +0000

What I Built

I built an AI agent that enhances X (formerly Twitter) posts by providing logical analysis and improvements. The agent helps users avoid common mistakes, ensures mathematical accuracy, and improves the overall quality of social media content.

The agent serves as a productivity tool for:

Content creators needing quick post validation
Social media managers handling multiple posts
Anyone wanting to improve their X post quality

How It Works

The agent follows a simple 3-step process:

Takes user input as a draft X post
Analyzes the content for logical consistency
Provides enhanced output with corrections and improvements

Key Features

Logical reasoning validation
Mathematical accuracy checking
Extraneous detail detection
Clear explanation of corrections
User-friendly interface

Technical Implementation

The agent uses a straightforward workflow:

The implementation includes:

Text area input for draft posts
OpenAI integration for enhancement
Formatted output display
Simple 5-second runtime

Agent.ai Experience

Building with Agent.ai was surprisingly intuitive. The Builder interface made it easy to:

Set up input/output flows
Configure AI responses
Test and iterate quickly

The most challenging aspect was fine-tuning the agent's responses to be both accurate and helpful while maintaining a natural conversational tone.

Future Improvements

Add support for image analysis
Implement thread enhancement
Include engagement optimization suggestions
Add style consistency checking

Try It Yourself

The agent is available in the free, making it accessible to anyone looking to improve their X posts. Feel free to test it with your own content and share your feedback!

https://agent.ai/agent/x_post_enhancer

Built with Agent.ai Builder using OpenAI integration

#flutter #appdev

Karthi Keyan — Mon, 20 Jan 2025 09:47:38 +0000

Litigence AI: Transforming Legal Awareness with Technology

SURENDAR K S ・ Jan 20 '25

#devchallenge #githubchallenge #webdev #ai

Building Mystic Vault: A Step-by-Step Guide to Creating a Simple Ethereum DApp from Scratch 🔮✨ ( 30 min )

Karthi Keyan — Wed, 02 Oct 2024 16:49:41 +0000

Embark on a mystical journey to build **Mystic Vault, an enchanting Ethereum Decentralized Application (DApp) that allows users to store and retrieve their secret spells. In this comprehensive guide, we’ll integrate the provided HTML, CSS, JavaScript, and Solidity code into a fully functional DApp. Let’s weave some magic!

Introduction
Prerequisites
Project Structure
Setting Up the Development Environment
Writing the Smart Contract
Compiling and Deploying the Smart Contract
Building the Frontend
Connecting Frontend to Smart Contract
Testing the DApp
Conclusion
Clone the Repository

Introduction

Decentralized Applications (DApps) harness the power of blockchain technology to create secure and transparent platforms. Mystic Vault is a simple yet magical DApp that allows users to store and retrieve their secret spells on the Ethereum blockchain. This guide will walk you through every step, from writing the smart contract to building an interactive frontend.

Ready to conjure up some blockchain magic? Let’s get started! 🪄

Prerequisites

Before we begin, ensure you have the following installed:

Node.js and npm: Download Node.js
Git: Download Git
Ethereum Wallet Extension: Install MetaMask
Code Editor: Such as Visual Studio Code

With these tools in place, you’re all set to begin your mystical development journey!

Project Structure

Here’s an overview of the project structure we’ll be working with:

MysticVault/
├── contracts/
│   └── SimpleStorage.sol
├── frontend/
│   ├── index.html
│   ├── app.js
│   ├── styles.css
├── hardhat.config.js
├── package.json
└── artifacts/

Setting Up the Development Environment

1. Create and Navigate to the Project Directory

mkdir MysticVault
cd MysticVault

2. Initialize npm and Install Dependencies

npm init -y
npm install --save-dev hardhat @nomicfoundation/hardhat-toolbox web3

3. Initialize Hardhat Project

npx hardhat init

Select “Create a JavaScript project” when prompted.
Accept default settings and install dependencies.

4. Update hardhat.config.js

require("@nomicfoundation/hardhat-toolbox");
require("@nomicfoundation/hardhat-ignition");

module.exports = {
  solidity: "^0.8.27",
  networks: {
    hardhat: {
      chainId: 1337,
    },
  },
};

Writing the Smart Contract

Create `SimpleStorage.sol` in the `contracts` Directory

// SPDX-License-Identifier: MIT
pragma solidity 0.8.27;

contract SimpleStorage {
    string private data;

    // Function to set the secret spell
    function setSecretSpell(string memory _data) public {
        data = _data;
    }

    // Function to get the secret spell
    function getSecretSpell() public view returns (string memory) {
        return data;
    }
}

Explanation:

State Variable: data stores the secret spell as a private string.
setSecretSpell Function: Allows users to store a new secret spell.
getSecretSpell Function: Retrieves the stored secret spell.

Compiling and Deploying the Smart Contract

1. Compile the Contract

npx hardhat compile

2. Deploy the Contract Using Hardhat

Add the Deployment Code

Open ignition/modules/SimpleStorage.js and add the following code:

// This setup uses Hardhat Ignition to manage smart contract deployments.
// Learn more about it at https://hardhat.org/ignition

const { buildModule } = require("@nomicfoundation/hardhat-ignition/modules");

module.exports = buildModule("SimpleStorageModule", (m) => {
  const simpleStorage = m.contract("SimpleStorage", []);
  return { simpleStorage };
});

Explanation:

Import buildModule: This function helps define deployment modules.
Define Module Name: "SimpleStorageModule" is an arbitrary name for the module.
Deploy Contract: m.contract("SimpleStorage", []) deploys the SimpleStorage contract without constructor arguments.

(Insert this image screenshot here)

Deploying the Smart Contract Using Hardhat Ignition

Start the Hardhat Local Node

In one terminal window, run:
```
npx hardhat node
```
This starts a local Ethereum node provided by Hardhat, running on http://127.0.0.1:8545.

Deploy Using Ignition

Open a new terminal window and execute the deployment command:
```
npx hardhat ignition deploy ./ignition/modules/SimpleStorage.js --network localhost
```
then press y and wait for output similar to this

Interacting with the Smart Contract

Now that our smart contract is deployed, let’s interact with it to ensure it’s functioning correctly.

Connect to the Hardhat Network

Since Hardhat provides JSON-RPC endpoints, we can use ethers.js in a script or use the Hardhat console.
Using Hardhat Console

Run the Hardhat console:
```
npx hardhat console --network localhost
```
(Insert this image screenshot here)

Interact with SimpleStorage

a. Retrieve the Contract Instance

const SimpleStorage = await ethers.getContractFactory("SimpleStorage");
const simpleStorage = await SimpleStorage.attach("0xYourContractAddress");

Replace 0xYourContractAddress with the actual address output from the deployment step.

b. Get Initial Data

const initialData = await simpleStorage.getSecretSpell();
console.log(initialData); // Should output an empty string

c. Set New Data

await simpleStorage.setSecretSpell("Abra Kadabra");

d. Retrieve Updated Data

const updatedData = await simpleStorage.getSecretSpell();
console.log(updatedData); // Should output "Abra Kadabra"

(Insert this image screenshot here)

This confirms that our smart contract can store and retrieve data as intended.

Exit Hardhat Console
```
.exit
```
Create a folder ‘test’ and create a file with name ‘debugInteract.js’ and past the following code

import Web3 from 'web3';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

// Resolve __dirname in ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Load ABI from the JSON file
const abiPath = path.resolve(__dirname, '../artifacts/contracts/SimpleStorage.sol/SimpleStorage.json');
const abiFile = JSON.parse(fs.readFileSync(abiPath, 'utf-8'));
const contractABI = abiFile.abi;

// Contract address (replace with your deployed address)
const contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';

const main = async () => {
  try {
    console.log("Setting up Web3 provider...");

    // Initialize Web3 with your provider (e.g., local node)
    const web3 = new Web3('http://localhost:8545'); // Update if using a different provider

    console.log("Fetching accounts...");
    const accounts = await web3.eth.getAccounts();
    console.log("Available Accounts:", accounts);

    if (accounts.length === 0) {
      throw new Error("No accounts available. Ensure your node has unlocked accounts.");
    }

    console.log("Creating contract instance...");
    const contract = new web3.eth.Contract(contractABI, contractAddress);
    console.log(`Contract deployed at: ${contract.options.address}`);

    console.log("Calling getData()...");
    const data = await contract.methods.getSecretSpell().call({ from: accounts[0] });
    console.log("Data retrieved from contract:", data);

    // Example: Setting new data (uncomment if needed)
    /*
    const newData = "Hello, Mystic Vault!";
    console.log(`Sending transaction to setData("${newData}")...`);
    const receipt = await contract.methods.setData(newData).send({ from: accounts[0], gas: 300000 });
    console.log("Transaction successful with receipt:", receipt);

    // Verify the update
    const updatedData = await contract.methods.getData().call({ from: accounts[0] });
    console.log("Updated Data:", updatedData);
    */

  } catch (error) {
    console.error("An error occurred during contract interaction:", error);
  }
};

main();

add { ... "type": "module", ... } inside package.json then run

node test/debugInteract.js

Building the Frontend

1. Create the Frontend Directory and Files

Navigate to the project root and create the frontend directory:

mkdir frontend
cd frontend

Create the following files inside frontend:

index.html
app.js
styles.css

2. Write the HTML Structure (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Mystic Vault</title>

  <!-- Include Magic Animations CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magic/1.1.0/magic.css">

  <!-- Include Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

  <!-- Include Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- Link to External CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Sparkles Background -->
  <div class="sparkles"></div>

  <!-- Header with Padlock and Sparkles Icons -->
  <h1 class="magictime puffIn">
    <i class="fas fa-lock icon" aria-label="Padlock"></i>
    Mystic Vault
    <i class="fas fa-magic icon" aria-label="Sparkles"></i>
  </h1>

  <!-- Store Secret Spell Section with Wand Icon -->
  <div class="store-container">
    <input type="text" id="inputData" placeholder="Enter your secret spell here..." aria-label="Secret Spell Input" />
    <button id="setData" class="magictime puffIn" aria-label="Store Secret Spell">
      <i class="fas fa-wand-magic icon"></i>Store Spell
    </button>
  </div>

  <!-- Retrieve Secret Spell Section with Orb Icon -->
  <div class="retrieve-container">
    <button id="getData" class="magictime puffIn" aria-label="Retrieve Secret Spell">
      <i class="fas fa-circle-notch icon"></i>Retrieve Secret Spell
    </button>
    <div id="displayData" class="magictime fadeIn" aria-live="polite">
      <i class="fas fa-magic"></i> Your secret spell will appear here...
    </div>
    <button id="clearDisplay" aria-label="Clear Retrieved Spell">Clear</button>
  </div>

  <!-- Loading Spinner -->
  <div id="loading" style="display: none;" class="magictime puffIn" aria-live="assertive">
    <i class="fas fa-spinner fa-spin"></i> Processing...
  </div>

  <!-- Notification Message -->
  <div id="notification" class="magictime fadeIn" role="alert" aria-live="assertive"></div>

  <!-- Include Web3.js -->
  <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
  <!-- Link to External JavaScript -->
  <script src="app.js"></script>
</body>
</html>

Connecting Frontend to Smart Contract

1. Update the ABI in `app.js`

First, extract the ABI from the compiled contract:

Locate the ABI in artifacts/contracts/SimpleStorage.sol/SimpleStorage.json.
Copy the contents of the "abi" field.

Updated ABI:

const contractABI = [
  {
    "inputs": [
      {
        "internalType": "string",
        "name": "_data",
        "type": "string"
      }
    ],
    "name": "setSecretSpell",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "getSecretSpell",
    "outputs": [
      {
        "internalType": "string",
        "name": "",
        "type": "string"
      }
    ],
    "stateMutability": "view",
    "type": "function"
  }
];

2. Update the Contract Address in `app.js`

Replace '0xYourContractAddress' with the actual contract address from the deployment output.

const contractAddress = '0xYourContractAddress'; // Replace with your contract's address

3. Write the JavaScript Logic (`app.js`)

// Function to display notifications
function showNotification(message, isSuccess = true) {
  const notification = document.getElementById('notification');
  notification.innerText = message;
  notification.style.backgroundColor = isSuccess ? 'rgba(46, 204, 113, 0.9)' : 'rgba(231, 76, 60, 0.9)';
  notification.classList.add('show');

  // Animate the notification
  animateCSS('#notification', 'fadeIn');

  // Hide after 3 seconds
  setTimeout(() => {
    notification.classList.remove('show');
  }, 3000);
}

// Function to show or hide the loading spinner
function showLoading(show) {
  const loading = document.getElementById('loading');
  if (show) {
    loading.style.display = 'flex';
  } else {
    loading.style.display = 'none';
  }
}

// Function to add and remove animation classes
function animateCSS(element, animationName, callback) {
  const node = document.querySelector(element);
  node.classList.add('magictime', animationName);

  function handleAnimationEnd() {
      node.classList.remove('magictime', animationName);
      node.removeEventListener('animationend', handleAnimationEnd);

      if (typeof callback === 'function') callback();
  }

  node.addEventListener('animationend', handleAnimationEnd);
}

// Initialize the DApp
window.addEventListener('load', async () => {
  let web3;
  let accounts;
  let simpleStorage;

  // Modern dapp browsers...
  if (window.ethereum) {
    web3 = new Web3(window.ethereum);
    try {
      // Request account access
      await window.ethereum.request({ method: 'eth_requestAccounts' });
    } catch (error) {
      console.error("User denied account access");
      alert("Please allow access to your Ethereum wallet to use this DApp.");
      return;
    }
  }
  // Legacy dapp browsers...
  else if (window.web3) {
    web3 = new Web3(web3.currentProvider);
  }
  // Non-dapp browsers...
  else {
    alert('No Ethereum wallet detected. Please install MetaMask, Brave Wallet, or use a compatible browser.');
    return;
  }

  // Instantiate the contract
  simpleStorage = new web3.eth.Contract(contractABI, contractAddress);

  // Get the user's accounts
  accounts = await web3.eth.getAccounts();

  // Handle Store Secret Spell
  document.getElementById('setData').onclick = async () => {
    const data = document.getElementById('inputData').value;
    if (data.trim() === "") {
      showNotification("Please enter a secret spell before storing.", false);
      return;
    }
    showLoading(true);
    try {
      await simpleStorage.methods.setSecretSpell(data).send({ from: accounts[0] });
      showLoading(false);
      showNotification('✨ Secret Spell Stored Successfully! ✨', true);
    } catch (error) {
      console.error(error);
      showLoading(false);
      showNotification('❌ Failed to Store Secret Spell.', false);
    }
  };

  // Handle Retrieve Secret Spell
  document.getElementById('getData').onclick = async () => {
    showLoading(true);
    try {
      const result = await simpleStorage.methods.getSecretSpell().call();
      document.getElementById('displayData').innerHTML = `<i class="fas fa-magic"></i> ${result}`;
      showLoading(false);
      showNotification('🔮 Secret Spell Retrieved Successfully! 🔮', true);
    } catch (error) {
      console.error(error);
      showLoading(false);
      showNotification('❌ Failed to Retrieve Secret Spell.', false);
    }
  };

  // Handle Clear Retrieved Spell
  document.getElementById('clearDisplay').onclick = () => {
    document.getElementById('displayData').innerHTML = `<i class="fas fa-magic"></i> Your secret spell will appear here...`;
    showNotification('🧹 Retrieved spell cleared.', true);
  };
});

Styling the Frontend (`styles.css`)

/* 1. General Styles */
body {
  background: linear-gradient(135deg, #141E30, #243B55);
  color: #ecf0f1;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  padding: 50px;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 2. Header with Padlock and Sparkles Icons */
h1 {
  font-family: 'Roboto Slab', serif;
  font-size: 3em;
  margin-bottom: 40px;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  animation: fadeInDown 1s ease forwards;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. Adding Sparkles in the Background */
.sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
              radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
  z-index: 0;
}

/* 4. Container for Store Secret Spell */
.store-container {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  width: 400px;
  position: relative;
  z-index: 1;
}

.store-container input[type="text"] {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid #6c5ce7;
  border-right: none;
  border-radius: 5px 0 0 5px;
  font-size: 1em;
  background-color: #34495e;
  color: #ecf0f1;
  transition: border-color 0.3s;
}

.store-container input[type="text"]::placeholder {
  color: #bdc3c7;
}

.store-container input[type="text"]:focus {
  outline: none;
  border-color: #a29bfe;
}

.store-container button {
  padding: 12px 20px;
  border: 2px solid #6c5ce7;
  border-left: none;
  border-radius: 0 5px 5px 0;
  background-color: #6c5ce7;
  color: #ecf0f1;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-container button:hover {
  background-color: #a29bfe;
  transform: scale(1.05);
}

/* 5. Retrieve and Display Section */
.retrieve-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  position: relative;
  z-index: 1;
}

.retrieve-container button {
  background-color: #e67e22;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  color: #ecf0f1;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retrieve-container button:hover {
  background-color: #f39c12;
  transform: scale(1.05);
}

#displayData {
  background-color: #34495e;
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  font-size: 1.2em;
  color: #ecf0f1;
  min-height: 50px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  animation: fadeIn 1s ease forwards;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 6. Magic Animations Overrides */
.magictime.puffIn {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* 7. Custom Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 8. Responsive Design */
@media (max-width: 500px) {
  .store-container, .retrieve-container {
    width: 90%;
  }

  h1 {
    font-size: 2.5em;
  }
}

/* 9. Decorative Icons Styles */
.icon {
  margin: 0 8px;
}

/* 10. Loading Spinner Styles */
#loading {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(52, 73, 94, 0.9);
  padding: 10px 20px;
  border-radius: 5px;
  color: #ecf0f1;
  font-size: 1em;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 2;
  display: flex;
  align-items: center;
}

/* 11. Notification Message Styles */
#notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(52, 73, 94, 0.9); /* Default background color */
  padding: 10px 20px;
  border-radius: 5px;
  color: #ecf0f1;
  font-size: 1em;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 2;
  display: none; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#notification.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* 12. Clear Button for Retrieved Message */
#clearDisplay {
  margin-top: 10px;
  background-color: #95a5a6;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  color: #ecf0f1;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

#clearDisplay:hover {
  background-color: #7f8c8d;
  transform: scale(1.05);
}

Testing the DApp

1. Serve the Frontend

In the frontend directory, start a simple HTTP server:

cd frontend
npx http-server . -c-1 -p 8080

press ‘y’ for package installation if asked

Navigate to http://localhost:8080 in your browser.

2. Connect Your Wallet

Ensure your wallet (MetaMask, Brave Wallet) is connected to the Hardhat network.
Network Details:
- Network Name: Hardhat Localhost 8545
- RPC URL: http://localhost:8545
- Chain ID: 31337

3. Import an Account

From the Hardhat node output, copy one of the private keys.
Import it into your wallet.

4. Interact with the DApp

Store a Secret Spell:
- Enter a spell in the input field.
- Click “Store Spell”.
- Confirm the transaction in your wallet.
- A notification will confirm success.
Retrieve the Secret Spell:
- Click “Retrieve Secret Spell”.
- The stored spell will appear.
- A notification will confirm success.
Clear the Retrieved Spell:
- Click “Clear”.
- The display resets.
- A notification will confirm the action.

(Insert screenshots of each interaction step here)

Conclusion

🎉 Congratulations! You’ve successfully built Mystic Vault, a magical Ethereum DApp that allows users to store and retrieve their secret spells. This journey has taken you through smart contract development, frontend integration, and blockchain interaction.

Key Learnings:

Smart Contract Development: Writing and deploying Solidity contracts.
Blockchain Interaction: Using Web3.js to interact with smart contracts.
Frontend Development: Building an interactive and animated user interface.
Troubleshooting: Debugging common issues in DApp development.

With these skills, you’re ready to explore more complex and exciting blockchain projects. The possibilities are endless!

Clone the Repository

Ready to explore the code and see Mystic Vault in action? Clone the repository from GitHub and get started!

git clone https://github.com/KarthiDreamr/MysticVault-Dapp-Simple-Storage.git

Feel free to customize and expand upon this project to suit your needs. Happy coding! 🪄✨

If you found this guide helpful, share it with fellow blockchain enthusiasts and stay tuned for more tutorials on decentralized application development!

🔗 Connect with me on GitHub | Linkedin | Twitter

Happy Coding! 🪄✨

By following this guide, you’ve built a fully functional Ethereum DApp with an engaging user interface. Keep experimenting and learning—the blockchain world awaits your magical creations! 🚀

Feel free to reach out if you have any questions or need further assistance. Happy coding! 🪄✨

PayU Integration in React Native with CheckoutPro SDK

Karthi Keyan — Sat, 10 Feb 2024 15:59:10 +0000

Are you looking for a simple and fast way to integrate a payment interface in your React Native app? If yes, then you should check out the Checkout Pro SDK from PayU. 🙌

The Checkout Pro SDK is a complete, ready-to-use native checkout UI that allows you to integrate a payment interface with minimal effort and get started quickly. Explore other options at https://docs.payu.in/docs/explore-reactnative-sdks

The offical demo available at https://github.com/payu-intrepos/payu-non-seamless-react seems to be not working as intended. I also like to point out that the salt and merchant key given in the documentation is not working anymore 😕 all of these are causing various error messages ❌ while trying to run the application.

But don’t worry, I have resolved the issues and I’m sharing the working demo here: https://github.com/KarthiDreamr/PayU-ReactNative-CheckoutProSDK-Demo. 🎉

Prerequisites

Before we begin, make sure that you have the following:

A PayU account is created .
Node.js installed.
Environment set up for React Native.
An emulator or a physical device to run your app.

Fastest Approach 🚀

In this article, I will show you how to integrate the Checkout Pro SDK with your React Native app and make it work as expected. Just clone my repository by copying below and paste in vscode or other terminal

git clone https://github.com/KarthiDreamr/PayU-ReactNative-CheckoutProSDK-Demo.git
cd PayU-ReactNative-CheckoutProSDK-Demo
npm install

For Unix-based systems (Linux/MacOS):

rm -rf ./node_modules/payu-non-seam-less-react
mv payu-non-seam-less-react ./node_modules/

For Windows:

rmdir /s /q .\node_modules\payu-non-seam-less-react
move payu-non-seam-less-react .\node_modules\

These commands will replace the payu-non-seam-less-react folder from our current directory with the one containing bugs in the node_modules directory.

Finally, start your favorite emulator in Android Studio or XCode or connect to a developer mode enabled physical device. Then run the following command

npm start

Hurray! 🥳 You can explore more about the integration and modify the code based on your usecases by referring to this documentation https://docs.payu.in/docs/reactnative-checkoutpro-android-integration

My Proposed Corrections

In this section, I will explain the changes I made to the official demo to make it work as intended. Let’s clone the original git repo and make it work

git clone https://github.com/payu-intrepos/payu-non-seamless-react.git
cd 
npm install

There seem to be some issues with package.json and package-lock.json, so make sure that the following dependencies are installed first

Install Checkout Pro SDK

The following command installs the payu-non-seam-less-react package. This package contains the Checkout Pro SDK for React Native.

npm install payu-non-seam-less-react -save

For older react native versions

npm install payu-non-seam-less-react -save
react-native link payu-non-seam-less-react

Install the SHA-512 Package

The following command installs the js-sha512 package from npm and saves it as a dependency in your package.json file. This package is used to generate the SHA-512 hashes for the payment parameters. 🔑

npm install js-sha512

Modify the Android Build File

In the node_modules/payu-non-seam-less-react/android/build.gradle line 140 find and replace ‘classifier’ -> ‘archiveClassifier’ as shown below

// task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {
//     classifier = 'javadoc'
//     from androidJavadoc.destinationDir
// }

// task androidSourcesJar(type: Jar) {
//     classifier = 'sources'
//     from android.sourceSets.main.java.srcDirs
//     include '**/*.java'
// }

task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {
    archiveClassifier = 'javadoc'
    from androidJavadoc.destinationDir
}

task androidSourcesJar(type: Jar) {
    archiveClassifier = 'sources'
    from android.sourceSets.main.java.srcDirs
    include '**/*.java'
}

This is because the classifier property is deprecated and causes an error when building the app. The archiveClassifier property is the new way to specify the classifier for the archive task. 🔧

Change Salt and Merchant key for Staging:

New key and merchantSalt were provided to me by payu team on my request, remember to replace it in production with original

key -> 'gtKFFx'
merchantSalt -> '4R38IvwiV57FwVpsgOvTXBdLE4tHUXFW'
environment -> 1 // 0 for Production , 1 for Testing

Modify the Android Manifest Files

In the android/app/src/debug/AndroidManifest.xml and android/app/src/release/AndroidManifest.xml file of your React Native project, I added the following lines:

<manifest xmlns:tools="http://schemas.android.com/tools">
  <application
    ...
    android:theme="@style/AppTheme" // your AppTheme is in res/ value /styles.xml
    tools:replace="android:theme"
    >
    ...
  </application>
</manifest>

This is because the payu-non-seam-less-react package has a different theme than your app, and this causes a conflict when merging the manifests. The tools:replace attribute tells the Android build system to use your app’s theme instead of the package’s theme. 🎨

Resolving React native EventEmitterListener warning ( optional )

To fix the warning about the missing addListener and removeListeners methods, at line 59 of payu-non-seam-less-react/android/src/main/java/com/payubiz/PayUBizSdkModule.java add the following methods to the native module class.

// Required for rn built in EventEmitter Calls.

@ReactMethod
public void addListener(String eventName) {
}
@ReactMethod
public void removeListeners(Integer count) {
}

These methods are required for React Native’s built-in event emitter calls, which are used to communicate between JavaScript and native code using events. However, these methods do not need to have any implementation, because they are only used to register and unregister listeners on the JavaScript side. The actual event emitting is done by the sendEvent method, which you have already implemented. Therefore, by adding these empty methods, you are satisfying the NativeEventEmitter’s expectations and avoiding the warning. This is a temporary workaround until the payu-non-seam-less-react package is updated to include these methods by default.

Find more ways to handle it here

https://stackoverflow.com/questions/69538962/new-nativeeventemitter-was-called-with-a-non-null-argument-without-the-requir

Add SMS Permission (optional)

In the android/app/src/main/AndroidManifest.xml file of your React Native project, I added the following line:

<uses-permission android:name="android.permission.RECEIVE_SMS" />

This is an optional step, but it allows the app to receive the OTP SMS from the bank and autofill it in the payment UI. This improves the user experience and reduces the chances of errors.

Customize the App.js File

In the App.js file of your React Native project, I copied and pasted the code from the official demo and made some modifications. I renamed the component and changed the payment parameters to suit my use case. I also added some comments to explain the code.

You can customize the App.js file according to your needs, such as changing the merchant key, the transaction ID, the amount, the product info, etc. You can also change the UI elements, such as the buttons, the text, the colors, etc.

I hope this draft helps you complete your Medium article. If you have any questions or feedback, please let me know. 😊

Forem: Karthi Keyan

Openclaw: Cron ⚔️ Heartbeat

1. The Heartbeat: The "Main Loop"

2. The Cron: The "Sidecar Runner"

Comparison Table: Technical Specs

"Is Cron just a Python script?"

Why does Heartbeat exist if we have Cron?

Summary for the Architect:

Resolving Agent "Terminal Blindness"

Overview

The Problem: The "Noise" vs. "Signal" Conflict

1. Escape Sequence Interference

2. The Agent's Perspective

The Solution: The "Early Return" Strategy

A. Environment Separation

B. Agent Detection & Early Return

Impact & Affected Environments

Operating Systems

Specific Software Triggers

Summary of Benefits

Reference

Why I Ditched ChatGPT and Cursor for OpenCode: A Smarter, Cheaper Way to Build AI Agents

The Hidden Costs of Proprietary AI Chats

OpenCode: Bring Your Own Keys for Ultimate Control and Savings

Adding Web Search to OpenCode with Tavily MCP

Wrapping Up: Make the Switch Today

X Post Enhancer: Making Your Social Posts Smarter

What I Built

How It Works

Key Features

Technical Implementation

Agent.ai Experience

Future Improvements

Try It Yourself

#flutter #appdev

Litigence AI: Transforming Legal Awareness with Technology

SURENDAR K S ・ Jan 20 '25

Building Mystic Vault: A Step-by-Step Guide to Creating a Simple Ethereum DApp from Scratch 🔮✨ ( 30 min )

Table of Contents

Introduction

Prerequisites

Project Structure

Setting Up the Development Environment

1. Create and Navigate to the Project Directory

2. Initialize npm and Install Dependencies

3. Initialize Hardhat Project

4. Update hardhat.config.js

Writing the Smart Contract

Create SimpleStorage.sol in the contracts Directory

Compiling and Deploying the Smart Contract

1. Compile the Contract

2. Deploy the Contract Using Hardhat

Deploying the Smart Contract Using Hardhat Ignition

Interacting with the Smart Contract

Building the Frontend

1. Create the Frontend Directory and Files

2. Write the HTML Structure (index.html)

Connecting Frontend to Smart Contract

1. Update the ABI in app.js

2. Update the Contract Address in app.js

3. Write the JavaScript Logic (app.js)

Styling the Frontend (styles.css)

Testing the DApp

1. Serve the Frontend

2. Connect Your Wallet

3. Import an Account

4. Interact with the DApp

Conclusion

Clone the Repository

PayU Integration in React Native with CheckoutPro SDK

Prerequisites

Fastest Approach 🚀

My Proposed Corrections

Install Checkout Pro SDK

Install the SHA-512 Package

Modify the Android Build File

Change Salt and Merchant key for Staging:

Modify the Android Manifest Files

Resolving React native EventEmitterListener warning ( optional )

Add SMS Permission (optional)

Create `SimpleStorage.sol` in the `contracts` Directory

2. Write the HTML Structure (`index.html`)

1. Update the ABI in `app.js`

2. Update the Contract Address in `app.js`

3. Write the JavaScript Logic (`app.js`)

Styling the Frontend (`styles.css`)