mirrors/Ride-The-Lightning-RTL
1
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL.git synced 2025-02-22 14:22:48 +01:00
Code Issues Projects Releases Wiki Activity

Loop infographics on the mobile resolution bug fix #408 (#421)

Browse source 
Loop infographics on the mobile resolution bug fix #408
This commit is contained in:
ShahanaFarooqui 2020-08-14 11:45:57 -04:00 • committed by GitHub
parent 86cc31f4b9
commit da4d163d35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 117 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
angular/8.35f41a99759ef94fc0b8.js
View file

File diff suppressed because one or more lines are too long

1
angular/8.977dd110c527ac6c88c5.js Normal file
View file

File diff suppressed because one or more lines are too long

2
angular/index.html
View file

@ -15,5 +15,5 @@
<link rel="stylesheet" href="styles.7f0a84d9b012559f3600.css"></head> <link rel="stylesheet" href="styles.7f0a84d9b012559f3600.css"></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script src="runtime.890312fd738fc01cabe0.js" defer></script><script src="polyfills-es5.2ac0d98b22574ae745b1.js" nomodule defer></script><script src="polyfills.5ae721a6ae5ab597a53d.js" defer></script><script src="main.930629deff965c22cb1b.js" defer></script></body> <script src="runtime.f85917275662fd535bb6.js" defer></script><script src="polyfills-es5.2ac0d98b22574ae745b1.js" nomodule defer></script><script src="polyfills.5ae721a6ae5ab597a53d.js" defer></script><script src="main.930629deff965c22cb1b.js" defer></script></body>
</html> </html>

2
angular/runtime.890312fd738fc01cabe0.js → angular/runtime.f85917275662fd535bb6.js
View file

@ -1 +1 @@
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"9bb271dd8dffd2d994a5",6:"006d3904cf050331e88e",7:"4a00e92294df28ac9ca1",8:"35f41a99759ef94fc0b8"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]); !function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,d=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&d.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);d.length;)d.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"9bb271dd8dffd2d994a5",6:"006d3904cf050331e88e",7:"4a00e92294df28ac9ca1",8:"977dd110c527ac6c88c5"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);

76
src/app/lnd/loop/loop-in-info-graphics/info-graphics.component.html
View file

@ -2,9 +2,9 @@
*ngTemplateOutlet="stepNumber === 1 ? loopStepBlock1: stepNumber === 2 ? loopStepBlock2 : stepNumber === 3 ? loopStepBlock3 : stepNumber === 4 ? loopStepBlock4 : loopStepBlock5"> *ngTemplateOutlet="stepNumber === 1 ? loopStepBlock1: stepNumber === 2 ? loopStepBlock2 : stepNumber === 3 ? loopStepBlock3 : stepNumber === 4 ? loopStepBlock4 : loopStepBlock5">
</ng-container> </ng-container>
<ng-template #loopStepBlock1> <ng-template #loopStepBlock1>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)"
[@sliderAnimation]="animationDirection"> [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 108 118" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 108 118" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
@ -64,21 +64,21 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Loop In explained.</mat-card-title> <mat-card-title>Loop In explained.</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">Lightning Loop is a non custodial service offered by Lightning Labs to bridge <div fxFlex="40">
on-chain and off-chain Bitcoin using Submarine swaps.</p> <mat-card-subtitle class="font-size-120">
Lightning Loop is a non custodial service offered by Lightning Labs to bridge
on-chain and off-chain Bitcoin using Submarine swaps.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock2> <ng-template #loopStepBlock2>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)"
[@sliderAnimation]="animationDirection"> [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 200 120" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 200 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
@ -214,20 +214,20 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Step 1: Deciding to Loop In</mat-card-title> <mat-card-title>Step 1: Deciding to Loop In</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">Your outgoing capacity is depleted and you want to regain it without opening new channels.</p> <div fxFlex="40">
<mat-card-subtitle class="font-size-120">
Your outgoing capacity is depleted and you want to regain it without opening new channels.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock3> <ng-template #loopStepBlock3>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)"
[@sliderAnimation]="animationDirection"> [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 364 120" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 364 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
@ -420,20 +420,20 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'" <mat-card-title>Step 2: Send payment out</mat-card-title>
fxLayoutAlign="start center"> </div>
<mat-card-title>Step 2: Send on-chain payment out</mat-card-title> <div fxFlex="40">
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> <mat-card-subtitle class="font-size-120">
<p class="font-size-120 h-10" fxFlex="80">Your node sends funds on-chain to loop server to be swapped with off-chain liquidity.</p> Your node sends funds on-chain to loop server to be swapped with off-chain liquidity.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock4> <ng-template #loopStepBlock4>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)"
[@sliderAnimation]="animationDirection"> [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 278 118" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 278 118" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
@ -537,20 +537,20 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Step 3: Recieve Funds Off-chain</mat-card-title> <mat-card-title>Step 3: Recieve Funds Off-chain</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">Loop server sends equivalent funds off-chain to your node by making a lightning payment to you.</p> <div fxFlex="40">
<mat-card-subtitle class="font-size-120">
Loop server sends equivalent funds off-chain to your node by making a lightning payment to you.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock5> <ng-template #loopStepBlock5>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)"
[@sliderAnimation]="animationDirection"> [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 205 121" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 205 121" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com --> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
@ -649,13 +649,13 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Done!</mat-card-title> <mat-card-title>Done!</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">You send the payment on-chain from your wallet and also move remote <div fxFlex="40">
balance to the local side of the node, gaining outgoing capacity.</p> <mat-card-subtitle class="font-size-120">
You send the payment on-chain from your wallet and also move remote
balance to the local side of the node, gaining outgoing capacity.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>

10
src/app/lnd/loop/loop-in-info-graphics/info-graphics.component.scss
View file

@ -1,5 +1,11 @@
svg { svg.small-svg {
height: 50%; height: 50%;
min-height: 50%; min-height: 50%;
max-height: 50%; max-width: 100%;
}
svg.large-svg {
height: 60%;
min-height: 60%;
max-width: 100%;
} }

7
src/app/lnd/loop/loop-in-info-graphics/info-graphics.component.ts
View file

@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions'; import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
import { sliderAnimation } from '../../../shared/animation/slider-animation'; import { sliderAnimation } from '../../../shared/animation/slider-animation';
import { CommonService } from '../../../shared/services/common.service';
@Component({ @Component({
selector: 'rtl-loop-in-info-graphics', selector: 'rtl-loop-in-info-graphics',
@ -16,9 +17,11 @@ export class LoopInInfoGraphicsComponent implements OnInit {
public screenSize = ''; public screenSize = '';
public screenSizeEnum = ScreenSizeEnum; public screenSizeEnum = ScreenSizeEnum;
constructor() {} constructor(private commonService: CommonService) {}
ngOnInit() {} ngOnInit() {
this.screenSize = this.commonService.getScreenSize();
}
onSwipe(event: any) { onSwipe(event: any) {
if(event.direction === 2 && this.stepNumber < 5) { if(event.direction === 2 && this.stepNumber < 5) {

8
src/app/lnd/loop/loop-modal/loop-modal.component.html
View file

@ -118,15 +118,15 @@
</div> </div>
</mat-card-header> </mat-card-header>
<mat-card-content fxLayout="column" fxFlex="70" fxLayoutAlign="space-between center"> <mat-card-content fxLayout="column" fxFlex="70" fxLayoutAlign="space-between center">
<rtl-loop-out-info-graphics *ngIf="direction === swapTypeEnum.LOOP_OUT" [(stepNumber)]="stepNumber" [animationDirection]="animationDirection"></rtl-loop-out-info-graphics> <rtl-loop-out-info-graphics fxFlex="100" *ngIf="direction === swapTypeEnum.LOOP_OUT" [(stepNumber)]="stepNumber" [animationDirection]="animationDirection"></rtl-loop-out-info-graphics>
<rtl-loop-in-info-graphics *ngIf="direction === swapTypeEnum.LOOP_IN" [(stepNumber)]="stepNumber" [animationDirection]="animationDirection"></rtl-loop-in-info-graphics> <rtl-loop-in-info-graphics fxFlex="100" *ngIf="direction === swapTypeEnum.LOOP_IN" [(stepNumber)]="stepNumber" [animationDirection]="animationDirection"></rtl-loop-in-info-graphics>
</mat-card-content> </mat-card-content>
<div class="my-3" fxLayout="row" fxFlex="10" fxLayoutAlign="center end"> <div fxLayout="row" fxFlex="10" fxLayoutAlign="center end">
<span *ngFor="let i of [1, 2, 3, 4, 5];" (click) = "onStepChanged(i)" fxLayoutAlign="center center" class="dots-stepper-block"> <span *ngFor="let i of [1, 2, 3, 4, 5];" (click) = "onStepChanged(i)" fxLayoutAlign="center center" class="dots-stepper-block">
<p class="dot tiny-dot mr-0" [ngClass]="{'dot-primary': stepNumber === i, 'dot-primary-lighter': stepNumber !== i}"></p> <p class="dot tiny-dot mr-0" [ngClass]="{'dot-primary': stepNumber === i, 'dot-primary-lighter': stepNumber !== i}"></p>
</span> </span>
</div> </div>
<div fxLayout="row" fxFlex="15" fxLayoutAlign="end end" class="mt-2"> <div fxLayout="row" fxFlex="10" fxLayoutAlign="end end">
<button *ngIf="stepNumber === 5" mat-stroked-button class="mr-1" color="primary" tabindex="15" type="button" (click)="onReadMore()">Read More</button> <button *ngIf="stepNumber === 5" mat-stroked-button class="mr-1" color="primary" tabindex="15" type="button" (click)="onReadMore()">Read More</button>
<button *ngIf="stepNumber === 5" mat-flat-button class="mr-1" color="primary" tabindex="16" type="button" (click)="onStepChanged(4)">Back</button> <button *ngIf="stepNumber === 5" mat-flat-button class="mr-1" color="primary" tabindex="16" type="button" (click)="onStepChanged(4)">Back</button>
<button *ngIf="stepNumber === 5" mat-flat-button color="primary" tabindex="17" type="button" (click)="flgShowInfo=false;stepNumber=1;">Close</button> <button *ngIf="stepNumber === 5" mat-flat-button color="primary" tabindex="17" type="button" (click)="flgShowInfo=false;stepNumber=1;">Close</button>

4
src/app/lnd/loop/loop-modal/loop-modal.component.scss
View file

@ -1,3 +1,7 @@
.dots-stepper-block { .dots-stepper-block {
width: 3rem; width: 3rem;
} }
.info-graphics-container {
min-height: 60rem;
}

85
src/app/lnd/loop/loop-out-info-graphics/info-graphics.component.html
View file

@ -2,9 +2,8 @@
*ngTemplateOutlet="stepNumber === 1 ? loopStepBlock1: stepNumber === 2 ? loopStepBlock2 : stepNumber === 3 ? loopStepBlock3 : stepNumber === 4 ? loopStepBlock4 : loopStepBlock5"> *ngTemplateOutlet="stepNumber === 1 ? loopStepBlock1: stepNumber === 2 ? loopStepBlock2 : stepNumber === 3 ? loopStepBlock3 : stepNumber === 4 ? loopStepBlock4 : loopStepBlock5">
</ng-container> </ng-container>
<ng-template #loopStepBlock1> <ng-template #loopStepBlock1>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 108 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 108 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="Loopv0.2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Loopv0.2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="LoopOut_Step01" transform="translate(-594.000000, -215.000000)" fill-rule="nonzero"> <g id="LoopOut_Step01" transform="translate(-594.000000, -215.000000)" fill-rule="nonzero">
@ -49,21 +48,20 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Loop Out explained.</mat-card-title> <mat-card-title>Loop Out explained.</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">Lightning Loop is a non custodial service offered by Lightning Labs to bridge <div fxFlex="40">
on-chain and off-chain Bitcoin using Submarine swaps.</p> <mat-card-subtitle class="font-size-120">
Lightning Loop is a non custodial service offered by Lightning Labs to bridge
on-chain and off-chain Bitcoin using Submarine swaps.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock2> <ng-template #loopStepBlock2>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 205 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 205 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs> <defs>
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1"> <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
@ -147,20 +145,19 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'" <mat-card-title>Step 1: Deciding to Loop Out</mat-card-title>
fxLayoutAlign="start center"> </div>
<mat-card-title>Step 1: Deciding to Loop Out</mat-card-title> <div fxFlex="40">
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> <mat-card-subtitle class="font-size-120">
<p class="font-size-120 h-10" fxFlex="80">You have a channel with a local balance amount and you want to gain inbound liquidity.</p> You have a channel with a local balance amount and you want to gain inbound liquidity.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock3> <ng-template #loopStepBlock3>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 373 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 373 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs> <defs>
<linearGradient x1="50%" y1="100%" x2="50%" y2="8.86848147e-15%" id="linearGradient-1"> <linearGradient x1="50%" y1="100%" x2="50%" y2="8.86848147e-15%" id="linearGradient-1">
@ -300,21 +297,20 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Step 2: Send lightning payment</mat-card-title> <mat-card-title>Step 2: Send lightning payment</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">Your node pays a lightning invoice for the amount requested via the loop <div fxFlex="40">
service. This moves the local balance, for the amount paid, to the remote side of the channel.</p> <mat-card-subtitle class="font-size-120">
Your node pays a lightning invoice for the amount requested via the loop
service. This moves the local balance, for the amount paid, to the remote side of the channel.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock4> <ng-template #loopStepBlock4>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 278 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 278 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="Loopv0.2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Loopv0.2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="LoopOut_Step04" transform="translate(-503.000000, -212.000000)"> <g id="LoopOut_Step04" transform="translate(-503.000000, -212.000000)">
@ -411,20 +407,19 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'" <mat-card-title>Step 3: Receive funds back</mat-card-title>
fxLayoutAlign="start center"> </div>
<mat-card-title>Step 3: Receive funds back on-chain</mat-card-title> <div fxFlex="40">
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> <mat-card-subtitle class="font-size-120">
<p class="font-size-120 h-10" fxFlex="80">Loop service then sends you a payment on-chain for the amount same as the lightning payment minus the fee.</p> Loop service then sends you a payment on-chain for the amount same as the lightning payment minus the fee.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #loopStepBlock5> <ng-template #loopStepBlock5>
<div fxLayout="column" fxFlex="100" class="step-container" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
<svg viewBox="0 0 200 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg fxFlex="30" [ngClass]="{'small-svg': screenSize === screenSizeEnum.XS, 'large-svg': screenSize !== screenSizeEnum.XS}" viewBox="0 0 200 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs> <defs>
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1"> <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
@ -547,13 +542,13 @@
</g> </g>
</g> </g>
</svg> </svg>
<div class="mt-6" fxLayout="column" <div fxFlex="20" fxLayoutAlign="center end">
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
fxLayoutAlign="start center">
<mat-card-title>Done!</mat-card-title> <mat-card-title>Done!</mat-card-title>
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start"> </div>
<p class="font-size-120 h-10" fxFlex="80">Final settlement occurs when your node sweeps the on-chain payment and the loop server settles the lightning invoice. You receive the payment on-chain in your wallet and also move local <div fxFlex="40">
balance to the remote side of the channel, gaining inbound capacity.</p> <mat-card-subtitle class="font-size-120">
Final settlement occurs when your node sweeps the on-chain payment and the loop server settles the lightning invoice. You receive the payment on-chain in your wallet and also move local
balance to the remote side of the channel, gaining inbound capacity.
</mat-card-subtitle> </mat-card-subtitle>
</div> </div>
</div> </div>

10
src/app/lnd/loop/loop-out-info-graphics/info-graphics.component.scss
View file

@ -1,5 +1,11 @@
svg { svg.small-svg {
height: 50%; height: 50%;
min-height: 50%; min-height: 50%;
max-height: 50%; max-width: 100%;
}
svg.large-svg {
height: 60%;
min-height: 60%;
max-width: 100%;
} }

7
src/app/lnd/loop/loop-out-info-graphics/info-graphics.component.ts
View file

@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions'; import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
import { sliderAnimation } from '../../../shared/animation/slider-animation'; import { sliderAnimation } from '../../../shared/animation/slider-animation';
import { CommonService } from '../../../shared/services/common.service';
@Component({ @Component({
selector: 'rtl-loop-out-info-graphics', selector: 'rtl-loop-out-info-graphics',
@ -16,9 +17,11 @@ export class LoopOutInfoGraphicsComponent implements OnInit {
public screenSize = ''; public screenSize = '';
public screenSizeEnum = ScreenSizeEnum; public screenSizeEnum = ScreenSizeEnum;
constructor() {} constructor(private commonService: CommonService) {}
ngOnInit() {} ngOnInit() {
this.screenSize = this.commonService.getScreenSize();
}
onSwipe(event: any) { onSwipe(event: any) {
if(event.direction === 2 && this.stepNumber < 5) { if(event.direction === 2 && this.stepNumber < 5) {

4
src/app/lnd/loop/loop.component.ts
View file

@ -45,7 +45,7 @@ export class LoopComponent implements OnInit {
.pipe(takeUntil(this.unSubs[0])) .pipe(takeUntil(this.unSubs[0]))
.subscribe(response => { .subscribe(response => {
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ data: { this.store.dispatch(new RTLActions.OpenAlert({data: {
minQuote: response[0], minQuote: response[0],
maxQuote: response[1], maxQuote: response[1],
direction: direction, direction: direction,
@ -57,7 +57,7 @@ export class LoopComponent implements OnInit {
.pipe(takeUntil(this.unSubs[1])) .pipe(takeUntil(this.unSubs[1]))
.subscribe(response => { .subscribe(response => {
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ data: { this.store.dispatch(new RTLActions.OpenAlert({data: {
minQuote: response[0], minQuote: response[0],
maxQuote: response[1], maxQuote: response[1],
direction: direction, direction: direction,