-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10238 from Gamboster/feat/walletGroupOnboarding
Feat: key onboarding from settings
- Loading branch information
Showing
10 changed files
with
1,062 additions
and
9 deletions.
There are no files selected for viewing
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
49 changes: 49 additions & 0 deletions
49
...pages/settings/wallet-group-settings/wallet-group-onboarding/wallet-group-onboarding.html
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,49 @@ | ||
| <ion-slides #walletGroupOnboardingSlides pager="true" class="key-onboarding-slides"> | ||
| <ion-slide> | ||
| <div class="img-container"> | ||
| <img src="assets/img/wallet-group-tour1.svg" /> | ||
| </div> | ||
| <div class="slide-info"> | ||
| <div class="info"> | ||
| <div class="title" translate>Your funds, on your device</div> | ||
| <div class="text" translate> | ||
| A wallet is like a vault stored on your device containing your crypto funds. Much like a vault, your wallet will only be accesible with the master key. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ion-slide> | ||
| <ion-slide> | ||
| <div class="img-container"> | ||
| <img src="assets/img/wallet-group-tour2.svg" /> | ||
| </div> | ||
| <div class="slide-info"> | ||
| <div class="info"> | ||
| <div class="title" translate>The "Key" to your funds</div> | ||
| <div class="text" translate> | ||
| Your wallet master key is a phrase composed of 12 randomly selected words. If you were to ever lose or damage your device, you can restore access to your wallet as long as you have your 12 word master key. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ion-slide> | ||
| <ion-slide> | ||
| <div class="img-container"> | ||
| <img src="assets/img/wallet-group-tour3.svg" /> | ||
| </div> | ||
| <div class="slide-info"> | ||
| <div class="info"> | ||
| <div class="title" translate>Don't loose your key!</div> | ||
| <div class="text" translate> | ||
| In order to protect your funds from being accessible to hackers and theives, the Master Key to your wallet must be kept somewhere safe and remain a secret. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| <div padding> | ||
| <button ion-button clear class="next-slide-button" (click)="nextSlide()" *ngIf="walletGroupOnboardingSlides.getActiveIndex() < 2" translate> | ||
| Next | ||
| </button> | ||
| <button ion-button clear class="next-slide-button" (click)="close()" *ngIf="walletGroupOnboardingSlides.getActiveIndex() == 2" translate> | ||
| I understand | ||
| </button> | ||
| </div> |
84 changes: 84 additions & 0 deletions
84
...pages/settings/wallet-group-settings/wallet-group-onboarding/wallet-group-onboarding.scss
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,84 @@ | ||
| page-wallet-group-onboarding { | ||
| .key-onboarding-slides { | ||
| .slide-zoom { | ||
| height: 100%; | ||
| } | ||
| ion-slide { | ||
| background: linear-gradient(to bottom, #ffffff, #ebedf8 80%); | ||
| .img-container { | ||
| height: 68vh; | ||
| @media (max-height: 650px) and (max-width: 768px) { | ||
| height: 60vh; | ||
| } | ||
| @media (max-height: 550px) and (max-width: 768px) { | ||
| height: 53vh; | ||
| } | ||
| @media (min-height: 600px) and (min-width: 768px) { | ||
| height: 42vh; | ||
| } | ||
| @media (min-height: 768px) and (min-width: 768px) { | ||
| height: 50vh; | ||
| } | ||
| img { | ||
| padding: 5rem; | ||
| @media (max-height: 650px) and (max-width: 768px) { | ||
| padding: 3rem; | ||
| } | ||
| @media (max-height: 550px) and (max-width: 768px) { | ||
| padding: 2rem; | ||
| } | ||
| @media (min-height: 600px) and (min-width: 768px) { | ||
| padding: 2rem; | ||
| } | ||
| width: 100%; | ||
| height: 100%; | ||
| justify-content: center; | ||
| align-self: center; | ||
| margin: 0 auto; | ||
| box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.07); | ||
| } | ||
| } | ||
| .slide-info { | ||
| background: white; | ||
| min-height: 230px; | ||
| padding-bottom: 20rem; | ||
| .info { | ||
| padding: 2rem; | ||
| .title { | ||
| align-items: center; | ||
| color: #060606; | ||
| font-weight: 500; | ||
| text-align: left; | ||
| } | ||
| .text { | ||
| font-size: 16px; | ||
| text-align: left; | ||
| color: rgb(46, 46, 46); | ||
| font-weight: 300; | ||
| padding-top: 15px; | ||
| padding-bottom: 30px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .swiper-pagination { | ||
| text-align: left; | ||
| margin-left: 4rem; | ||
| margin-bottom: 1rem; | ||
| button.swiper-pagination-bullet { | ||
| width: 9px; | ||
| height: 9px; | ||
| } | ||
| } | ||
| } | ||
| .next-slide-button { | ||
| z-index: 1; | ||
| position: absolute; | ||
| bottom: 0.5rem; | ||
| right: 3rem; | ||
| color: color($colors, primary); | ||
| cursor: pointer; | ||
| text-transform: uppercase; | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
src/pages/settings/wallet-group-settings/wallet-group-onboarding/wallet-group-onboarding.ts
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,21 @@ | ||
| import { Component, ViewChild } from '@angular/core'; | ||
| import { Slides, ViewController } from 'ionic-angular'; | ||
|
|
||
| @Component({ | ||
| selector: 'page-wallet-group-onboarding', | ||
| templateUrl: 'wallet-group-onboarding.html' | ||
| }) | ||
| export class WalletGroupOnboardingPage { | ||
| @ViewChild('walletGroupOnboardingSlides') | ||
| walletGroupOnboardingSlides: Slides; | ||
|
|
||
| constructor(private viewCtrl: ViewController) {} | ||
|
|
||
| public nextSlide(): void { | ||
| this.walletGroupOnboardingSlides.slideNext(); | ||
| } | ||
|
|
||
| public close(): void { | ||
| this.viewCtrl.dismiss(); | ||
| } | ||
| } |
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
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