Wallet token onboarding and settings
https://token-onboarding-2331.minds.io/v2wallet
See epic &80 for links to all mockups.
As a disclaimer, this is not intended to be a final draft. There are all sorts of things that need to be cleaned up, there's no need to spend time communicating them to me at this juncture - please assume I am aware of the obvious glitches.
What's inside
Most of the new stuff in here is related to token onboarding #2331. I've successfully gone through the onboarding steps (phone verification + on-chain address setup) locally.
You'll also see lots of things that are ![:construction:](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect fill-opacity="0"/></svg> ":construction:"){kind=small}
Issues that have been started and for various reasons are less 'complete' than token onboarding include:
Testing twilio
To test the phone verification step in the token onboarding process locally, you need to make some backend changes.
- in
settings.php,
$CONFIG->set('twilio', [
'account_sid' => '',//get this from Mark
'auth_token' => '',//get this from Mark
'from' => '+15005550006' // use this exact number
]);- in
Core/Rewards/Join.php, go to theverify()function- directly after this line (around 116):
$code = $this->twofactor->getCode($secret);, adderror_log($code) - comment this line (around 120):
throw new \Exception('voip phones not allowed'); - now when you enter almost any phone number in token onboarding, the corresponding verification code will appear in your php logs. Use it to complete the phone verification step. Note: the handful of phone numbers that won't work are the magic 'To' numbers listed in Twilio's test credential docs.
- directly after this line (around 116):
Testing with fake data
Because of staging limitations you may wish to play around with fake data locally to see what's going on with various currency balances. To populate the fake data, in modules/wallet/v2/dashboard.service.ts uncomment line 79 (this.wallet = fakeData.wallet;).
@eiennohi sorry in advance
changed the description
changed milestone to %Wallet Upgrade
added scoped labels
changed target branch from
mastertoepic/wallet-80![Xander Miller](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect fill-opacity="0"/></svg>)
DeveloperLooks like this can only be tested locally at the moment. No action taken.
- DeveloperResolved by Marcelo Rivera
Just FYI, I had some issues with Twilio locally. This is the log from php-fpm:
fpm_1 | NOTICE: PHP message: [guard] Twilio error: [HTTP 404] Unable to create record: The requested resource /2010-04-01/Accounts/not set/Messages.json was not foundalso, I had to disable phone verification from the backend as it detecting it as a voip phone, for some reason
@omadrid did you have problems like this? maybe I have something misconfigured
also, the code looks fine. It only needs a bit of cleaning up
Edited by Marcelo Rivera - Last reply by Marcelo Rivera
- Last updated by Olivia Madrid
10 import { 11 FormBuilder, 12 AbstractControl, 13 FormGroup, 14 FormControl, 15 } from '@angular/forms'; 16 import { FormToastService } from '../../../../common/services/form-toast.service'; 17 import { Client } from '../../../../services/api'; 18 import { Session } from '../../../../services/session'; 19 20 @Component({ 21 selector: 'm-walletPhoneVerification', 22 templateUrl: './phone-verification.component.html', 23 changeDetection: ChangeDetectionStrategy.OnPush, 24 }) 25 export class WalletPhoneVerificationComponent implements OnInit { - Developer
We should allow closing the modal by clicking outside of it. The only way to close this modal if I don't want to go through the onboarding process right now is to reload the page
![Olivia Madrid](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill-opacity="0"/></svg>)
Developer@eiennohi agreed... are you not seeing the "x" button in the top right? https://projects.invisionapp.com/share/KWU1X9IEB2U#/screens/396078538
- Developer
Whoops! missed it. I feel like it doesn't stand out too much. Anyways, it seems to be getting cropped when the scrollbar appears
- Developer
Hmm I'll add some more padding but I'm wondering why your scrollbar is visible? Because scrolling should be locked when the modal is visible
- Developer
It appears but disabled. I tested on Chrome / Ubuntu 19.10
- Developer
Oh well - I added room for scrollbars just in case. Also:
- made the box shadow a tiny bit darker to increase visibility
- enabled closing by clicking outside the modal
Edited by Olivia Madrid
approved this merge request
unapproved this merge request
- DeveloperResolved by Olivia Madrid
The verify code input and buttons are vertically misaligned:
- Last reply by Olivia Madrid
added 15 commits
-
442585c6...c8de38d6 - 14 commits from branch
epic/wallet-80 - 381e34cb - Merge remote-tracking branch 'origin/master' into token-onboarding-2331
-
442585c6...c8de38d6 - 14 commits from branch
unmarked as a Work In Progress
- Developer
Scrollbar appears when opening the country dropdown:
- Developer
The issue is regarding something that changes in the layout when the modal closes, specifically after confirming the code. I can show you after tomorrow's meeting if you want
- Developer
If you input a wrong number and press enter, the button gets disabled, but it stays that way after modifying the number:
The component's state should probably reset on ngModelChange, or maybe just don't disable the button if there's something in the input
Edited by Marcelo Rivera
- Developer
If you verify your phone number, after closing the modal, there's an issue with the layout where scrollbars disappear and there's a weird stretching effect on the last panel:
here I moved the dev console further down and the graph stretched (might not be that obvious in the screenshot):
Edited by Marcelo Rivera - Developer
I haven't done anything with that graph except for copy it from analytics so anything going on in there will be addressed in #2348
Edited by Olivia Madrid
