-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Draft] Spacewalk mykobo prototype phase 1 (#21)
* first steps * WIP * first iteration prototype ui * some UI changes for events, input box * remove mock testing code * Add `.husky` files to fix precommit hook * Remove linting from `lint-staged` * Run `yarn format` * wrap log text * Break text in event boxes * align event text * lint issues, cleaner stellar error text display * more lint ts changes * Fix 'no-async-promise-executor' issue * Fix missing hook deps * Fix bad refactoring of promise * don't use iframe * different big number library that handles decimals also * print ephemeral secret * load ephemeral account only once for transaction creation * remove unused bignumber libraries --------- Co-authored-by: Marcel Ebert <mail@marcel-ebert.de>
- Loading branch information
Showing
26 changed files
with
1,749 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| _ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| #!/bin/sh | ||
| . "$(dirname "$0")/_/husky.sh" | ||
|
|
||
| npx lint-staged |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.