Skip to content

Commit

Permalink
Merge branch 'frontend-account-guide'
Browse files Browse the repository at this point in the history
  • Loading branch information
thisconnect committed Oct 4, 2022
2 parents 6054a36 + 47810e4 commit 1b6370c
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 107 deletions.
22 changes: 0 additions & 22 deletions frontends/web/src/locales/en/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -554,10 +554,6 @@
"title": "What is an extended public key?"
}
},
"accountLegacyConvert": {
"text": "Go to the Bitcoin account, select receive and copy the address. Go back to your legacy account, click send, paste the copied address and tick send all. Then sign and send to move all your coins in a single transaction.",
"title": "How can I move my coins out of the Legacy account?"
},
"accountRates": {
"text": "We update exchange rates every minute from CoinGecko.",
"title": "Which exchange rates apply?"
Expand Down Expand Up @@ -807,24 +803,6 @@
}
},
"settings": {
"btc-p2pkh": {
"text": "An account that uses an old transaction format, now superseded by the Segwit address and transaction formats. If you used the BitBox with the old desktop app then this account will contain your coins. We recommend transferring your coins to a Bitcoin or Bitcoin bech32 account to save transaction fees.",
"title": "What is Bitcoin Legacy?"
},
"btc-p2sh": {
"link": {
"text": "Segregated witness benefits"
},
"text": "This is a backwards compatible Segwit account (p2sh-p2wpkh). It uses a new transaction format that saves you network fees. The address format is similar to legacy, and as such can be used with all existing Bitcoin wallets/exchanges/services.",
"title": "What is the Bitcoin account?"
},
"btc-p2wpkh": {
"link": {
"text": "Bech32 adoption"
},
"text": "Use the new Bitcoin bech32 address format to reap the full benefits of Segwit's cheaper network fees. Remember that this format is not accepted everywhere yet.",
"title": "What is Bitcoin bech32?"
},
"servers": {
"text": "This app communicates with the Shift Crypto servers to check for updates, load transactions, and send information to paired mobile apps.\nThe app also retrieves the latest exchange rates from CoinGecko. All conversions are calculated locally which means no data about the amount of your transaction is ever transmitted.\nNote: For Ethereum and ERC20 Tokens, we use Etherscan.io APIs.",
"title": "Which servers does this app talk to?"
Expand Down
92 changes: 7 additions & 85 deletions frontends/web/src/routes/account/account.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ import { unsubscribe, UnsubscribeList } from '../../utils/subscriptions';
import { statusChanged, syncdone } from '../../api/subscribe-legacy';
import { alertUser } from '../../components/alert/Alert';
import { Balance } from '../../components/balance/balance';
import { Entry } from '../../components/guide/entry';
import { Guide } from '../../components/guide/guide';
import { AccountGuide } from './guide';
import { HeadersSync } from '../../components/headerssync/headerssync';
import { Header } from '../../components/layout';
import { Info } from '../../components/icon';
Expand Down Expand Up @@ -227,19 +226,6 @@ class Account extends Component<Props, State> {
.catch(console.error);
};

private isBTCScriptType = (
scriptType: accountApi.ScriptType,
account: accountApi.IAccount,
accountInfo?: accountApi.ISigningConfigurationList,
): boolean => {
if (!accountInfo || accountInfo.signingConfigurations.length !== 1) {
return false;
}
const config = accountInfo.signingConfigurations[0].bitcoinSimple;
return (account.coinCode === 'btc' || account.coinCode === 'tbtc') &&
config !== undefined && config.scriptType === scriptType;
};

private deviceIDs = (devices: TDevices) => {
return Object.keys(devices);
};
Expand All @@ -265,7 +251,6 @@ class Account extends Component<Props, State> {
transactions,
balance,
hasCard,
accountInfo,
syncedAddressesCount,
} = this.state;
const account = accounts &&
Expand Down Expand Up @@ -367,75 +352,12 @@ class Account extends Component<Props, State> {
</div>
</div>
</div>
<Guide>
<Entry key="accountDescription" entry={t('guide.accountDescription')} />
{this.isBTCScriptType('p2pkh', account, accountInfo) && (
<Entry key="guide.settings.btc-p2pkh" entry={t('guide.settings.btc-p2pkh')} />
)}
{this.isBTCScriptType('p2wpkh-p2sh', account, accountInfo) && (
<Entry key="guide.settings.btc-p2sh" entry={{
link: {
text: t('guide.settings.btc-p2sh.link.text'),
url: 'https://bitcoincore.org/en/2016/01/26/segwit-benefits/'
},
text: t('guide.settings.btc-p2sh.text'),
title: t('guide.settings.btc-p2sh.title')
}} />
)}
{this.isBTCScriptType('p2wpkh', account, accountInfo) && (
<Entry key="guide.settings.btc-p2wpkh" entry={{
link: {
text: t('guide.settings.btc-p2wpkh.link.text'),
url: 'https://en.bitcoin.it/wiki/Bech32_adoption'
},
text: t('guide.settings.btc-p2wpkh.text'),
title: t('guide.settings.btc-p2wpkh.title')
}} />
)}
{balance && balance.available.amount === '0' && (
<Entry key="accountSendDisabled" entry={t('guide.accountSendDisabled', { unit: balance.available.unit })} />
)}
<Entry key="accountReload" entry={t('guide.accountReload')} />
{transactions !== undefined && transactions.length > 0 && (
<Entry key="accountTransactionLabel" entry={t('guide.accountTransactionLabel')} />
)}
{transactions !== undefined && transactions.length > 0 && (
<Entry key="accountTransactionTime" entry={t('guide.accountTransactionTime')} />
)}
{this.isBTCScriptType('p2pkh', account, accountInfo) && (
<Entry key="accountLegacyConvert" entry={t('guide.accountLegacyConvert')} />
)}
{transactions !== undefined && transactions.length > 0 && (
<Entry key="accountTransactionAttributesGeneric" entry={t('guide.accountTransactionAttributesGeneric')} />
)}
{transactions !== undefined && transactions.length > 0 && isBitcoinBased(account.coinCode) && (
<Entry key="accountTransactionAttributesBTC" entry={t('guide.accountTransactionAttributesBTC')} />
)}
{balance && balance.hasIncoming && (
<Entry key="accountIncomingBalance" entry={t('guide.accountIncomingBalance')} />
)}
<Entry key="accountTransactionConfirmation" entry={t('guide.accountTransactionConfirmation')} />
<Entry key="accountFiat" entry={t('guide.accountFiat')} />

{ /* careful, also used in Settings */ }
<Entry key="accountRates" entry={{
link: {
text: 'www.coingecko.com',
url: 'https://www.coingecko.com/'
},
text: t('guide.accountRates.text'),
title: t('guide.accountRates.title')
}} />

<Entry key="cointracking" entry={{
link: {
text: 'CoinTracking',
url: 'https://cointracking.info/import/bitbox/?ref=BITBOX',
},
text: t('guide.cointracking.text'),
title: t('guide.cointracking.title')
}} />
</Guide>
<AccountGuide
account={account}
unit={balance?.available.unit}
hasIncomingBalance={balance && balance.hasIncoming}
hasTransactions={transactions !== undefined && transactions.length > 0}
hasNoBalance={balance && balance.available.amount === '0'} />
</div>
);
}
Expand Down
86 changes: 86 additions & 0 deletions frontends/web/src/routes/account/guide.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/**
* Copyright 2022 Shift Crypto AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { useTranslation } from 'react-i18next';
import { IAccount } from '../../api/account';
import { Entry } from '../../components/guide/entry';
import { Guide } from '../../components/guide/guide';
import { isBitcoinBased } from './utils';

type Props = {
account: IAccount;
unit?: string;
hasNoBalance?: boolean;
hasIncomingBalance?: boolean;
hasTransactions?: boolean;
};

export function AccountGuide({
account,
unit,
hasNoBalance,
hasIncomingBalance,
hasTransactions,
}: Props) {
const { t } = useTranslation();
return (
<Guide>
<Entry key="accountDescription" entry={t('guide.accountDescription')} />
{hasNoBalance && (
<Entry key="accountSendDisabled" entry={t('guide.accountSendDisabled', {
unit
})} />
)}
<Entry key="accountReload" entry={t('guide.accountReload')} />
{hasTransactions && (
<Entry key="accountTransactionLabel" entry={t('guide.accountTransactionLabel')} />
)}
{hasTransactions && (
<Entry key="accountTransactionTime" entry={t('guide.accountTransactionTime')} />
)}
{hasTransactions && (
<Entry key="accountTransactionAttributesGeneric" entry={t('guide.accountTransactionAttributesGeneric')} />
)}
{hasTransactions && isBitcoinBased(account.coinCode) && (
<Entry key="accountTransactionAttributesBTC" entry={t('guide.accountTransactionAttributesBTC')} />
)}
{hasIncomingBalance && (
<Entry key="accountIncomingBalance" entry={t('guide.accountIncomingBalance')} />
)}
<Entry key="accountTransactionConfirmation" entry={t('guide.accountTransactionConfirmation')} />
<Entry key="accountFiat" entry={t('guide.accountFiat')} />

{ /* careful, also used in Settings */ }
<Entry key="accountRates" entry={{
link: {
text: 'www.coingecko.com',
url: 'https://www.coingecko.com/'
},
text: t('guide.accountRates.text'),
title: t('guide.accountRates.title')
}} />

<Entry key="cointracking" entry={{
link: {
text: 'CoinTracking',
url: 'https://cointracking.info/import/bitbox/?ref=BITBOX',
},
text: t('guide.cointracking.text'),
title: t('guide.cointracking.title')
}} />
</Guide>
);
}

0 comments on commit 1b6370c

Please sign in to comment.