Skip to content

Commit

Permalink
feat(ui): change denomination
Browse files Browse the repository at this point in the history
  • Loading branch information
@pwltr
pwltr committed Feb 7, 2024
1 parent 4da70eb commit fc270d2
Show file tree
Hide file tree
Showing 73 changed files with 813 additions and 746 deletions.
39 changes: 16 additions & 23 deletions __tests__/fiat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { getWalletStore } from '../src/store/helpers';
import { updateExchangeRates } from '../src/store/actions/wallet';
import { getDisplayValues } from '../src/utils/displayValues';
import { resetExchangeRates } from '../src/store/actions/wallet';
import { EUnit } from '../src/store/types/wallet';
import { EDenomination } from '../src/store/types/wallet';

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

it('handles missing exchange rate by returning the correct fiat fallback', () => {
const dv = getDisplayValues({
satoshis: 1010101,
unit: EUnit.BTC,
});
const dv = getDisplayValues({ satoshis: 1010101 });

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

// expected BTC conversion
expect(dv.bitcoinFormatted).toBe('0.01010101');
expect(dv.bitcoinSymbol).toBe('₿');
expect(dv.bitcoinTicker).toBe('BTC');
expect(dv.satoshis).toBe(1010101);
expect(dv.bitcoinFormatted).toBe('1 010 101');
});

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

Expand All @@ -107,10 +100,7 @@ describe('Pulls latest fiat exchange rates and checks the wallet store for valid
expect(dv.fiatSymbol).toBe('$');
expect(dv.fiatTicker).toBe('USD');
expect(dv.fiatValue).toBe(1010.101);
expect(dv.bitcoinFormatted).toBe('0.01010101');
expect(dv.bitcoinSymbol).toBe('₿');
expect(dv.bitcoinTicker).toBe('BTC');
expect(dv.satoshis).toBe(1010101);
expect(dv.bitcoinFormatted).toBe('1 010 101');
});

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

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

it('Can convert small amount of sats without scientific notation', () => {
const dv = getDisplayValues({ satoshis: 10 });
expect(dv.bitcoinFormatted).toBe('10');
expect(dv.bitcoinWhole).toBe('10');
expect(dv.bitcoinDecimal).toBe(undefined);
});

it('Can format to classic Bitcoin denomination', () => {
const dv = getDisplayValues({
satoshis: 10,
unit: EUnit.BTC,
satoshis: 123456789,
denomination: EDenomination.classic,
});

expect(dv.bitcoinFormatted).toBe('0.0000001');
expect(dv.bitcoinWhole).toBe('0');
expect(dv.bitcoinFormatted).toBe('1.23456789');
expect(dv.bitcoinWhole).toBe('1');
expect(dv.bitcoinDecimal).toBe('23456789');
});
});
93 changes: 54 additions & 39 deletions e2e/numberpad.e2e.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
isVisible,
} from './helpers';

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

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

// Receive
// - no exceeding maxAmount
// - numberPadTextField value still there after navigating back and forth

// Send
// TODO:

// Lightning
// TODO:

// NumberPadWeeks
// TODO:

it('Can enter amounts and switch units', async () => {
if (checkComplete('numberpad-1')) {
it('Can enter amounts in modern denomination', async () => {
if (checkComplete('numberpad-modern')) {
return;
}

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

// Switch to USD
await element(by.id('ReceiveNumberPadUnit')).tap();
// reset to 0
await element(
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
).tap();
await expect(element(by.text('12 300'))).toBeVisible();

// Switch to BTC
await element(by.id('ReceiveNumberPadUnit')).multiTap(2);
await expect(element(by.text('0.00012300'))).toBeVisible();
).multiTap(8);
await expect(element(by.text('0.00'))).toBeVisible();
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).multiTap(
2,
);
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
).multiTap(7);
await element(by.id('N4').withAncestor(by.id('ReceiveNumberPad'))).tap();
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
).multiTap(2);
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
).tap();
await element(by.id('N2').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N6').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N9').withAncestor(by.id('ReceiveNumberPad'))).tap();
await expect(element(by.text('4.20690000'))).toBeVisible();
await expect(element(by.text('1.01'))).toBeVisible();

// Switch back to sats
// Switch back to BTC
await element(by.id('ReceiveNumberPadUnit')).tap();

markComplete('numberpad-1');
markComplete('numberpad-modern');
});

