mirror of
https://github.com/Ride-The-Lightning/RTL.git
synced 2025-02-22 06:21:49 +01:00
Loop infographics on the mobile resolution bug fix #408
This commit is contained in:
ShahanaFarooqui
GitHub
parent
86cc31f4b9
commit
da4d163d35
13 changed files with 117 additions and 100 deletions
File diff suppressed because one or more lines are too long
1
angular/8.977dd110c527ac6c88c5.js
Normal file
1
angular/8.977dd110c527ac6c88c5.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -15,5 +15,5 @@
|
|||
<link rel="stylesheet" href="styles.7f0a84d9b012559f3600.css"></head>
|
||||
<body>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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()}([]);
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
*ngTemplateOutlet="stepNumber === 1 ? loopStepBlock1: stepNumber === 2 ? loopStepBlock2 : stepNumber === 3 ? loopStepBlock3 : stepNumber === 4 ? loopStepBlock4 : loopStepBlock5">
|
||||
</ng-container>
|
||||
<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">
|
||||
<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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
|
|
@ -64,21 +64,21 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Loop In explained.</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<p class="font-size-120 h-10" fxFlex="80">Lightning Loop is a non custodial service offered by Lightning Labs to bridge
|
||||
on-chain and off-chain Bitcoin using Submarine swaps.</p>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<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">
|
||||
<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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
|
|
@ -214,20 +214,20 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Step 1: Deciding to Loop In</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<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">
|
||||
<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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
|
|
@ -420,20 +420,20 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<mat-card-title>Step 2: Send on-chain payment out</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<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>
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Step 2: Send payment out</mat-card-title>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<mat-card-subtitle class="font-size-120">
|
||||
Your node sends funds on-chain to loop server to be swapped with off-chain liquidity.
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<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">
|
||||
<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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
|
|
@ -537,20 +537,20 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Step 3: Recieve Funds Off-chain</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<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">
|
||||
<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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
|
|
@ -649,13 +649,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Done!</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<p class="font-size-120 h-10" fxFlex="80">You send the payment on-chain from your wallet and also move remote
|
||||
balance to the local side of the node, gaining outgoing capacity.</p>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
svg {
|
||||
svg.small-svg {
|
||||
height: 50%;
|
||||
min-height: 50%;
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
svg.large-svg {
|
||||
height: 60%;
|
||||
min-height: 60%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
|||
import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
|
||||
|
||||
import { sliderAnimation } from '../../../shared/animation/slider-animation';
|
||||
import { CommonService } from '../../../shared/services/common.service';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-loop-in-info-graphics',
|
||||
|
|
@ -16,9 +17,11 @@ export class LoopInInfoGraphicsComponent implements OnInit {
|
|||
public screenSize = '';
|
||||
public screenSizeEnum = ScreenSizeEnum;
|
||||
|
||||
constructor() {}
|
||||
constructor(private commonService: CommonService) {}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.screenSize = this.commonService.getScreenSize();
|
||||
}
|
||||
|
||||
onSwipe(event: any) {
|
||||
if(event.direction === 2 && this.stepNumber < 5) {
|
||||
|
|
|
|||
|
|
@ -118,15 +118,15 @@
|
|||
</div>
|
||||
</mat-card-header>
|
||||
<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-in-info-graphics *ngIf="direction === swapTypeEnum.LOOP_IN" [(stepNumber)]="stepNumber" [animationDirection]="animationDirection"></rtl-loop-in-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 fxFlex="100" *ngIf="direction === swapTypeEnum.LOOP_IN" [(stepNumber)]="stepNumber" [animationDirection]="animationDirection"></rtl-loop-in-info-graphics>
|
||||
</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">
|
||||
<p class="dot tiny-dot mr-0" [ngClass]="{'dot-primary': stepNumber === i, 'dot-primary-lighter': stepNumber !== i}"></p>
|
||||
</span>
|
||||
</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-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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.dots-stepper-block {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.info-graphics-container {
|
||||
min-height: 60rem;
|
||||
}
|
||||
|
|
@ -2,9 +2,8 @@
|
|||
*ngTemplateOutlet="stepNumber === 1 ? loopStepBlock1: stepNumber === 2 ? loopStepBlock2 : stepNumber === 3 ? loopStepBlock3 : stepNumber === 4 ? loopStepBlock4 : loopStepBlock5">
|
||||
</ng-container>
|
||||
<ng-template #loopStepBlock1>
|
||||
<div fxLayout="column" fxFlex="100" class="step-container" (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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
|
||||
<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">
|
||||
<desc>Created with Sketch.</desc>
|
||||
<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">
|
||||
|
|
@ -49,21 +48,20 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Loop Out explained.</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<p class="font-size-120 h-10" fxFlex="80">Lightning Loop is a non custodial service offered by Lightning Labs to bridge
|
||||
on-chain and off-chain Bitcoin using Submarine swaps.</p>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #loopStepBlock2>
|
||||
<div fxLayout="column" fxFlex="100" class="step-container" (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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
|
||||
<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">
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
|
||||
|
|
@ -147,20 +145,19 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<mat-card-title>Step 1: Deciding to Loop Out</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<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>
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Step 1: Deciding to Loop Out</mat-card-title>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<mat-card-subtitle class="font-size-120">
|
||||
You have a channel with a local balance amount and you want to gain inbound liquidity.
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #loopStepBlock3>
|
||||
<div fxLayout="column" fxFlex="100" class="step-container" (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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
|
||||
<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">
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="100%" x2="50%" y2="8.86848147e-15%" id="linearGradient-1">
|
||||
|
|
@ -300,21 +297,20 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Step 2: Send lightning payment</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<p class="font-size-120 h-10" fxFlex="80">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.</p>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #loopStepBlock4>
|
||||
<div fxLayout="column" fxFlex="100" class="step-container" (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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
|
||||
<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">
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Loopv0.2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="LoopOut_Step04" transform="translate(-503.000000, -212.000000)">
|
||||
|
|
@ -411,20 +407,19 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<mat-card-title>Step 3: Receive funds back on-chain</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<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>
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Step 3: Receive funds back</mat-card-title>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<mat-card-subtitle class="font-size-120">
|
||||
Loop service then sends you a payment on-chain for the amount same as the lightning payment minus the fee.
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #loopStepBlock5>
|
||||
<div fxLayout="column" fxFlex="100" class="step-container" (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">
|
||||
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" (swipe)="onSwipe($event)" [@sliderAnimation]="animationDirection">
|
||||
<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">
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
|
||||
|
|
@ -547,13 +542,13 @@
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="mt-6" fxLayout="column"
|
||||
[fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '40' : '30'"
|
||||
fxLayoutAlign="start center">
|
||||
<div fxFlex="20" fxLayoutAlign="center end">
|
||||
<mat-card-title>Done!</mat-card-title>
|
||||
<mat-card-subtitle fxLayout="row" fxLayoutAlign="center start">
|
||||
<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
|
||||
balance to the remote side of the channel, gaining inbound capacity.</p>
|
||||
</div>
|
||||
<div fxFlex="40">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
svg {
|
||||
svg.small-svg {
|
||||
height: 50%;
|
||||
min-height: 50%;
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
svg.large-svg {
|
||||
height: 60%;
|
||||
min-height: 60%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
|||
import { ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
|
||||
|
||||
import { sliderAnimation } from '../../../shared/animation/slider-animation';
|
||||
import { CommonService } from '../../../shared/services/common.service';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-loop-out-info-graphics',
|
||||
|
|
@ -16,9 +17,11 @@ export class LoopOutInfoGraphicsComponent implements OnInit {
|
|||
public screenSize = '';
|
||||
public screenSizeEnum = ScreenSizeEnum;
|
||||
|
||||
constructor() {}
|
||||
constructor(private commonService: CommonService) {}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.screenSize = this.commonService.getScreenSize();
|
||||
}
|
||||
|
||||
onSwipe(event: any) {
|
||||
if(event.direction === 2 && this.stepNumber < 5) {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export class LoopComponent implements OnInit {
|
|||
.pipe(takeUntil(this.unSubs[0]))
|
||||
.subscribe(response => {
|
||||
this.store.dispatch(new RTLActions.CloseSpinner());
|
||||
this.store.dispatch(new RTLActions.OpenAlert({ data: {
|
||||
this.store.dispatch(new RTLActions.OpenAlert({data: {
|
||||
minQuote: response[0],
|
||||
maxQuote: response[1],
|
||||
direction: direction,
|
||||
|
|
@ -57,7 +57,7 @@ export class LoopComponent implements OnInit {
|
|||
.pipe(takeUntil(this.unSubs[1]))
|
||||
.subscribe(response => {
|
||||
this.store.dispatch(new RTLActions.CloseSpinner());
|
||||
this.store.dispatch(new RTLActions.OpenAlert({ data: {
|
||||
this.store.dispatch(new RTLActions.OpenAlert({data: {
|
||||
minQuote: response[0],
|
||||
maxQuote: response[1],
|
||||
direction: direction,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue