Skip to content

Commit fc270d2

Browse files
pwltrpwltr
committed
feat(ui): change denomination
1 parent 4da70eb commit fc270d2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+813
-746
lines changed

‎__tests__/fiat.ts‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { getWalletStore } from '../src/store/helpers';
33
import { updateExchangeRates } from '../src/store/actions/wallet';
44
import { getDisplayValues } from '../src/utils/displayValues';
55
import { resetExchangeRates } from '../src/store/actions/wallet';
6-
import { EUnit } from '../src/store/types/wallet';
6+
import { EDenomination } from '../src/store/types/wallet';
77

88
// @ts-ignore
99
global.fetch = jest.fn(() =>
@@ -44,10 +44,7 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
4444
beforeAll(() => resetExchangeRates());
4545

4646
it('handles missing exchange rate by returning the correct fiat fallback', () => {
47-
const dv = getDisplayValues({
48-
satoshis: 1010101,
49-
unit: EUnit.BTC,
50-
});
47+
const dv = getDisplayValues({ satoshis: 1010101 });
5148

5249
// expected fiat fallback
5350
expect(dv.fiatFormatted).toBe('—');
@@ -59,10 +56,7 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
5956
expect(dv.fiatValue).toBe(0);
6057

6158
// expected BTC conversion
62-
expect(dv.bitcoinFormatted).toBe('0.01010101');
63-
expect(dv.bitcoinSymbol).toBe('₿');
64-
expect(dv.bitcoinTicker).toBe('BTC');
65-
expect(dv.satoshis).toBe(1010101);
59+
expect(dv.bitcoinFormatted).toBe('1 010 101');
6660
});
6761

6862
it('Blocktank FX rates with default selected currency', async () => {
@@ -96,7 +90,6 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
9690
satoshis: 1010101,
9791
exchangeRate: 100000,
9892
currency: 'USD',
99-
unit: EUnit.BTC,
10093
locale: 'en-US',
10194
});
10295

@@ -107,10 +100,7 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
107100
expect(dv.fiatSymbol).toBe('$');
108101
expect(dv.fiatTicker).toBe('USD');
109102
expect(dv.fiatValue).toBe(1010.101);
110-
expect(dv.bitcoinFormatted).toBe('0.01010101');
111-
expect(dv.bitcoinSymbol).toBe('₿');
112-
expect(dv.bitcoinTicker).toBe('BTC');
113-
expect(dv.satoshis).toBe(1010101);
103+
expect(dv.bitcoinFormatted).toBe('1 010 101');
114104
});
115105

116106
it('Formats all display values in RUB formatted with correct locale', () => {
@@ -120,7 +110,6 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
120110
exchangeRate: 100000,
121111
currency: 'RUB',
122112
currencySymbol: '₽',
123-
unit: EUnit.satoshi,
124113
locale: 'en-US',
125114
});
126115

@@ -132,18 +121,22 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
132121
expect(dv.fiatTicker).toBe('RUB');
133122
expect(dv.fiatValue).toBe(1010.101);
134123
expect(dv.bitcoinFormatted).toBe('1 010 101');
135-
expect(dv.bitcoinSymbol).toBe('⚡');
136-
expect(dv.bitcoinTicker).toBe('satoshi');
137-
expect(dv.satoshis).toBe(1010101);
138124
});
139125

140126
it('Can convert small amount of sats without scientific notation', () => {
127+
const dv = getDisplayValues({ satoshis: 10 });
128+
expect(dv.bitcoinFormatted).toBe('10');
129+
expect(dv.bitcoinWhole).toBe('10');
130+
expect(dv.bitcoinDecimal).toBe(undefined);
131+
});
132+
133+
it('Can format to classic Bitcoin denomination', () => {
141134
const dv = getDisplayValues({
142-
satoshis: 10,
143-
unit: EUnit.BTC,
135+
satoshis: 123456789,
136+
denomination: EDenomination.classic,
144137
});
145-
146-
expect(dv.bitcoinFormatted).toBe('0.0000001');
147-
expect(dv.bitcoinWhole).toBe('0');
138+
expect(dv.bitcoinFormatted).toBe('1.23456789');
139+
expect(dv.bitcoinWhole).toBe('1');
140+
expect(dv.bitcoinDecimal).toBe('23456789');
148141
});
149142
});

‎e2e/numberpad.e2e.js‎

Lines changed: 54 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
isVisible,
77
} from './helpers';
88

