diff --git a/App.tsx b/App.tsx index b13784377..a6fb945e5 100644 --- a/App.tsx +++ b/App.tsx @@ -32,7 +32,7 @@ const zingoTheme: ThemeType = { secondaryDisabled: '#b4b4b4', text: '#ffffff', zingo: '#b4b4b4', - placeholder: 'rgba(235, 235, 245, 0.3)', + placeholder: '#8D8D8D', money: '#b4b4b4', syncing: '#ebff5a', // yellow notification: '', diff --git a/__mocks__/dataMocks/mockInfo.ts b/__mocks__/dataMocks/mockInfo.ts index fa889aea1..3002dc38b 100644 --- a/__mocks__/dataMocks/mockInfo.ts +++ b/__mocks__/dataMocks/mockInfo.ts @@ -2,7 +2,7 @@ import { ChainNameEnum, CurrencyNameEnum, InfoType } from '../../app/AppState'; import { mockIndexerServer } from './mockServers'; export const mockInfo: InfoType = { - chainName: ChainNameEnum.regtestChainName, + chainName: ChainNameEnum.testChainName, serverUri: mockIndexerServer.uri, latestBlock: 2000000, version: 'server_version', diff --git a/__tests__/ChainTypeToggle.snapshot.tsx b/__tests__/ChainTypeToggle.snapshot.tsx index befaac19b..aa2216654 100644 --- a/__tests__/ChainTypeToggle.snapshot.tsx +++ b/__tests__/ChainTypeToggle.snapshot.tsx @@ -18,7 +18,7 @@ describe('Component ChainTypeToggle - test', () => { const translate = mockTranslate; const chain = render( , diff --git a/__tests__/__snapshots__/About.snapshot.tsx.snap b/__tests__/__snapshots__/About.snapshot.tsx.snap index 55d1a180a..b6e48137f 100644 --- a/__tests__/__snapshots__/About.snapshot.tsx.snap +++ b/__tests__/__snapshots__/About.snapshot.tsx.snap @@ -118,7 +118,8 @@ exports[`Component About - test About - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { diff --git a/__tests__/__snapshots__/ChainTypeToggle.snapshot.tsx.snap b/__tests__/__snapshots__/ChainTypeToggle.snapshot.tsx.snap index 53fcaebba..1d32ef4f3 100644 --- a/__tests__/__snapshots__/ChainTypeToggle.snapshot.tsx.snap +++ b/__tests__/__snapshots__/ChainTypeToggle.snapshot.tsx.snap @@ -60,9 +60,9 @@ exports[`Component ChainTypeToggle - test ChainTypeToggle - snapshot 1`] = ` style={ { "alignItems": "center", - "borderColor": "#5a8c5a", + "borderColor": "#18bd18", "borderRadius": 5, - "borderWidth": 1, + "borderWidth": 2, "flexDirection": "row", "justifyContent": "center", "paddingHorizontal": 5, @@ -80,6 +80,23 @@ exports[`Component ChainTypeToggle - test ChainTypeToggle - snapshot 1`] = ` > text translated + < + color="#18bd18" + icon={ + { + "icon": [ + 512, + 512, + [], + "f788", + "M96 0C60.7 0 32 28.7 32 64s28.7 64 64 64l48 0 0 32-57 0c-31.6 0-58.5 23.1-63.3 54.4L1.1 364.1C.4 368.8 0 373.6 0 378.4L0 448c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-69.6c0-4.8-.4-9.6-1.1-14.4L488.2 214.4C483.5 183.1 456.6 160 425 160l-217 0 0-32 48 0c35.3 0 64-28.7 64-64S291.3 0 256 0L96 0zm0 48l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L96 80c-8.8 0-16-7.2-16-16s7.2-16 16-16zM64 424c0-13.3 10.7-24 24-24l336 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L88 448c-13.3 0-24-10.7-24-24zm48-160a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm120-24a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM160 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM328 240a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM256 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM424 240a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM352 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48z", + ], + "iconName": "cash-register", + "prefix": "fas", + } + } + size={14} + /> @@ -133,9 +150,9 @@ exports[`Component ChainTypeToggle - test ChainTypeToggle - snapshot 1`] = ` style={ { "alignItems": "center", - "borderColor": "#18bd18", + "borderColor": "#5a8c5a", "borderRadius": 5, - "borderWidth": 2, + "borderWidth": 1, "flexDirection": "row", "justifyContent": "center", "paddingHorizontal": 5, @@ -153,23 +170,6 @@ exports[`Component ChainTypeToggle - test ChainTypeToggle - snapshot 1`] = ` > text translated - < - color="#18bd18" - icon={ - { - "icon": [ - 512, - 512, - [], - "f788", - "M96 0C60.7 0 32 28.7 32 64s28.7 64 64 64l48 0 0 32-57 0c-31.6 0-58.5 23.1-63.3 54.4L1.1 364.1C.4 368.8 0 373.6 0 378.4L0 448c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-69.6c0-4.8-.4-9.6-1.1-14.4L488.2 214.4C483.5 183.1 456.6 160 425 160l-217 0 0-32 48 0c35.3 0 64-28.7 64-64S291.3 0 256 0L96 0zm0 48l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L96 80c-8.8 0-16-7.2-16-16s7.2-16 16-16zM64 424c0-13.3 10.7-24 24-24l336 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L88 448c-13.3 0-24-10.7-24-24zm48-160a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm120-24a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM160 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM328 240a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM256 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM424 240a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM352 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48z", - ], - "iconName": "cash-register", - "prefix": "fas", - } - } - size={14} - /> diff --git a/__tests__/__snapshots__/Import.snapshot.tsx.snap b/__tests__/__snapshots__/Import.snapshot.tsx.snap index 9c71b5c9b..58951e4c3 100644 --- a/__tests__/__snapshots__/Import.snapshot.tsx.snap +++ b/__tests__/__snapshots__/Import.snapshot.tsx.snap @@ -26,143 +26,144 @@ exports[`Component ImportUfvk - test ImportUfvk - snapshot 1`] = ` ] } > - - + - - - < - color="#c3c3c3" - icon={ - { - "icon": [ - 320, - 512, - [ - 9001, - ], - "f053", - "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z", - ], - "iconName": "chevron-left", - "prefix": "fas", - } - } - size={22} - /> - - - - - - + + + + + + + + - Regtest + Testnet diff --git a/__tests__/__snapshots__/Pools.snapshot.tsx.snap b/__tests__/__snapshots__/Pools.snapshot.tsx.snap index a550e6247..f5b913a55 100644 --- a/__tests__/__snapshots__/Pools.snapshot.tsx.snap +++ b/__tests__/__snapshots__/Pools.snapshot.tsx.snap @@ -118,7 +118,8 @@ exports[`Component Pools - test Pools - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { diff --git a/__tests__/__snapshots__/Rescan.snapshot.tsx.snap b/__tests__/__snapshots__/Rescan.snapshot.tsx.snap index db01a9d29..8d6d806c7 100644 --- a/__tests__/__snapshots__/Rescan.snapshot.tsx.snap +++ b/__tests__/__snapshots__/Rescan.snapshot.tsx.snap @@ -118,7 +118,8 @@ exports[`Component Rescan - test Rescan - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { diff --git a/__tests__/__snapshots__/Seed.snapshot.tsx.snap b/__tests__/__snapshots__/Seed.snapshot.tsx.snap index 9c6bec394..986169e44 100644 --- a/__tests__/__snapshots__/Seed.snapshot.tsx.snap +++ b/__tests__/__snapshots__/Seed.snapshot.tsx.snap @@ -118,7 +118,8 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { @@ -670,7 +671,8 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { @@ -1966,7 +1968,8 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { @@ -2518,7 +2521,8 @@ exports[`Component Seed - test Seed View - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { diff --git a/__tests__/__snapshots__/Send.snapshot.tsx.snap b/__tests__/__snapshots__/Send.snapshot.tsx.snap index 8778971b7..707867c97 100644 --- a/__tests__/__snapshots__/Send.snapshot.tsx.snap +++ b/__tests__/__snapshots__/Send.snapshot.tsx.snap @@ -132,7 +132,8 @@ exports[`Component Send - test Send currency USD, privacy high & mode advanced - [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { @@ -626,7 +627,8 @@ exports[`Component Send - test Send no currency, privacy normal & mode basic - s [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { diff --git a/__tests__/__snapshots__/Settings.snapshot.tsx.snap b/__tests__/__snapshots__/Settings.snapshot.tsx.snap index b1032e158..543fe97aa 100644 --- a/__tests__/__snapshots__/Settings.snapshot.tsx.snap +++ b/__tests__/__snapshots__/Settings.snapshot.tsx.snap @@ -131,7 +131,8 @@ exports[`Component Settings - test Settings - snapshot 1`] = ` [ { "fontSize": 22, - "fontWeight": "600", + "fontStyle": "normal", + "fontWeight": "400", "textAlign": "center", }, { diff --git a/app/LoadingApp/LoadingApp.tsx b/app/LoadingApp/LoadingApp.tsx index ab716965a..157b7eef2 100644 --- a/app/LoadingApp/LoadingApp.tsx +++ b/app/LoadingApp/LoadingApp.tsx @@ -77,7 +77,8 @@ import { RPCUfvkType } from '../rpc/types/RPCUfvkType'; import { RPCPerformanceLevelEnum } from '../rpc/enums/RPCPerformanceLevelEnum'; import NewSeed from './components/NewSeed'; import { AppStackParamList } from '../types'; -import Servers from './components/Servers'; +import SelectNetwork from './components/SelectNetwork'; +import ConnectIndexer from './components/ConnectIndexer'; const en = require('../translations/en.json'); const es = require('../translations/es.json'); @@ -98,7 +99,7 @@ type LoadingAppProps = { const SERVER_DEFAULT_0: ServerType = { uri: '', - chainName: ChainNameEnum.regtestChainName, + chainName: ChainNameEnum.testChainName, } as ServerType; export default function LoadingApp(props: LoadingAppProps) { @@ -233,6 +234,11 @@ export default function LoadingApp(props: LoadingAppProps) { settings.indexerServer.chainName = serverUris().filter( s => s.uri === settings.indexerServer.uri, )[0].chainName; + // if chain name changed store it in settings. + await SettingsFileImpl.writeSettings( + SettingsNameEnum.indexerServer, + settings.indexerServer, + ); } setIndexerServer(settings.indexerServer); } else { @@ -528,13 +534,13 @@ export class LoadingAppClass extends Component< if ( (!this.state.indexerServer.uri && this.state.selectIndexerServer === SelectServerEnum.custom) || - (this.state.screen === 0.5 && !this.state.startingApp) + ((this.state.screen === 0.5 || this.state.screen === 0.55) && !this.state.startingApp) ) { this.setState({ - screen: 0.5, + screen: this.state.screen === 0.55 ? 0.55 : 0.5, actionButtonsDisabled: false, fromSettings: - this.state.screen === 0.5 && !this.state.startingApp ? true : false, + (this.state.screen === 0.5 || this.state.screen === 0.55) && !this.state.startingApp ? true : false, }); return; } @@ -795,7 +801,7 @@ export class LoadingAppClass extends Component< console.log(fasterServer); this.setState({ indexerServer: fasterServer, - selectIndexerServer: SelectServerEnum.list, + selectIndexerServer: SelectServerEnum.custom, }); await SettingsFileImpl.writeSettings( SettingsNameEnum.indexerServer, @@ -803,7 +809,7 @@ export class LoadingAppClass extends Component< ); await SettingsFileImpl.writeSettings( SettingsNameEnum.selectIndexerServer, - SelectServerEnum.list, + SelectServerEnum.custom, ); // message with the result only for advanced users if (someServerIsWorking) { @@ -832,6 +838,7 @@ export class LoadingAppClass extends Component< openServers = () => { this.setState({ screen: 0.5, + fromSettings: false, actionButtonsDisabled: false, }); }; @@ -1031,6 +1038,18 @@ export class LoadingAppClass extends Component< this.componentDidMount(); }; + goConnectIndexer = () => { + this.setState({ + screen: 0.55, + }); + }; + + goSelectNetwork = () => { + this.setState({ + screen: 0.5, + }); + }; + checkIndexerServer = async (indexerServerUri: string) => { if (!indexerServerUri) { return { @@ -1039,6 +1058,8 @@ export class LoadingAppClass extends Component< }; } + console.log(indexerServerUri); + this.setState({ actionButtonsDisabled: true }); try { @@ -1580,12 +1601,23 @@ export class LoadingAppClass extends Component< /> )} {screen === 0.5 && ( - + )} + {screen === 0.55 && ( + )} {screen === 1 && ( diff --git a/app/LoadingApp/components/Servers.tsx b/app/LoadingApp/components/ConnectIndexer.tsx similarity index 52% rename from app/LoadingApp/components/Servers.tsx rename to app/LoadingApp/components/ConnectIndexer.tsx index a86db3efc..f2789c5ed 100644 --- a/app/LoadingApp/components/Servers.tsx +++ b/app/LoadingApp/components/ConnectIndexer.tsx @@ -15,7 +15,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { NetInfoStateType } from '@react-native-community/netinfo/src/index'; import { ThemeType } from '../../types'; -import { ChainNameEnum, GlobalConst, ScreenEnum } from '../../AppState'; +import { ChainNameEnum, ScreenEnum } from '../../AppState'; import { ContextAppLoading } from '../../context'; import BoldText from '../../../components/Components/BoldText'; import { ToastProvider, useToast } from 'react-native-toastier'; @@ -24,18 +24,30 @@ import RegText from '../../../components/Components/RegText'; import FadeText from '../../../components/Components/FadeText'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { serverUris } from '../../uris'; -import RNPickerSelect from 'react-native-picker-select'; import { faCheck, faWarning, } from '@fortawesome/free-solid-svg-icons'; -import ChevronDown from '../../../assets/icons/chevron-down.svg'; import XIcon from '../../../assets/icons/x.svg'; import LiquidPrimaryButton from '../../../components/Components/LiquidButton/LiquidPrimaryButton'; import { HeaderTitle } from '../../../components/Header'; -import ChainTypeToggle from '../../../components/Components/ChainTypeToggle'; -type ServersProps = { +function parseUri(uri?: string) { + if (!uri) return { base: '', port: '' }; + + try { + const url = new URL(uri); + + return { + base: `${url.protocol}//${url.hostname}`, + port: url.port, + }; + } catch { + return { base: '', port: '' }; + } +} + +type ConnectIndexerProps = { actionButtonsDisabled: boolean; setIndexerServer: (u: string, c: ChainNameEnum) => Promise; checkIndexerServer: ( @@ -44,14 +56,16 @@ type ServersProps = { ) => Promise<{ result: boolean; indexerServerUriParsed: string }>; closeServers: () => void; fromSettings: boolean; + goSelectNetwork: () => void; }; -const Servers: React.FunctionComponent = ({ +const ConnectIndexer: React.FunctionComponent = ({ actionButtonsDisabled, setIndexerServer, checkIndexerServer, closeServers, fromSettings, + goSelectNetwork, }) => { const context = useContext(ContextAppLoading); const { @@ -68,17 +82,18 @@ const Servers: React.FunctionComponent = ({ const [connected, setConnected] = useState(null); const [borderColor, setBorderColor] = useState('transparent'); const [kbOpen, setKbOpen] = useState(false); - const [indexerServerUriLocal, setIndexerServerUriLocal] = useState( - indexerServerContext.uri, - ); + + const custom: boolean = serverUris().filter(s => s.uri === indexerServerContext.uri).length === 0; + const { base, port } = parseUri(indexerServerContext.uri); + + const [indexerServerUriLocal, setIndexerServerUriLocal] = useState(custom ? base : ''); + const [indexerServerPortLocal, setIndexerServerPortLocal] = useState(custom ? port : ''); const [indexerServerChainNameLocal, setIndexerServerChainNameLocal] = useState( indexerServerContext.chainName, ); const insets = useSafeAreaInsets(); - const maxW = 520; //tablets -> landscape. - useEffect(() => { const s1 = Keyboard.addListener('keyboardDidShow', () => setKbOpen(true)); const s2 = Keyboard.addListener('keyboardDidHide', () => setKbOpen(false)); @@ -92,11 +107,11 @@ const Servers: React.FunctionComponent = ({ return !chain ? '-' : chain === ChainNameEnum.mainChainName - ? 'Mainnet' + ? 'mainnet' : chain === ChainNameEnum.testChainName - ? 'Testnet' + ? 'testnet' : chain === ChainNameEnum.regtestChainName - ? 'Regtest' + ? 'regtest' : (translate('info.unknown') as string) + ' (' + chain + ')' } @@ -120,175 +135,218 @@ const Servers: React.FunctionComponent = ({ Platform.OS === 'ios' ? insets.top : kbOpen ? insets.top : 0 } > - {fromSettings && ( - { - clear(); + { + clear(); + if (fromSettings && indexerServerChainNameLocal === ChainNameEnum.regtestChainName) { closeServers(); - }} /> - )} + } else { + goSelectNetwork(); + } + }} /> - - Indexer Server - - - - Server URL + + {`Enter your ${getChainName(indexerServerChainNameLocal)} indexer's details`} - { - setConnected(null); - setBorderColor(colors.primary); - setIndexerServerUriLocal(text); - if (serverUris().filter(s => s.uri === text).length > 0) { - setIndexerServerChainNameLocal(serverUris().filter(s => s.uri === text)[0].chainName) - } - }} - editable={!actionButtonsDisabled} - maxLength={100} - keyboardType="url" - autoCapitalize="none" - autoCorrect={false} - returnKeyType="done" - onFocus={() => { - if (connected === null) { - setBorderColor(colors.primary); - } - }} - onBlur={() => { - if (connected === null) { - setBorderColor('transparent'); - } - }} - /> + + + Indexer address + - { + setConnected(null); + setBorderColor(colors.primary); + setIndexerServerUriLocal(text); + if (serverUris().filter(s => s.uri === text).length > 0) { + setIndexerServerChainNameLocal(serverUris().filter(s => s.uri === text)[0].chainName) + } }} - disabled={actionButtonsDisabled} - useNativeAndroidPickerStyle={false} - onValueChange={(itemValue: string) => { - if (itemValue) { - Keyboard.dismiss(); - setConnected(null); + editable={!actionButtonsDisabled} + maxLength={100} + keyboardType="url" + autoCapitalize="none" + autoCorrect={false} + returnKeyType="done" + onFocus={() => { + if (connected === null) { setBorderColor(colors.primary); - setIndexerServerUriLocal(itemValue); - if (serverUris().filter(s => s.uri === itemValue).length > 0) { - setIndexerServerChainNameLocal(serverUris().filter(s => s.uri === itemValue)[0].chainName) - } } }} - > - - + onBlur={() => { + if (connected === null) { + setBorderColor('transparent'); + } + }} + /> + + {!!indexerServerUriLocal && ( + { + Keyboard.dismiss(); + setIndexerServerUriLocal(''); + setBorderColor('transparent'); + setConnected(null); + }} + > + + + + + )} - {!!indexerServerUriLocal && ( - { - Keyboard.dismiss(); - setIndexerServerUriLocal(''); - setBorderColor('transparent'); + + Port + + + + { setConnected(null); + setBorderColor(colors.primary); + setIndexerServerPortLocal(text); + if (serverUris().filter(s => s.uri === text).length > 0) { + setIndexerServerChainNameLocal(serverUris().filter(s => s.uri === text)[0].chainName) + } }} - > - { + if (connected === null) { + setBorderColor(colors.primary); + } + }} + onBlur={() => { + if (connected === null) { + setBorderColor('transparent'); + } + }} + /> + + {!!indexerServerPortLocal && ( + { + Keyboard.dismiss(); + setIndexerServerPortLocal(''); + setBorderColor('transparent'); + setConnected(null); }} > - - - - )} - + + + + + )} + - s.uri === indexerServerUriLocal).length > 0 || actionButtonsDisabled} - /> + = ({ { - // using params - setIndexerServer(indexerServerUriLocal, indexerServerChainNameLocal); + let newIndexerServerChainNameLocal: ChainNameEnum = indexerServerChainNameLocal; + if ( + serverUris().filter(s => s.uri === `${indexerServerUriLocal}:${indexerServerPortLocal}`) + .length > 0 + ) { + newIndexerServerChainNameLocal = serverUris().filter( + s => s.uri === `${indexerServerUriLocal}:${indexerServerPortLocal}`, + )[0].chainName; + } + setIndexerServer(`${indexerServerUriLocal}:${indexerServerPortLocal}`, newIndexerServerChainNameLocal); Keyboard.dismiss(); clear(); // the App needs some time to store data. @@ -401,17 +467,19 @@ const Servers: React.FunctionComponent = ({ ) : ( { setConnected(null); setBorderColor('transparent'); const { result: _connected, indexerServerUriParsed: _indexerServerUri, - } = await checkIndexerServer(indexerServerUriLocal, indexerServerChainNameLocal); + } = await checkIndexerServer(`${indexerServerUriLocal}:${indexerServerPortLocal}`, indexerServerChainNameLocal); setConnected(_connected); // using local state - setIndexerServerUriLocal(_indexerServerUri); + const { base: basee, port: portt } = parseUri(_indexerServerUri); + setIndexerServerUriLocal(basee); + setIndexerServerPortLocal(portt); if (_connected) { setBorderColor('#0E9634'); } else { @@ -430,4 +498,4 @@ const Servers: React.FunctionComponent = ({ ); }; -export default Servers; +export default ConnectIndexer; diff --git a/app/LoadingApp/components/Import.tsx b/app/LoadingApp/components/Import.tsx index 9b24c3984..31403bca6 100644 --- a/app/LoadingApp/components/Import.tsx +++ b/app/LoadingApp/components/Import.tsx @@ -190,6 +190,13 @@ const Import: React.FunctionComponent = ({ Platform.OS === 'ios' ? insets.top : kbOpen ? insets.top : 0 } > + { + clear(); + onClickCancel(); + }} + /> = ({ paddingHorizontal: 10, }} > - { - clear(); - onClickCancel(); - }} - /> Promise; + checkIndexerServer: ( + indexerServerUri: string, + indexerServerChainName: ChainNameEnum, + ) => Promise<{ result: boolean; indexerServerUriParsed: string }>; + closeServers: () => void; + fromSettings: boolean; + goConnectIndexer: () => void; +}; + +const SelectNetwork: React.FunctionComponent = ({ + actionButtonsDisabled, + setIndexerServer, + checkIndexerServer, + closeServers, + fromSettings, + goConnectIndexer, +}) => { + const context = useContext(ContextAppLoading); + const { + netInfo, + translate, + snackbars, + removeFirstSnackbar, + indexerServer: indexerServerContext, + } = context; + const { colors } = useTheme() as ThemeType; + const { clear } = useToast(); + const screenName = ScreenEnum.Servers; + + const [connected, setConnected] = useState(null); + const [borderColor, setBorderColor] = useState('transparent'); + const [kbOpen, setKbOpen] = useState(false); + const [indexerServerUriLocal, setIndexerServerUriLocal] = useState( + indexerServerContext.uri ? indexerServerContext.uri : serverUris()[0].uri, + ); + const [indexerServerChainNameLocal, setIndexerServerChainNameLocal] = useState( + indexerServerContext.uri ? indexerServerContext.chainName : serverUris()[0].chainName, + ); + + const insets = useSafeAreaInsets(); + + useEffect(() => { + const s1 = Keyboard.addListener('keyboardDidShow', () => setKbOpen(true)); + const s2 = Keyboard.addListener('keyboardDidHide', () => setKbOpen(false)); + return () => { + s1.remove(); + s2.remove(); + }; + }, []); + + console.log('Render Select Network', indexerServerContext); + + return ( + + + + + {fromSettings && ( + { + clear(); + closeServers(); + }} /> + )} + + + {!fromSettings && ( + + Select network + + )} + + + Choose the network this wallet will be operating on + + + { + setIndexerServerUriLocal(serverUris()[0].uri); + setIndexerServerChainNameLocal(ChainNameEnum.testChainName); + setBorderColor('transparent'); + setConnected(null); + }} + > + + + + + + + Server A + + + {serverUris()[0].uri} + + + + + + { + setIndexerServerUriLocal(serverUris()[1].uri); + setIndexerServerChainNameLocal(ChainNameEnum.testChainName); + setBorderColor('transparent'); + setConnected(null); + }} + > + + + + + + + Server B + + + {serverUris()[1].uri} + + + + + + + + OR + + + + { + //setIndexerServerUriLocal(''); + setIndexerServerChainNameLocal(ChainNameEnum.testChainName); + setIndexerServer(indexerServerUriLocal, ChainNameEnum.testChainName); + setBorderColor('transparent'); + setConnected(null); + goConnectIndexer(); + }} + > + + + + + + + Custom + + + {indexerServerUriLocal !== serverUris()[0].uri && indexerServerUriLocal !== serverUris()[1].uri ? indexerServerUriLocal : ''} + + + + + + {!fromSettings && ( + <> + + + OR + + + + + { + //setIndexerServerUriLocal(''); + setIndexerServerChainNameLocal(ChainNameEnum.regtestChainName); + setIndexerServer(indexerServerUriLocal, ChainNameEnum.regtestChainName); + setBorderColor('transparent'); + setConnected(null); + goConnectIndexer(); + }} + > + + Use regtest + + + + + )} + + {(!netInfo.isConnected || + netInfo.type === NetInfoStateType.cellular || + netInfo.isConnectionExpensive) && + false && ( + <> + + {translate('report.networkstatus') as string} + + + + {!netInfo.isConnected && ( + + {' '} + {translate('report.nointernet') as string}{' '} + + )} + {netInfo.type === NetInfoStateType.cellular && ( + + {' '} + {translate('report.cellulardata') as string}{' '} + + )} + {netInfo.isConnectionExpensive && ( + + {' '} + {translate('report.connectionexpensive') as string}{' '} + + )} + + + + )} + + + + {actionButtonsDisabled && ( + + )} + {connected !== null && connected && ( + + )} + {connected !== null && !connected && ( + + )} + + {actionButtonsDisabled + ? 'Connecting...' + : connected === null + ? '' + : connected + ? 'Connected' + : 'Could not connect to indexer'} + + + + + {connected ? ( + { + let newIndexerServerChainNameLocal: ChainNameEnum = indexerServerChainNameLocal; + if ( + serverUris().filter(s => s.uri === indexerServerUriLocal) + .length > 0 + ) { + newIndexerServerChainNameLocal = serverUris().filter( + s => s.uri === indexerServerUriLocal, + )[0].chainName; + } + setIndexerServer(indexerServerUriLocal, newIndexerServerChainNameLocal); + Keyboard.dismiss(); + clear(); + // the App needs some time to store data. + setTimeout(() => { + closeServers(); + }, 100); + }} + style={{ + alignSelf: 'stretch', + }} + /> + ) : ( + { + setConnected(null); + setBorderColor('transparent'); + const { + result: _connected, + indexerServerUriParsed: _indexerServerUri, + } = await checkIndexerServer(indexerServerUriLocal, indexerServerChainNameLocal); + setConnected(_connected); + // using local state + setIndexerServerUriLocal(_indexerServerUri); + if (_connected) { + setBorderColor('#0E9634'); + } else { + setBorderColor('#ff383c'); + } + Keyboard.dismiss(); + }} + style={{ + alignSelf: 'stretch', + }} + /> + )} + + + + ); +}; + +export default SelectNetwork; diff --git a/app/uris/serverUris.ts b/app/uris/serverUris.ts index f573575e5..3002d6de9 100644 --- a/app/uris/serverUris.ts +++ b/app/uris/serverUris.ts @@ -19,14 +19,6 @@ const serverUris = (): ServerUrisType[] => { latency: null, obsolete: false, }, - { - uri: 'http://127.0.0.1:18234', - region: 'CrossLink RegTest', - chainName: ChainNameEnum.regtestChainName, - default: true, - latency: null, - obsolete: false, - }, ]; }; diff --git a/assets/icons/computer-blue.svg b/assets/icons/computer-blue.svg new file mode 100644 index 000000000..32d81ec38 --- /dev/null +++ b/assets/icons/computer-blue.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/icons/computer-white.svg b/assets/icons/computer-white.svg new file mode 100644 index 000000000..e643901e1 --- /dev/null +++ b/assets/icons/computer-white.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/components/Components/LiquidButton/LiquidPrimaryButton.tsx b/components/Components/LiquidButton/LiquidPrimaryButton.tsx index 98ad3b2ba..238518c45 100644 --- a/components/Components/LiquidButton/LiquidPrimaryButton.tsx +++ b/components/Components/LiquidButton/LiquidPrimaryButton.tsx @@ -36,7 +36,7 @@ const LiquidPrimaryButton: React.FC = ({ const { colors } = useTheme() as ThemeType; const [, setPressed] = useState(false); - const primary = disabled ? 'transparent' : (tintColor ?? colors.primary); + const primary = disabled ? colors.secondary : (tintColor ?? colors.primary); if (!isLiquidGlassSupported) { return ( diff --git a/components/Components/LiquidButton/NativePrimaryFallback.tsx b/components/Components/LiquidButton/NativePrimaryFallback.tsx index 3844925d5..6ad24d470 100644 --- a/components/Components/LiquidButton/NativePrimaryFallback.tsx +++ b/components/Components/LiquidButton/NativePrimaryFallback.tsx @@ -20,7 +20,7 @@ const NativePrimaryFallback: React.FC = ({ }) => { const { colors } = useTheme() as ThemeType; - const primary = disabled ? 'transparent' : (tintColor ?? colors.primary); + const primary = disabled ? colors.secondary : (tintColor ?? colors.primary); return ( = ({ const { clear } = useToast(); const screenName = ScreenEnum.SettingsServers; - const insets = useSafeAreaInsets(); - - const changeServer = () => { + const changeServerTesnet = () => { navigateToLoadingApp({ screen: 0.5, startingApp: false }); }; + const changeServerRegtest = () => { + navigateToLoadingApp({ screen: 0.55, startingApp: false }); + }; + return ( = ({ }} /> - = ({ borderRadius: 26, backgroundColor: colors.secondary, width: '100%', - marginTop: 20, + marginTop: 40, paddingVertical: 10, }} > @@ -221,20 +218,20 @@ const SettingsServers: React.FunctionComponent = ({ - + -