rsksmart · SebasGuaquetaRSK · Jan 17, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 8, 2025
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,31 +4,35 @@
   "private": true,
   "scripts": {
     "prod": "NODE_ENV=production next start",
-    "dev": "NODE_ENV=development next dev",
+    "dev": "NODE_ENV=development next dev --turbopack",
     "build": "NODE_ENV=production next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@rsksmart/rns": "^1.0.0",
-    "axios": "^1.7.7",
-    "cron": "^3.1.7",
-    "ethereumjs-tx": "1.3.6",
-    "next": "14.2.15",
-    "react": "^18",
-    "react-card-carousel": "^1.1.2",
+    "@rsksmart/rns-resolver.js": "^1.1.0",
+    "@rsksmart/rsk-utils": "^2.0.5",
+    "axios": "^1.7.9",
+    "cron": "^3.3.2",
+    "next": "15.1.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-google-recaptcha": "^3.1.0",
-    "react-gtm-module": "^2.0.8",
-    "rskjs-util": "^1.0.3",
+    "react-gtm-module": "^2.0.11",
+    "sass": "^1.83.4",
     "sweetalert2": "^11.6.13",
-    "web3": "1.10.4"
+    "swiper": "^11.2.0",
+    "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.11",
+    "@types/react": "19.0.3",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-gtm-module": "^2.0.4",
     "eslint": "^8",
-    "eslint-config-next": "14.2.15",
-    "tailwindcss": "^3.4.1"
+    "eslint-config-next": "15.1.3",
+    "tailwindcss": "^3.4.17"
+  },
+  "overrides": {
+    "@types/react": "19.0.3"
   }
 }
diff --git a/src/app/lib/action.ts b/src/app/lib/action.ts
@@ -3,7 +3,6 @@ import { filterByIP, provider, valueToDispense } from '@/utils/env-util';
 import { faucetAddress, faucetPrivateKey } from '@/utils/faucet-sensitive-util';
 import { headers } from 'next/headers';
 import AddressUtil from '../../utils/address-util';
-import Tx from 'ethereumjs-tx';
 import Web3 from 'web3';
 import { CaptchaSolutionRequest, CaptchaSolutionResponse, DispenseResponse, FaucetHistory, TxParameters } from '@/types/types';
 import logger from '@/utils/logger';
@@ -13,8 +12,8 @@ import { CronJob } from 'cron';
 import FrontendText from '@/utils/frontend-text';
 import { alreadyDispensed, captchaRejected, insuficientFunds, invalidAddress } from '@/utils/validations';
 import TxParametersGenerator from '@/utils/tx-parameters-generator';
-import { isValidChecksumAddress } from 'rskjs-util';
 import { loadFaucetHistory, saveFaucetHistory } from '@/app/lib/faucetHistory';