9-
const d = checkComplete(['numberpad-1', 'numberpad-2'])
9+
const d = checkComplete(['numberpad-modern', 'numberpad-classic'])
1010
? describe.skip
1111
: describe;
1212

@@ -27,22 +27,14 @@ d('NumberPad', () => {
2727
// - no multiple zeros (000.23 -> 0.23)
2828
// - no multiple decimal symbols (0...23 -> 0.23)
2929
// - correct placeholders
30+
// - classic denomination
3031

3132
// Receive
3233
// - no exceeding maxAmount
3334
// - numberPadTextField value still there after navigating back and forth
3435

35-
// Send
36-
// TODO:
37-
38-
// Lightning
39-
// TODO:
40-
41-
// NumberPadWeeks
42-
// TODO:
43-
44-
it('Can enter amounts and switch units', async () => {
45-
if (checkComplete('numberpad-1')) {
36+
it('Can enter amounts in modern denomination', async () => {
37+
if (checkComplete('numberpad-modern')) {
4638
return;
4739
}
4840

@@ -60,61 +52,84 @@ d('NumberPad', () => {
6052
await element(by.id('N000').withAncestor(by.id('ReceiveNumberPad'))).tap();
6153
await expect(element(by.text('123 000'))).toBeVisible();
6254

55+
// Switch to USD
56+
await element(by.id('ReceiveNumberPadUnit')).tap();
57+
// reset to 0
6358
await element(
6459
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
65-
).tap();
66-
await expect(element(by.text('12 300'))).toBeVisible();
67-
68-
// Switch to BTC
69-
await element(by.id('ReceiveNumberPadUnit')).multiTap(2);
70-
await expect(element(by.text('0.00012300'))).toBeVisible();
60+
).multiTap(8);
61+
await expect(element(by.text('0.00'))).toBeVisible();
62+
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).multiTap(
63+
2,
64+
);
65+
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
7166
await element(
72-
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
73-
).multiTap(7);
74-
await element(by.id('N4').withAncestor(by.id('ReceiveNumberPad'))).tap();
67+
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
68+
).multiTap(2);
69+
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
70+
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
7571
await element(
7672
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
7773
).tap();
78-
await element(by.id('N2').withAncestor(by.id('ReceiveNumberPad'))).tap();
79-
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
80-
await element(by.id('N6').withAncestor(by.id('ReceiveNumberPad'))).tap();
81-
await element(by.id('N9').withAncestor(by.id('ReceiveNumberPad'))).tap();
82-
await expect(element(by.text('4.20690000'))).toBeVisible();
74+
await expect(element(by.text('1.01'))).toBeVisible();
8375

84-
// Switch back to sats
76+
// Switch back to BTC
8577
await element(by.id('ReceiveNumberPadUnit')).tap();
8678

87-
markComplete('numberpad-1');
79+
markComplete('numberpad-modern');
8880
});
8981

90-
it('Cannot enter more than one zero or decimal symbol', async () => {
91-
if (checkComplete('numberpad-2')) {
82+
it('Can enter amounts in classic denomination', async () => {
83+
if (checkComplete('numberpad-classic')) {
9284
return;
9385
}
9486

87+
// switch to classic denomination
88+
await element(by.id('Settings')).tap();
89+
await element(by.id('GeneralSettings')).tap();
90+
await element(by.id('UnitSettings')).tap();
91+
await element(by.id('DenominationClassic')).tap();
92+
await element(by.id('NavigationClose')).tap();
93+
9594
await element(by.id('Receive')).tap();
9695
if (await isVisible('UnderstoodButton')) {
9796
await element(by.id('UnderstoodButton')).tap();
9897
}
9998
await element(by.id('SpecifyInvoiceButton')).tap();
10099
await element(by.id('ReceiveNumberPadTextField')).tap();
101100

102-
// Switch to BTC
103-
await element(by.id('ReceiveNumberPadUnit')).multiTap(2);
104-
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).multiTap(
105-
2,
106-
);
101+
// Unit set to BTC
107102
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
103+
await expect(element(by.text('1.00000000'))).toBeVisible();
104+
105+
// can only enter one decimal symbol
108106
await element(
109107
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
110108
).multiTap(2);
111-
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
112-
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
109+
await expect(element(by.text('1.00000000'))).toBeVisible();
110+
111+
await element(
112+
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
113+
).tap();
114+
await expect(element(by.text('1.00000000'))).toBeVisible();
115+
await element(
116+
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
117+
).tap();
118+
119+
// reset to 0
120+
await element(
121+
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
122+
).multiTap(8);
123+
await element(by.id('N4').withAncestor(by.id('ReceiveNumberPad'))).tap();
113124
await element(
114125
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
115126
).tap();
116-
await expect(element(by.text('1.01000000'))).toBeVisible();
127+
await element(by.id('N2').withAncestor(by.id('ReceiveNumberPad'))).tap();
128+
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
129+
await element(by.id('N6').withAncestor(by.id('ReceiveNumberPad'))).tap();
130+
await element(by.id('N9').withAncestor(by.id('ReceiveNumberPad'))).tap();
131+
await expect(element(by.text('4.20690000'))).toBeVisible();
117132

118-
markComplete('numberpad-2');
133+
markComplete('numberpad-classic');
119134
});
120135
});

‎e2e/onchain.e2e.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -107,15 +107,7 @@ d('Onchain', () => {
107107
await element(
108108
by.id('NRemove').withAncestor(by.id('SendAmountNumberPad')),
109109
).multiTap(3);
110-
// Switch to BTC
111-
await element(by.id('SendNumberPadUnit')).multiTap(2);
112-
await expect(element(by.text('0.00199999'))).toBeVisible();
113-
// Switch to sats
114-
await element(by.id('SendNumberPadUnit')).multiTap(1);
115-
await element(
116-
by.id('N9').withAncestor(by.id('SendAmountNumberPad')),
117-
).multiTap(5);
118-
await expect(element(by.text('19 999 999'))).toBeVisible();
110+
await expect(element(by.text('199 999'))).toBeVisible();
119111
await element(by.id('SendNumberPadMax')).tap();
120112
await element(by.id('ContinueAmount')).tap();
121113

@@ -147,7 +139,7 @@ d('Onchain', () => {
147139
element(by.id('MoneyPrimary').withAncestor(by.id('TotalBalance'))),
148140
).toHaveText('0');
149141

150-
//check Activity
142+
// check Activity
151143
await element(by.id('AssetsTitle')).swipe('up');
152144
await expect(element(by.id('ActivityShort-1'))).toBeVisible();
153145
await expect(element(by.id('ActivityShort-2'))).toBeVisible();

‎e2e/settings.e2e.js‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ d('Settings', () => {
6868

6969
// switch back to sats
7070
await element(by.id('TotalBalance')).tap();
71-
await element(by.id('TotalBalance')).tap();
71+
7272
markComplete('settings-currency');
7373
});
7474

@@ -77,21 +77,54 @@ d('Settings', () => {
7777
return;
7878
}
7979

80-
// switch to Bitcoins
80+
const fiatSymbol = await element(
81+
by.id('MoneyFiatSymbol').withAncestor(by.id('TotalBalance')),
82+
);
83+
const balancePrim = await element(
84+
by.id('MoneyPrimary').withAncestor(by.id('TotalBalance')),
85+
);
86+
const balanceSecd = await element(
87+
by.id('MoneySecondary').withAncestor(by.id('TotalBalance')),
88+
);
89+
const unitRow = await element(
90+
by.id('Value').withAncestor(by.id('UnitSettings')),
91+
);
92+
93+
await element(by.id('Settings')).tap();
94+
await element(by.id('GeneralSettings')).tap();
95+
// check default unit
96+
await expect(unitRow).toHaveText('Bitcoin');
97+
98+
// switch to GBP
99+
await element(by.id('UnitSettings')).tap();
100+
await element(by.id('GBP')).tap();
101+
await element(by.id('NavigationBack')).tap();
102+
await expect(unitRow).toHaveText('GBP');
103+
await element(by.id('NavigationClose')).tap();
104+
await expect(fiatSymbol).toHaveText('£');
105+
await expect(balancePrim).toHaveText('0');
106+
await expect(balanceSecd).toHaveText('.00');
107+
108+
// switch back to BTC
81109
await element(by.id('Settings')).tap();
82110
await element(by.id('GeneralSettings')).tap();
83111
await element(by.id('UnitSettings')).tap();
84112
await element(by.id('Bitcoin')).tap();
85-
await expect(
86-
element(by.id('Value').withAncestor(by.id('UnitSettings'))),
87-
).toHaveText('Bitcoin');
113+
await element(by.id('NavigationBack')).tap();
114+
await expect(unitRow).toHaveText('Bitcoin');
115+
await element(by.id('NavigationClose')).tap();
116+
await expect(balancePrim).toHaveText('0');
88117

89-
// switch back to Satoshis
118+
// switch to classic denomination
119+
await element(by.id('Settings')).tap();
120+
await element(by.id('GeneralSettings')).tap();
90121
await element(by.id('UnitSettings')).tap();
91-
await element(by.id('Satoshis')).tap();
92-
await expect(
93-
element(by.id('Value').withAncestor(by.id('UnitSettings'))),
94-
).toHaveText('Satoshis');
122+
await element(by.id('DenominationClassic')).tap();
123+
await element(by.id('NavigationBack')).tap();
124+
await expect(unitRow).toHaveText('Bitcoin');
125+
await element(by.id('NavigationClose')).tap();
126+
await expect(balancePrim).toHaveText('0.00000000');
127+
95128
markComplete('settings-unit');
96129
});
97130

‎src/assets/icons/wallet.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ export const transferIcon = (
44
<path d="M3.70898 0.500433L0.516113 3.76948C0.370117 3.91547 0.28125 4.13129 0.28125 4.32807C0.28125 4.77241 0.592285 5.08344 1.03662 5.08344C1.24609 5.08344 1.42383 5.01362 1.56348 4.86762L2.86475 3.51557L3.55664 2.71576L3.51855 3.96625V11.6977C3.51855 12.142 3.83594 12.4658 4.28027 12.4658C4.71826 12.4658 5.04199 12.142 5.04199 11.6977V3.96625L4.99756 2.71576L5.68945 3.51557L6.99072 4.86762C7.13037 5.01362 7.30811 5.08344 7.51758 5.08344C7.96191 5.08344 8.27295 4.77241 8.27295 4.32807C8.27295 4.13129 8.18408 3.91547 8.03809 3.76948L4.84521 0.500433C4.52783 0.170355 4.03271 0.164007 3.70898 0.500433ZM12.2847 12.2182L15.4839 8.93647C15.6235 8.79047 15.7188 8.57465 15.7188 8.38422C15.7188 7.93989 15.4014 7.62885 14.9634 7.62885C14.7539 7.62885 14.5698 7.69868 14.4302 7.84467L13.1289 9.19672L12.4434 9.99653L12.4814 8.73969V1.01459C12.4814 0.576605 12.1577 0.252874 11.7197 0.252874C11.2817 0.252874 10.958 0.576605 10.958 1.01459V8.73969L10.9961 9.99653L10.3105 9.19672L9.00928 7.84467C8.86963 7.69868 8.68555 7.62885 8.47607 7.62885C8.03809 7.62885 7.7207 7.93989 7.7207 8.38422C7.7207 8.57465 7.81592 8.79047 7.95557 8.93647L11.1548 12.2182C11.4658 12.5483 11.9673 12.5546 12.2847 12.2182Z" fill="${color}"/>
55
</svg>`;
66

7-
export const unitBitcoinIcon = (
8-
color = 'white',
9-
): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
10-
<rect width="32" height="32" rx="16" fill="white" fill-opacity="0.10"/>
11-
<path d="M21.0502 14.6283C21.2702 13.1571 20.1499 12.3665 18.6183 11.8389L19.1151 9.84618L17.9022 9.54385L17.4184 11.484C17.0992 11.4045 16.772 11.3296 16.4463 11.2554L16.9332 9.30233L15.7211 9L15.2238 10.9924C14.9598 10.9322 14.7008 10.8729 14.4492 10.8103L14.4504 10.8041L12.7777 10.3865L12.4549 11.682C12.4549 11.682 13.3548 11.8882 13.3358 11.9011C13.8271 12.0237 13.9157 12.3488 13.901 12.6064L13.3352 14.8766C13.369 14.8853 13.4127 14.8975 13.4613 14.9171C13.4207 14.907 13.3776 14.8961 13.3332 14.8853L12.54 18.0652C12.4798 18.2145 12.3273 18.4385 11.984 18.3534C11.9961 18.371 11.1019 18.1334 11.1019 18.1334L10.5 19.5216L12.0784 19.9151C12.3719 19.9887 12.6601 20.0655 12.9432 20.1382L12.4416 22.1538L13.6532 22.4561L14.1502 20.4621C14.4816 20.5517 14.8028 20.6348 15.1172 20.713L14.6219 22.6977L15.8349 23L16.337 20.9883C18.4057 21.3795 19.9612 21.2217 20.6156 19.351C21.1434 17.8448 20.5895 16.9758 19.5012 16.4091C20.2937 16.2264 20.8909 15.705 21.0502 14.6283ZM18.2789 18.5147C17.9036 20.0211 15.3677 19.2067 14.545 19.0023L15.211 16.3323C16.0333 16.5373 18.6704 16.9436 18.2789 18.5147ZM18.6535 14.6067C18.3117 15.9769 16.2006 15.2806 15.5158 15.1098L16.1196 12.6881C16.8042 12.8589 19.0099 13.1775 18.6535 14.6067Z" fill="${color}"/>
7+
export const unitBitcoinIcon = (color = 'white'): string => `
8+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
9+
<rect width="32" height="32" rx="16" fill="white" fill-opacity="0.1"/>
10+
<path d="M13.6675 10.9699V9H14.5405V10.9699H13.6675ZM15.6575 10.9699V9H16.5453V10.9699H15.6575ZM13.6675 23V21.0301H14.5405V23H13.6675ZM15.6575 23V21.0301H16.5453V23H15.6575ZM11.5 21.6015V10.3985H15.9091C16.7179 10.3985 17.3935 10.5213 17.936 10.7669C18.4785 11.0125 18.8854 11.3509 19.1567 11.782C19.4328 12.213 19.5709 12.7093 19.5709 13.2707C19.5709 13.7068 19.4822 14.0902 19.3046 14.4211C19.132 14.7519 18.8953 15.0226 18.5944 15.2331C18.2985 15.4436 17.9582 15.5915 17.5735 15.6767V15.7895C17.9927 15.8095 18.3873 15.9298 18.7572 16.1504C19.1271 16.3709 19.4254 16.6817 19.6523 17.0827C19.8841 17.4787 20 17.9524 20 18.5038C20 19.0952 19.8545 19.6266 19.5635 20.0977C19.2775 20.5639 18.8534 20.9323 18.2911 21.203C17.7289 21.4687 17.0335 21.6015 16.205 21.6015H11.5ZM13.8229 19.6692H15.7315C16.3776 19.6692 16.8486 19.5414 17.1445 19.2857C17.4453 19.0301 17.5957 18.6917 17.5957 18.2707C17.5957 17.9599 17.5218 17.6867 17.3738 17.4511C17.2308 17.2105 17.0236 17.0226 16.7524 16.8872C16.4811 16.7519 16.1581 16.6842 15.7833 16.6842H13.8229V19.6692ZM13.8229 15.0902H15.554C15.8745 15.0902 16.1581 15.0326 16.4047 14.9173C16.6562 14.802 16.8535 14.6391 16.9965 14.4286C17.1395 14.213 17.2111 13.9574 17.2111 13.6617C17.2111 13.2607 17.0705 12.9373 16.7894 12.6917C16.5132 12.4411 16.1162 12.3158 15.5983 12.3158H13.8229V15.0902Z" fill="${color}"/>
1211
</svg>
1312
`;
1413

‎src/components/Amount.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import MoneySymbol from './MoneySymbol';
77

88
const Amount = ({
99
value,
10-
unit = EUnit.satoshi,
10+
unit = EUnit.BTC,
1111
style,
1212
}: {
1313
value: number;

‎src/components/BalanceHeader.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ import { EyeIcon } from '../styles/icons';
88
import Money from './Money';
99
import { useBalance, useSwitchUnitAnnounced } from '../hooks/wallet';
1010
import { updateSettings } from '../store/slices/settings';
11-
import {
12-
primaryUnitSelector,
13-
hideBalanceSelector,
14-
} from '../store/reselect/settings';
11+
import { unitSelector, hideBalanceSelector } from '../store/reselect/settings';
1512

1613
/**
1714
* Displays the total available balance for the current wallet & network.
@@ -21,7 +18,7 @@ const BalanceHeader = (): ReactElement => {
2118
const onSwitchUnit = useSwitchUnitAnnounced();
2219
const { totalBalance, claimableBalance } = useBalance();
2320
const dispatch = useAppDispatch();
24-
const unit = useAppSelector(primaryUnitSelector);
21+
const unit = useAppSelector(unitSelector);
2522
const hideBalance = useAppSelector(hideBalanceSelector);
2623

2724
const toggleHideBalance = (): void => {

0 commit comments

Comments
 (0)