it('Cannot enter more than one zero or decimal symbol', async () => {
if (checkComplete('numberpad-2')) {
it('Can enter amounts in classic denomination', async () => {
if (checkComplete('numberpad-classic')) {
return;
}

// switch to classic denomination
await element(by.id('Settings')).tap();
await element(by.id('GeneralSettings')).tap();
await element(by.id('UnitSettings')).tap();
await element(by.id('DenominationClassic')).tap();
await element(by.id('NavigationClose')).tap();

await element(by.id('Receive')).tap();
if (await isVisible('UnderstoodButton')) {
await element(by.id('UnderstoodButton')).tap();
}
await element(by.id('SpecifyInvoiceButton')).tap();
await element(by.id('ReceiveNumberPadTextField')).tap();

// Switch to BTC
await element(by.id('ReceiveNumberPadUnit')).multiTap(2);
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).multiTap(
2,
);
// Unit set to BTC
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
await expect(element(by.text('1.00000000'))).toBeVisible();

// can only enter one decimal symbol
await element(
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
).multiTap(2);
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N1').withAncestor(by.id('ReceiveNumberPad'))).tap();
await expect(element(by.text('1.00000000'))).toBeVisible();

await element(
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
).tap();
await expect(element(by.text('1.00000000'))).toBeVisible();
await element(
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
).tap();

// reset to 0
await element(
by.id('NRemove').withAncestor(by.id('ReceiveNumberPad')),
).multiTap(8);
await element(by.id('N4').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(
by.id('NDecimal').withAncestor(by.id('ReceiveNumberPad')),
).tap();
await expect(element(by.text('1.01000000'))).toBeVisible();
await element(by.id('N2').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N0').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N6').withAncestor(by.id('ReceiveNumberPad'))).tap();
await element(by.id('N9').withAncestor(by.id('ReceiveNumberPad'))).tap();
await expect(element(by.text('4.20690000'))).toBeVisible();

markComplete('numberpad-2');
markComplete('numberpad-classic');
});
});
12 changes: 2 additions & 10 deletions e2e/onchain.e2e.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,15 +107,7 @@ d('Onchain', () => {
await element(
by.id('NRemove').withAncestor(by.id('SendAmountNumberPad')),
).multiTap(3);
// Switch to BTC
await element(by.id('SendNumberPadUnit')).multiTap(2);
await expect(element(by.text('0.00199999'))).toBeVisible();
// Switch to sats
await element(by.id('SendNumberPadUnit')).multiTap(1);
await element(
by.id('N9').withAncestor(by.id('SendAmountNumberPad')),
).multiTap(5);
await expect(element(by.text('19 999 999'))).toBeVisible();
await expect(element(by.text('199 999'))).toBeVisible();
await element(by.id('SendNumberPadMax')).tap();
await element(by.id('ContinueAmount')).tap();

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

//check Activity
// check Activity
await element(by.id('AssetsTitle')).swipe('up');
await expect(element(by.id('ActivityShort-1'))).toBeVisible();
await expect(element(by.id('ActivityShort-2'))).toBeVisible();
Expand Down
53 changes: 43 additions & 10 deletions e2e/settings.e2e.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ d('Settings', () => {

// switch back to sats
await element(by.id('TotalBalance')).tap();
await element(by.id('TotalBalance')).tap();

markComplete('settings-currency');
});

Expand All @@ -77,21 +77,54 @@ d('Settings', () => {
return;
}

// switch to Bitcoins
const fiatSymbol = await element(
by.id('MoneyFiatSymbol').withAncestor(by.id('TotalBalance')),
);
const balancePrim = await element(
by.id('MoneyPrimary').withAncestor(by.id('TotalBalance')),
);
const balanceSecd = await element(
by.id('MoneySecondary').withAncestor(by.id('TotalBalance')),
);
const unitRow = await element(
by.id('Value').withAncestor(by.id('UnitSettings')),
);

await element(by.id('Settings')).tap();
await element(by.id('GeneralSettings')).tap();
// check default unit
await expect(unitRow).toHaveText('Bitcoin');

// switch to GBP
await element(by.id('UnitSettings')).tap();
await element(by.id('GBP')).tap();
await element(by.id('NavigationBack')).tap();
await expect(unitRow).toHaveText('GBP');
await element(by.id('NavigationClose')).tap();
await expect(fiatSymbol).toHaveText('£');
await expect(balancePrim).toHaveText('0');
await expect(balanceSecd).toHaveText('.00');

// switch back to BTC
await element(by.id('Settings')).tap();
await element(by.id('GeneralSettings')).tap();
await element(by.id('UnitSettings')).tap();
await element(by.id('Bitcoin')).tap();
await expect(
element(by.id('Value').withAncestor(by.id('UnitSettings'))),
).toHaveText('Bitcoin');
await element(by.id('NavigationBack')).tap();
await expect(unitRow).toHaveText('Bitcoin');
await element(by.id('NavigationClose')).tap();
await expect(balancePrim).toHaveText('0');

// switch back to Satoshis
// switch to classic denomination
await element(by.id('Settings')).tap();
await element(by.id('GeneralSettings')).tap();
await element(by.id('UnitSettings')).tap();
await element(by.id('Satoshis')).tap();
await expect(
element(by.id('Value').withAncestor(by.id('UnitSettings'))),
).toHaveText('Satoshis');
await element(by.id('DenominationClassic')).tap();
await element(by.id('NavigationBack')).tap();
await expect(unitRow).toHaveText('Bitcoin');
await element(by.id('NavigationClose')).tap();
await expect(balancePrim).toHaveText('0.00000000');

markComplete('settings-unit');
});

Expand Down
9 changes: 4 additions & 5 deletions src/assets/icons/wallet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ export const transferIcon = (
<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}"/>
</svg>`;

export const unitBitcoinIcon = (
color = 'white',
): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="16" fill="white" fill-opacity="0.10"/>
<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}"/>
export const unitBitcoinIcon = (color = 'white'): string => `
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="16" fill="white" fill-opacity="0.1"/>
<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}"/>
</svg>
`;

Expand Down
2 changes: 1 addition & 1 deletion src/components/Amount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import MoneySymbol from './MoneySymbol';

const Amount = ({
value,
unit = EUnit.satoshi,
unit = EUnit.BTC,
style,
}: {
value: number;
Expand Down
7 changes: 2 additions & 5 deletions src/components/BalanceHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@ import { EyeIcon } from '../styles/icons';
import Money from './Money';
import { useBalance, useSwitchUnitAnnounced } from '../hooks/wallet';
import { updateSettings } from '../store/slices/settings';
import {
primaryUnitSelector,
hideBalanceSelector,
} from '../store/reselect/settings';
import { unitSelector, hideBalanceSelector } from '../store/reselect/settings';

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

const toggleHideBalance = (): void => {
Expand Down
Loading

0 comments on commit fc270d2

Please sign in to comment.