+import { isValidChecksumAddress } from '@rsksmart/rsk-utils';
 interface IData {
   address: string
   captcha: CaptchaSolutionRequest,
@@ -44,7 +43,7 @@ new CronJob(
   'America/Los_Angeles' /* Time zone of this job. */
 );
 const web3: Web3 = new Web3(provider());
-const addressUtil = new AddressUtil(web3);
+const addressUtil = new AddressUtil();
 const captchaSolver = new CaptchaSolver();
 const frontendText = new FrontendText();
 const TESTNET_CHAIN_ID = 31;
@@ -53,7 +52,8 @@ export async function dispense(data: IData) {
   const faucetHistory: FaucetHistory = loadFaucetHistory();
   const { address, captcha, promoCode } = data;
 
-  const ip: string = headers().get('x-forwarded-for') || headers().get('x-user-ip') as string;
+  const headersList = await headers();
+  const ip: string = headersList.get('x-forwarded-for') || headersList.get('x-user-ip') as string;
   logger.event('IP ' + ip);
   const faucetBalance: number = Number(await web3.eth.getBalance(faucetAddress()));
   try {
@@ -95,28 +95,46 @@ export async function dispense(data: IData) {
 
       logger.txParameters(txParameters);
 
-      const tx = new Tx(txParameters);
-      tx.sign(Buffer.from(faucetPrivateKey(), 'hex'));
-
-      const encodedTx = '0x' + tx.serialize().toString('hex');
-      const txHash = '0x' + tx.hash(true).toString('hex');
-
-      logger.info('encodedTx ' + encodedTx);
+      const account = web3.eth.accounts.privateKeyToAccount('0x' + faucetPrivateKey());
+      web3.eth.accounts.wallet.add(account);
+      const signedTx = await web3.eth.accounts.signTransaction(
+        {
+          to: txParameters.to,
+          value: web3.utils.toWei(valueToDispense().toString(), 'ether'),
+          gas: txParameters.gas,
+          gasPrice: txParameters.gasPrice,
+          nonce: await web3.eth.getTransactionCount(faucetAddress(), 'pending'),
+          chainId: TESTNET_CHAIN_ID
+        },
+        account.privateKey
+      );
+      const txHash = signedTx.transactionHash;
+      logger.info('encodedTx ' + signedTx.rawTransaction);
+      if(!txHash || !signedTx.rawTransaction) {
+        logger.error('Error produced after sending a signed transaction.');
+        const data: DispenseResponse = {
+          title: 'Error',
+          text: 'Something went wrong, please try again in a while',
+          type: 'error',
+          resetCaptcha: true
+        };
+        filterAddresses(dispenseAddress, ip, promoCode);
+        logger.event('Sending response ' + JSON.stringify(data));
+        return data;
+      }
       logger.dispensed(dispenseAddress, txHash);
 
       try {
         const currentAddress = faucetHistory[dispenseAddress];
         currentAddress.loading = true;
-        const receipt = await web3.eth.sendSignedTransaction(encodedTx);
-
+        await web3.eth.sendSignedTransaction(signedTx.rawTransaction);
         currentAddress.mint = true;
         currentAddress.loading = false;
         faucetHistory[dispenseAddress] = currentAddress;
         saveFaucetHistory(faucetHistory);
 
         logger.success('Transaction succesfuly mined!');
         logger.success('Retrived this receipt');
-        logger.success(JSON.stringify(receipt));
 
         const data: DispenseResponse = {
           txHash,
@@ -200,8 +218,8 @@ export async function estimationFee(dispenseAddress:string) {
     value: value
   });
   const gasPrice = await web3.eth.getGasPrice();
-  const estimatedCost = web3.utils.toBN(gasEstimate).mul(web3.utils.toBN(gasPrice));
-  return estimatedCost || web3.utils.toBN('0');
+  const estimatedCost = BigInt(gasEstimate) * BigInt(gasPrice);
+  return estimatedCost || BigInt(0);
 }
 
 
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -1,6 +1,10 @@
-'use client'
-import ReactCardCarousel from "react-card-carousel";
-import RskLinkCard from "./rsk-link-card";
+'use client';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/pagination';
+import RskLinkCard from './rsk-link-card';
 import WalleIcon from '@/assets/images/wallet-icon.svg';
 import TutorialIcon from '@/assets/images/tutorial-icon.svg';
 import DevportalIcon from '@/assets/images/devportal-icon.svg';
@@ -14,44 +18,45 @@ interface ICarousel {
 }
 
 const Carousel = () => {
-
-  const reactCardCarouselProps = {
-    autoplay: true,
-    autoplay_speed: 5000
-  };
   const items: ICarousel[] = [
     {
       link: 'https://developers.rsk.co/develop/apps/wallets/',
       img: WalleIcon.src,
       title: 'Wallets',
       backgroundColor: 'black',
-      description: 'Try RSK with these wallets'
+      description: 'Try Rootstock with these wallets',
     },
     {
       link: 'https://developers.rsk.co/tutorials/',
       img: TutorialIcon.src,
       title: 'Tutorials',
       backgroundColor: '#f26122',
-      description: 'Read and learn about how to develop Dapps on Rootstock'
+      description: 'Read and learn about how to develop Dapps on Rootstock',
     },
     {
-       link: 'https://developers.rsk.co/',
-       img: DevportalIcon.src,
-       title: 'DevPortal',
-       backgroundColor: '#00b41f',
-       description: 'For developers by developers'
-     }
-  ] 
-    
+      link: 'https://developers.rsk.co/',
+      img: DevportalIcon.src,
+      title: 'DevPortal',
+      backgroundColor: '#00b41f',
+      description: 'For developers by developers',
+    },
+  ];
+
   return (
     <div className="content-carousel">
-      <ReactCardCarousel {...reactCardCarouselProps}>
-        {
-          items.map((item, i) => (
-            <RskLinkCard key={i} {...item} />
-          ))
-        }
-      </ReactCardCarousel>
+      <Swiper
+        modules={[Autoplay, Pagination]} // Carga los módulos aquí
+        spaceBetween={30}
+        slidesPerView={1}
+        autoplay={{ delay: 5000, disableOnInteraction: false }}
+        pagination={{ clickable: true }}
+      >
+        {items.map((item, i) => (
+          <SwiperSlide key={i}>
+            <RskLinkCard {...item} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </div>
   );
 };

diff --git a/src/components/faucet.tsx b/src/components/faucet.tsx
@@ -9,7 +9,7 @@ import { isCodeActive } from '@/utils/valid-promo-code';
 export interface FaucetProps {
   siteKeyCaptcha: string
   dispenseAddress: string;
-  captchaValue: RefObject<ReCAPTCHA>;
+  captchaValue: RefObject<ReCAPTCHA | null>;
   onAddressChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onDispenseClick: (code: string | undefined) => void;
 }

diff --git a/src/types/ethereumjs-tx.d.ts b/src/types/ethereumjs-tx.d.ts
diff --git a/src/types/rskjs-util.d.ts b/src/types/rskjs-util.d.ts
diff --git a/src/utils/address-util.ts b/src/utils/address-util.ts
@@ -1,17 +1,16 @@
 import logger from './logger';
-import RNS from '@rsksmart/rns/lib';
+import Resolver from '@rsksmart/rns-resolver.js'
 
 class AddressUtil {
-  rns: RNS;
-  constructor(web3: any) {
-    this.rns = new RNS(web3);
-  }
+  constructor() {}
   async retriveAddressFromFrontend(frontendAddress: string = 'Undefined address'): Promise<string> {
     const posibleRnsAlias = frontendAddress.includes('.rsk');
 
     if(posibleRnsAlias) {
       try {
-        return await this.rns.addr(frontendAddress);
+        const resolver = Resolver.forRskMainnet({})
+        const address = await resolver.addr(frontendAddress);
+        return address
       } catch(e) {
         logger.error(`Couldn't resolve address for this rnsAlias: ${frontendAddress}`);
         logger.error(e);

diff --git a/src/utils/frontend-text.ts b/src/utils/frontend-text.ts
@@ -19,7 +19,7 @@ class FrontendText {
     const receipt = await web3.eth.getTransactionReceipt(txHash);
     if (receipt == null) {
       return 'The transaction wasn\'t propagated due to internal problems. <br/> Please try again in a while';
-    } else if (receipt.status == false) {
+    } else if (receipt.status === BigInt(0)) {
       return (
         'The transaction was reverted by the RVM. <br/> <a href="https://explorer.testnet.rsk.co/tx/' +
         txHash +

diff --git a/src/utils/tx-parameters-generator.ts b/src/utils/tx-parameters-generator.ts
@@ -2,17 +2,16 @@ import { TxParameters } from '../types/types';
 import { gasLimit, gasPrice, getPromoValue, valueToDispense } from './env-util';
 import { faucetAddress } from './faucet-sensitive-util';
 import Web3 from 'web3';
-import BN from 'bn.js';
 
 class TxParametersGenerator {
-  async generate(dispenseAddress: string, web3: Web3, fee: BN, promoCode?: string) {
+  async generate(dispenseAddress: string, web3: Web3, fee: bigint, promoCode?: string) {
 
     const VALUE_TO_DISPENSE = valueToDispense();
     const PROMO_VALUE_TO_DISPENSE = getPromoValue();
     const value = promoCode ? PROMO_VALUE_TO_DISPENSE : VALUE_TO_DISPENSE;
 
     const valueInWei = web3.utils.toWei(value.toString(), 'ether');
-    const valueToSend = web3.utils.toBN(valueInWei).sub(fee);
+    const valueToSend = BigInt(valueInWei) - fee;
 
     const txParameters: TxParameters = {
       from: faucetAddress(),

diff --git a/src/utils/validations.ts b/src/utils/validations.ts
@@ -1,5 +1,5 @@
+import { isValidAddress } from '@rsksmart/rsk-utils';
 import { CaptchaSolutionResponse, FaucetHistory } from '../types/types';
-import {isValidAddress} from 'rskjs-util';
 import { filterByIP, getTimerLimit } from './env-util';
 import { saveFaucetHistory } from '@/app/lib/faucetHistory';
 
@@ -12,6 +12,8 @@ const EROR_CODE = {
   'timeout-or-duplicate':	'The response is no longer valid: either is too old or has been used previously.'
 }
 
+const CHAIN_ID = 30; //We are solving RNS from mainnet, so we need to use mainnet chain id to validate addresses
+
 export const insuficientFunds = (faucetBalance: number) =>
   faucetBalance < 100000000000000000 ? 'Faucet has not enough funds.' : '';
 
@@ -45,4 +47,4 @@ export const alreadyDispensed = (address: string, ip:string, faucetHistory: Fauc
   saveFaucetHistory(faucetHistory)
   return ''
 }
-export const invalidAddress = (dispenseAddress: string): string => !isValidAddress(dispenseAddress) ? 'Invalid address, provide a valid one.' : '';
+export const invalidAddress = (dispenseAddress: string): string => !isValidAddress(dispenseAddress, CHAIN_ID) ? 'Invalid address, provide a valid one.' : '';
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }