[Draft] Spacewalk mykobo prototype phase 1

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

App.css

@@ -0,0 +1,150 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;  
+  overflow-x: hidden;
+}
+
+#app {
+  width: 100%;
+  min-width: 1800px;
+  box-sizing: border-box;
+}
+
+
+.inputBox {
+  width: 30%;
+  margin: 20px auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px #ccc;
+  transition: all 0.5s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.inputBox.active {
+  width: 21%;
+  margin-top: 5px;
+}
+
+.inputBox input:disabled {
+  background-color: #ccc;
+  color: #666;
+}
+.eventsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: scroll;
+  max-height: 70vh;
+}
+
+input {
+  margin: 10px;
+  padding: 10px;
+}
+
+.eventBox {
+  margin: 20px auto;
+  width: 30%;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px #ccc;
+  transition: all 0.5s ease-in-out;
+  color: #333;
+  word-wrap: break-word;
+  text-align: center;
+}
+
+.eventBox.waiting {
+  background-color: #ffffff;
+  border-color: #ccc;
+}
+
+.eventBox.active.waiting {
+  /*animation: rotateShadowBlue 5s linear infinite;*/
+  border-color: #ffffff;
+}
+
+/* @keyframes rotateShadowBlue {
+  0% { box-shadow: 0 0 15px #007bff; }
+  25% { box-shadow: 15px 0 15px #007bff; }
+  50% { box-shadow: 0 15px 15px #007bff; }
+  75% { box-shadow: -15px 0 15px #007bff; }
+  100% { box-shadow: 0 -15px 15px #007bff; }
+} */
+
+.eventBox.success {
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+.eventBox.active {
+  transform: scale(1.3);
+  background-color: #f0f0f0;
+}
+
+.eventBox.error {
+  margin: 20px auto;
+  width: 30%;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px #ccc;
+  transition: all 0.5s ease-in-out;
+  color: red;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+  color: red;
+}
+
+.iframe-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+button {
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-top: 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+  background-color: #0056b3;
+  transform: scale(1.05);
+}
+
+.description {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.icon {
+  width: 30px;
+  height: 30px;
+}
+
+.arrow {
+  width: 50px;
+  margin: 0 10px;
+}

README.md

@@ -1,6 +1,9 @@
 # PendulumPay
 
-[//]: # ([![Netlify Status](https://api.netlify.com/api/v1/badges/aa69406a-f4a1-4693-aed0-8478f1d1fabd/deploy-status)](https://app.netlify.com/sites/pendulum-portal-alpha/deploys))
+[//]:
+  #
+  '[![Netlify Status](https://api.netlify.com/api/v1/badges/aa69406a-f4a1-4693-aed0-8478f1d1fabd/deploy-status)](https://app.netlify.com/sites/pendulum-portal-alpha/deploys)'
+
   ![TypeScript](https://img.shields.io/badge/-TypeSript-05122A?style=flat&logo=typescript) 
 ![Preact](https://img.shields.io/badge/-Preact-05122A?style=flat&logo=preact) 
 ![Vite](https://img.shields.io/badge/-Vite-05122A?style=flat&logo=vite) 
@@ -9,8 +12,7 @@
 
 ---
 
-PendulumPay is a gateway for cross-border payments.
-It is built on top of the Pendulum blockchain.
+PendulumPay is a gateway for cross-border payments. It is built on top of the Pendulum blockchain.
 
 ## Run
 

package.json

@@ -34,9 +34,12 @@
     "@polkadot/rpc-provider": "^9.9.1",
     "@polkadot/types": "^9.9.1",
     "@polkadot/util": "^10.1.9",
-    "bn.js": "^5.2.1",
+    "big.js": "^6.2.1",
+    "buffer": "^6.0.3",
     "preact": "^10.12.1",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.8.1",
+    "stellar-base": "^11.0.1",
+    "stellar-sdk": "^11.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -54,7 +57,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/preact-hooks": "^1.1.0",
-    "@types/bn.js": "^5",
+    "@types/big.js": "^6",
     "@types/jest": "^29.4.0",
     "@types/node": "^18.14.1",
     "@types/react": "^18.0.28",
@@ -79,7 +82,6 @@
     "yarn": ">=1.22.19"
   },
   "lint-staged": {
-    "*.{ts,tsx}": "eslint --cache --fix",
     "*.--write": "prettier --write"
   }
 }

src/components/GenericEvent/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export enum EventStatus {
+  Success = 'success',
+  Error = 'error',
+  Waiting = 'waiting',
+}
+
+export interface GenericEvent {
+  value: string;
+  status: EventStatus;
+}
+
+interface EventBoxProps {
+  event: GenericEvent;
+  className: string;
+}
+
+const EventBox = React.forwardRef<HTMLDivElement, EventBoxProps>(({ event, className }, ref) => {
+  const classes = `eventBox ${className} ${event.status}`;
+
+  return (
+    <div ref={ref} className={classes}>
+      <p>{event.value}</p>
+    </div>
+  );
+});
+
+export default EventBox;

src/components/InputKeys/index.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { checkStellarAccount } from '../../services/stellar/utils';
+import { checkPendulumAccount } from '../../services/polkadot/utils';
+import eurcSvg from '../../assets/coins/eurc.svg';
+import euroSvg from '../../assets/coins/euro.svg';
+import arrowSvg from '../../assets/coins/arrow.svg';
+export interface IInputBoxData {
+  stellarFundingSecret: string;
+  pendulumSecret: string;
+}
+
+interface InputBoxProps {
+  onSubmit: (secrets: IInputBoxData) => void;
+}
+
+const InputBox: React.FC<InputBoxProps> = ({ onSubmit }) => {
+  const [stellarFundingSecret, setStellarFundingSecret] = useState<string>('');
+  const [pendulumSecret, setPendulumSecret] = useState<string>('');
+  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
+
+  const [stellarError, setStellarError] = useState<string>('');
+  const [pendulumError, setPendulumError] = useState<string>('');
+
+  const handleSubmit = async () => {
+    const stellarResult = await checkStellarAccount(stellarFundingSecret);
+
+    const pendulumResult = await checkPendulumAccount(pendulumSecret);
+
+    if (stellarResult && pendulumResult) {
+      setIsSubmitted(true);
+      onSubmit({ stellarFundingSecret, pendulumSecret });
+    } else {
+      if (!stellarResult) {
+        setStellarError('Please check the stellar secret');
+      }
+      if (!pendulumResult) {
+        setPendulumError('Please check the pendulum secret');
+      }
+      console.error('One or both accounts do not exist or have insufficient balance.');
+    }
+  };
+
+  return (
+    <div>
+      <div className="icons">
+        <img src={eurcSvg} className="icon" alt="Icon X" />
+        <img src={arrowSvg} className="arrow" alt="Arrow" />
+        <img src={euroSvg} className="icon" alt="Icon Y" />
+      </div>
+      <div className={`inputBox ${isSubmitted ? 'active' : ''}`}>
+        {!isSubmitted && (
+          <div className="description">
+            Enter your secrets below to start the offramp process.
+            <ul>
+              <li>Ensure to have enough EURC in Pendulum for the desired amount to offramp.</li>
+              <li>Do not close this window until the process is completed.</li>
+            </ul>
+          </div>
+        )}
+        <input
+          type="password"
+          value={stellarFundingSecret}
+          onChange={(e) => {
+            setStellarFundingSecret((e.target as HTMLInputElement).value);
+            if (stellarError) setStellarError('');
+          }}
+          placeholder="Stellar Funding Secret"
+          disabled={isSubmitted}
+        />
+        {stellarError && <div style={{ color: 'red' }}>{stellarError}</div>}
+        <input
+          type="password"
+          value={pendulumSecret}
+          onChange={(e) => {
+            setPendulumSecret((e.target as HTMLInputElement).value);
+            if (pendulumError) setPendulumError('');
+          }}
+          placeholder="Pendulum Secret"
+          disabled={isSubmitted}
+        />
+        {pendulumError && <div style={{ color: 'red' }}>{pendulumError}</div>}
+        {!isSubmitted ? <button onClick={handleSubmit}>Begin Offramp</button> : <div>Offramp Started</div>}
+      </div>
+    </div>
+  );
+};
+
+export default InputBox;