@traund/orquezta-widget-calculator 1.1.4 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.js +289 -383
  2. package/dist/index.js.map +1 -1
  3. package/dist/module.js +289 -383
  4. package/dist/module.js.map +1 -1
  5. package/package.json +1 -2
  6. package/src/components/fees.jsx +2 -3
  7. package/src/components/inputAmount.js +137 -140
  8. package/src/components/simulatorStyles.js +2 -2
  9. package/src/simulator.js +111 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@traund/orquezta-widget-calculator",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "description": "Calculator React component",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.js",
@@ -52,7 +52,6 @@
52
52
  "@mui/icons-material": "^6.1.0",
53
53
  "@mui/lab": "^6.0.0-alpha.173",
54
54
  "@mui/material": "^6.1.0",
55
- "@mui/styles": "^6.4.12",
56
55
  "aws-sdk": "^2.1555.0",
57
56
  "axios": "^0.21.1",
58
57
  "crypto-js": "^4.2.0",
package/src/components/fees.jsx CHANGED
@@ -8,12 +8,11 @@ const Fees = (props) => {
8
8
 
9
9
  const { content, details, simulatorMode, walletName = "", locale } = props;
10
10
  const [isUSDTReceiver, setIsUSDTReceiver] = useState(false);
11
-
12
11
  useEffect(() => {
13
12
  setIsUSDTReceiver(details.currencyReceiver == "USDT")
14
13
  }, [details])
15
14
 
16
- return <Grid container direction="column" spacing={0} sx={{ marginBottom: 15 }}>
15
+ return <Grid container direction="column" spacing={0} >
17
16
  <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
18
17
  <Grid container spacing={1}>
19
18
  <Grid size={{ xs: 1}}>
@@ -92,7 +91,7 @@ const Fees = (props) => {
92
91
  </Grid>
93
92
  }
94
93
  <Grid size={{ xs: 12}}>
95
- <Divider sx={{ margin: 4 }}></Divider>
94
+ <Divider ></Divider>
96
95
  </Grid>
97
96
  {(details.showTotalFees && !isUSDTReceiver) &&
98
97
  <Grid size={{ xs: 12}} sx={{ display: "contents" }}>
package/src/components/inputAmount.js CHANGED
@@ -9,154 +9,151 @@ import Typography from '@mui/material/Typography';
9
9
  import Grid from '@mui/material/Grid2';
10
10
  import FlagsHelpers from "./../helpers/flagsHelpers";
11
11
  import { matchSorter } from "match-sorter";
12
- import componentStyles from "./componentStyles";
13
12
 
14
13
  const filterOptions = (options, { inputValue }) => {
15
- return matchSorter(options, inputValue, { keys: ["label", "currency"] });
16
- }
14
+ return matchSorter(options, inputValue, { keys: ["label", "currency"] });
15
+ };
17
16
 
18
17
  const InputAmount = (props) => {
19
- const classes = componentStyles;
18
+ const {
19
+ id,
20
+ content,
21
+ user,
22
+ onChangeAmount,
23
+ onChangeCountry,
24
+ disabled = false
25
+ } = props;
20
26
 
21
- const {
22
- id,
23
- content,
24
- user,
25
- onChangeAmount,
26
- onChangeCountry,
27
- disabled = false
28
- } = props;
27
+ let transferOptions = user.transferOptions;
28
+ let selectedOption = user.selectedOption;
29
29
 
30
- let transferOptions = user.transferOptions;
31
- let selectedOption = user.selectedOption;
32
- let labels = {
33
- "transfer-sender": content.common.sender.transfer_action,
34
- "transfer-receiver": content.common.receiver.transfer_action,
35
- "collect-sender": content.common.sender.collect_action,
36
- "collect-receiver": content.common.receiver.collect_action,
37
- "wallet-sender": content.common.sender.wallet_action,
38
- "wallet-receiver": content.common.receiver.wallet_action
39
- }
30
+ let labels = {
31
+ "transfer-sender": content.common.sender.transfer_action,
32
+ "transfer-receiver": content.common.receiver.transfer_action,
33
+ "collect-sender": content.common.sender.collect_action,
34
+ "collect-receiver": content.common.receiver.collect_action,
35
+ "wallet-sender": content.common.sender.wallet_action,
36
+ "wallet-receiver": content.common.receiver.wallet_action
37
+ }
40
38
 
39
+ return (
40
+ <Grid container direction="column" spacing={0}>
41
+ <Grid size={{ xs: 12 }}>
42
+ <Typography
43
+ gutterBottom
44
+ variant="subtitle1"
45
+ sx={{
46
+ fontFamily: "Poppins",
47
+ fontWeight: 500,
48
+ fontSize: "16px",
49
+ lineHeight: "20px",
50
+ color: "#000F37"
51
+ }}
52
+ >
53
+ {labels[id]}
54
+ </Typography>
55
+ </Grid>
41
56
 
42
- return (
43
- <>
44
- <Grid container direction="column" spacing={0}>
45
- <Grid size={{ xs: 12}}>
46
- <Typography
47
- style={classes.labelAmount}
48
- gutterBottom
49
- variant="subtitle1"
50
- component="div"
51
- >
52
- {labels[id]}
53
- </Typography>
54
- </Grid>
55
- <Grid size={{ xs: 12}}>
56
- <Grid container>
57
- <Grid size={{ xs: 5}}>
58
- <Paper style={classes.inputAmount}>
59
- <InputBase
60
- id={id}
61
- style={classes.inputAmountText}
62
- required
63
- value={user.isLoading || user.isDisabled ? "" : (user.amount > 0 ? user.amount.toString() : "").toString()}
64
- type="number"
65
- disabled={user.isLoading || user.isDisabled || disabled}
66
- startAdornment={
67
- <InputAdornment
68
- position="start"
69
- style={{ marginTop: "0px" }}
70
- >
71
- <span> {user.isLoading && !user.isDisabled && <CircularProgress size={18} />} </span>
72
- </InputAdornment>
73
- }
74
- inputprops={{
75
- inputProps: { min: user.minAmount, max: user.maxAmount },
76
- }}
77
- onChange={onChangeAmount}
78
- />
79
- </Paper>
80
- </Grid>
81
- <Grid size={{ xs: 7}}>
82
- <Autocomplete
83
- disabled={user.isLoading || user.isDisabled}
84
- options={transferOptions}
85
- style={{
86
- fontSize: 12,
87
- fontWeight: 600,
88
- "& > span": {
89
- marginRight: 10,
90
- fontSize: 18,
91
- },
92
- }}
93
- filterOptions={filterOptions}
94
- value={
95
- transferOptions.find(x => x.code == selectedOption.code)
96
- }
97
- autoHighlight
98
- getOptionLabel={(option) =>
99
- `${option?.currency || ""}`
100
- }
101
- renderOption={(props, option) => {
102
- const { key, ...restProps } = props;
103
- return (
104
- <>
105
- <span style={{ marginRight: "5px" }}>
106
- <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
107
- </span>
108
- {" "}
109
- {option?.currency || ""}
110
- </>
111
- );
112
- }}
113
- disableClearable
114
- renderInput={(params) => (
115
- <Paper variant="outlined" style={classes.rootFlags} >
116
- <TextField
117
- style={{ fontSize: "15px" }}
118
- {...params}
119
- variant="standard"
120
- InputProps={{
121
- ...params.InputProps,
122
- startAdornment: (
123
- <FlagsHelpers
124
- code={selectedOption.code == "PE-USD" ?
125
- "PE" :
126
- selectedOption.code
127
- }>
128
- </FlagsHelpers>
129
- ),
130
- disableUnderline: true,
131
- }}
132
- />
133
- </Paper>
134
- )}
135
- onChange={onChangeCountry}
136
- />
137
- </Grid>
138
- </Grid>
139
- </Grid>
140
- <Grid size={{ xs: 12}}>
141
- {!user.isLoading && !user.isDisabled && (
142
- <FormHelperText style={{ color: "red" }}>
143
- {(user.amount < user.minAmount &&
144
- content.common.min_value.replace(
145
- "minValue",
146
- user.minAmount
147
- )) ||
148
- (user.amount > user.maxAmount &&
149
- content.common.max_value.replace(
150
- "maxValue",
151
- user.maxAmount
152
- ))}
153
- </FormHelperText>
57
+ <Grid size={{ xs: 12 }}>
58
+ <Grid container>
59
+ <Grid size={{ xs: 5 }}>
60
+ <Paper
61
+ sx={{
62
+ background: "#C7CDD7",
63
+ borderRadius: "2px"
64
+ }}
65
+ >
66
+ <InputBase
67
+ id={id}
68
+ sx={{
69
+ ml: "10px",
70
+ fontFamily: "Poppins",
71
+ fontWeight: 600,
72
+ fontSize: "20px",
73
+ lineHeight: "20px",
74
+ color: "#000F37",
75
+ textAlign: "center"
76
+ }}
77
+ required
78
+ value={
79
+ user.isLoading || user.isDisabled
80
+ ? ""
81
+ : user.amount > 0
82
+ ? user.amount.toString()
83
+ : ""
84
+ }
85
+ type="number"
86
+ disabled={user.isLoading || user.isDisabled || disabled}
87
+ startAdornment={
88
+ <InputAdornment position="start" >
89
+ {user.isLoading && !user.isDisabled && (
90
+ <CircularProgress size={18} />
154
91
  )}
155
- </Grid>
92
+ </InputAdornment>
93
+ }
94
+ onChange={onChangeAmount}
95
+ />
96
+ </Paper>
97
+ </Grid>
156
98
 
157
- </Grid>
158
- </>
159
- );
160
- }
99
+ <Grid size={{ xs: 7 }}>
100
+ <Autocomplete
101
+ disabled={user.isLoading || user.isDisabled}
102
+ options={transferOptions}
103
+ filterOptions={filterOptions}
104
+ value={transferOptions.find((x) => x.code == selectedOption.code)}
105
+ autoHighlight
106
+ getOptionLabel={(option) => `${option?.currency || ""}`}
107
+ renderOption={(props, option) => (
108
+ <li {...props}>
109
+ <span style={{ marginRight: "5px" }}>
110
+ <FlagsHelpers code={option.code === "PE-USD" ? "PE" : option.code} />
111
+ </span>
112
+ {option?.currency || ""}
113
+ </li>
114
+ )}
115
+ disableClearable
116
+ onChange={onChangeCountry}
117
+ renderInput={(params) => (
118
+ <Paper
119
+ variant="outlined"
120
+ sx={{
121
+ fontFamily: "Poppins",
122
+ padding: "5px 5px",
123
+ minWidth: 100,
124
+ borderWidth: 0
125
+ }}
126
+ >
127
+ <TextField
128
+ {...params}
129
+ variant="standard"
130
+ InputProps={{
131
+ ...params.InputProps,
132
+ startAdornment: (
133
+ <FlagsHelpers code={selectedOption.code === "PE-USD" ? "PE" : selectedOption.code} />
134
+ ),
135
+ disableUnderline: true
136
+ }}
137
+ />
138
+ </Paper>
139
+ )}
140
+ />
141
+ </Grid>
142
+ </Grid>
143
+ </Grid>
161
144
 
162
- export default InputAmount;
145
+ <Grid size={{ xs: 12 }}>
146
+ {!user.isLoading && !user.isDisabled && (
147
+ <FormHelperText sx={{ color: "red" }}>
148
+ {(user.amount < user.minAmount &&
149
+ content.common.min_value.replace("minValue", user.minAmount)) ||
150
+ (user.amount > user.maxAmount &&
151
+ content.common.max_value.replace("maxValue", user.maxAmount))}
152
+ </FormHelperText>
153
+ )}
154
+ </Grid>
155
+ </Grid>
156
+ );
157
+ };
158
+
159
+ export default InputAmount;
package/src/components/simulatorStyles.js CHANGED
@@ -1,9 +1,9 @@
1
- import { makeStyles } from '@mui/styles';
1
+
2
2
  import { createTheme } from '@mui/material/styles';
3
3
 
4
4
  const theme = createTheme();
5
5
 
6
- export const simulatorStyles = makeStyles(() => ({
6
+ export const simulatorStyles = (() => ({
7
7
  // 'input[type=number]::-webkit-outer-spin-button': {
8
8
  // '-webkit-appearance': 'none',
9
9
  // margin: 0
package/src/simulator.js CHANGED
@@ -1,14 +1,9 @@
1
- import React, { useState, useEffect, useCallback, useRef, Fragment } from "react";
2
- import Button from '@mui/material/Button';
3
- import Typography from '@mui/material/Typography';
4
- import Paper from '@mui/material/Paper';
5
- import Divider from '@mui/material/Divider';
6
- import Chip from '@mui/material/Chip';
7
- import Grid from '@mui/material/Grid2';
1
+ import React, { useState, useEffect, useCallback, useRef,Fragment } from "react";
2
+ import { Grid, Paper, Typography, Chip, Button,Divider } from "@mui/material";
8
3
  import en from "./locale/en";
9
4
  import es from "./locale/es";
10
5
  import loadFirebaseDB from "./firebase.config";
11
- import Endpoints from "./core/endpoints";
6
+ import Endpoints from "../src/core/endpoints";
12
7
  import TransferUser from "./model/transferUser";
13
8
  import { TransferType, UserType, SimulatorMode } from "./model/enums";
14
9
  import CalculateHelper from "./utils/calculateHelper";
@@ -23,6 +18,7 @@ import PaymentMethodSelector from "./components/paymentMethodSelector";
23
18
  import { simulatorStyles } from "./components/simulatorStyles";
24
19
  import { countries } from "./data/countries";
25
20
  import { applyTaxDiscount } from "./helpers/taxDiscount";
21
+
26
22
  const useStyles = simulatorStyles;
27
23
 
28
24
  function Simulator(props) {
@@ -906,7 +902,7 @@ function Simulator(props) {
906
902
  cleanSimulationMode(storeId, simulatorMode, sender?.selectedOption?.type, sender?.selectedOption?.code, sender?.amount, receiver?.selectedOption?.code, sender?.currency, receiver?.currency);
907
903
  }, [simulatorMode])
908
904
 
909
- return <main>
905
+ return <Fragment>
910
906
  <link
911
907
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
912
908
  rel="stylesheet"
@@ -915,18 +911,35 @@ function Simulator(props) {
915
911
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
916
912
  rel="stylesheet"
917
913
  />
918
- <Paper className={classes.root}>
914
+ <Paper
915
+ sx={{
916
+ fontFamily: "Poppins",
917
+ padding: "26px 21px 0 21px",
918
+ maxWidth: 480,
919
+ flexGrow: 1,
920
+ borderRadius: "24px",
921
+ borderWidth: "1px",
922
+ backgroundColor: "#FFFFFF",
923
+ boxShadow: "0px 4px 7px rgba(61, 71, 86, 0.52)"
924
+ }}
925
+ >
919
926
  <Grid container direction="column" spacing={0}>
920
927
  <Grid
921
928
  container
922
929
  direction="row"
923
930
  justifyContent="center"
924
931
  alignItems="center"
925
- sx={{ paddingBottom: "10px" }}
932
+ style={{ paddingBottom: "10px" }}
926
933
  >
927
- <Grid size="grow">
934
+ <Grid item>
928
935
  <Typography
929
- className={classes.labelAmount}
936
+ sx={{
937
+ fontFamily: "Poppins",
938
+ fontWeight: 500,
939
+ fontSize: "16px",
940
+ lineHeight: "20px",
941
+ color: "#000F37"
942
+ }}
930
943
  gutterBottom
931
944
  variant="subtitle1"
932
945
  component="div"
@@ -941,33 +954,72 @@ function Simulator(props) {
941
954
  direction="row"
942
955
  justifyContent="center"
943
956
  alignItems="center"
944
- sx={{ paddingBottom: "10px" }}
957
+ style={{ paddingBottom: "10px" }}
945
958
  >
946
- <Grid size={{ xs: 9}}>
959
+ <Grid item xs={9}>
947
960
  <Grid container spacing={3} justifyContent="center">
948
- <Grid size="grow">
949
- <Chip
950
- className={(simulatorMode === SimulatorMode.SEND ? classes.chipOptionChecked : classes.chipOptionUnchecked)}
951
- label={content.simulator.header_chips.option_send}
961
+ <Grid item>
962
+ <Chip
952
963
  variant="outlined"
953
- onClick={() => { handleSimulatorMode(SimulatorMode.SEND) }}
964
+ label={content.simulator.header_chips.option_send}
965
+ onClick={() => handleSimulatorMode(SimulatorMode.SEND)}
966
+ sx={{
967
+ ...(simulatorMode === SimulatorMode.SEND
968
+ ? {
969
+ backgroundColor: "#008AFF",
970
+ borderWidth: 0,
971
+ color: "#F4F4F4",
972
+ "&:hover": { backgroundColor: "#008AFF" },
973
+ "&:focus": { backgroundColor: "#008AFF" }
974
+ }
975
+ : {
976
+ backgroundColor: "#FFFFFF",
977
+ borderColor: "#008AFF",
978
+ color: "#008AFF",
979
+ "&:hover": { backgroundColor: "#FFFFFF" }
980
+ }),
981
+ fontFamily: "Poppins",
982
+ fontWeight: 400,
983
+ fontSize: "16px",
984
+ lineHeight: "20px"
985
+ }}
954
986
  />
987
+
955
988
  </Grid>
956
- <Grid size="grow">
989
+ <Grid item>
957
990
  <Chip
958
- className={(simulatorMode === SimulatorMode.COLLECT ? classes.chipOptionChecked : classes.chipOptionUnchecked)}
959
- label={content.simulator.header_chips.option_receive}
960
991
  variant="outlined"
961
- onClick={() => { handleSimulatorMode(SimulatorMode.COLLECT) }}
992
+ label={content.simulator.header_chips.option_receive}
993
+ onClick={() => handleSimulatorMode(SimulatorMode.COLLECT)}
994
+ sx={{
995
+ ...(simulatorMode === SimulatorMode.COLLECT
996
+ ? {
997
+ backgroundColor: "#008AFF",
998
+ borderWidth: 0,
999
+ color: "#F4F4F4",
1000
+ "&:hover": { backgroundColor: "#008AFF" },
1001
+ "&:focus": { backgroundColor: "#008AFF" }
1002
+ }
1003
+ : {
1004
+ backgroundColor: "#FFFFFF",
1005
+ borderColor: "#008AFF",
1006
+ color: "#008AFF",
1007
+ "&:hover": { backgroundColor: "#FFFFFF" }
1008
+ }),
1009
+ fontFamily: "Poppins",
1010
+ fontWeight: 400,
1011
+ fontSize: "16px",
1012
+ lineHeight: "20px"
1013
+ }}
962
1014
  />
963
1015
  </Grid>
964
1016
  </Grid>
965
1017
  </Grid>
966
1018
  </Grid>
967
1019
  {(simulatorMode === SimulatorMode.SEND) ?
968
- <Grid size={{ xs: 12}}>
1020
+ <Grid item xs={12}>
969
1021
  <Grid container>
970
- <Grid size={{ xs: 12}} sx={{ paddingBottom: "15px" }}>
1022
+ <Grid item xs={12} style={{ paddingBottom: "15px" }}>
971
1023
  <InputAmount
972
1024
  id="transfer-sender"
973
1025
  content={content}
@@ -977,7 +1029,7 @@ function Simulator(props) {
977
1029
  />
978
1030
  </Grid>
979
1031
  {!sender.isLoading && !receiver.isLoading &&
980
- <Grid size={{ xs: 12}}>
1032
+ <Grid item xs={12}>
981
1033
  <Fees
982
1034
  content={content}
983
1035
  details={transferDetail}
@@ -987,7 +1039,7 @@ function Simulator(props) {
987
1039
  />
988
1040
  </Grid>}
989
1041
  {(sender.selectedOption.type == TransferType.COUNTRY) ?
990
- <Grid size={{ xs: 12}} sx={{ paddingBottom: "15px" }}>
1042
+ <Grid item xs={12} style={{ paddingBottom: "15px" }}>
991
1043
 
992
1044
  <InputAmount
993
1045
  id="transfer-receiver"
@@ -999,7 +1051,7 @@ function Simulator(props) {
999
1051
  />
1000
1052
 
1001
1053
  </Grid> :
1002
- <Grid size={{ xs: 12}} sx={{ paddingBottom: "15px" }}>
1054
+ <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1003
1055
 
1004
1056
  <InputAmount
1005
1057
  id="wallet-receiver"
@@ -1016,9 +1068,9 @@ function Simulator(props) {
1016
1068
  </Grid> : ""
1017
1069
  }
1018
1070
  {(simulatorMode === SimulatorMode.COLLECT) ?
1019
- <Grid size={{ xs: 12}}>
1071
+ <Grid item xs={12}>
1020
1072
  <Grid container>
1021
- <Grid size={{ xs: 12}} sx={{ paddingBottom: "15px" }}>
1073
+ <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1022
1074
  <InputAmount
1023
1075
  id="collect-sender"
1024
1076
  content={content}
@@ -1027,7 +1079,7 @@ function Simulator(props) {
1027
1079
  onChangeCountry={handleSendCountry}
1028
1080
  />
1029
1081
  </Grid>
1030
- {!sender.isLoading && !receiver.isLoading && <Grid size={{ xs: 12}}>
1082
+ {!sender.isLoading && !receiver.isLoading && <Grid item xs={12}>
1031
1083
  <Fees
1032
1084
  content={content}
1033
1085
  details={transferDetail}
@@ -1036,7 +1088,7 @@ function Simulator(props) {
1036
1088
  locale={locale}
1037
1089
  />
1038
1090
  </Grid>}
1039
- <Grid size={{ xs: 12}} sx={{ paddingBottom: "15px" }}>
1091
+ <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1040
1092
  <InputAmount
1041
1093
  id="collect-receiver"
1042
1094
  content={content}
@@ -1052,12 +1104,12 @@ function Simulator(props) {
1052
1104
 
1053
1105
  {
1054
1106
  (["VE", "AR"].includes(receiver.selectedOption.code) && !receiver.isLoading) &&
1055
- <Grid size={{ xs: 12}} sx={{ marginTop: "15px", marginBottom: "15px" }}>
1107
+ <Grid item xs={12} style={{ marginTop: 15 }}>
1056
1108
  <PaymentMethodSelector paymentMethods={receiver.paymentMethods} onChange={handleOnchangePaymentMethod} />
1057
1109
  </Grid>
1058
1110
  }
1059
1111
 
1060
- {!props.onlyView && <Grid size={{ xs: 12}} sx={{ marginBottom: "15px" }}>
1112
+ {!props.onlyView && <Grid item xs={12} style={{ }}>
1061
1113
  <Disclaimers
1062
1114
  simulatorMode={simulatorMode}
1063
1115
  transferType={sender.selectedOption.type}
@@ -1066,26 +1118,41 @@ function Simulator(props) {
1066
1118
  option={sender.selectedOption}
1067
1119
  />
1068
1120
  </Grid>}
1069
- {!props.onlyView && <Grid size={{ xs: 12}}>
1070
- <Button className={classes.button} variant="contained" onClick={handleNext}
1071
- disabled={sender.isLoading || receiver.isLoading || isOutOfLimits()} fullWidth>
1121
+ {!props.onlyView && <Grid item xs={12}>
1122
+ <Button
1123
+ sx={{
1124
+ background: "#008AFF",
1125
+ borderWidth: 0,
1126
+ fontFamily: "Poppins",
1127
+ fontWeight: 400,
1128
+ fontSize: "16px",
1129
+ lineHeight: "20px",
1130
+ mt:"20px",
1131
+ color: "#F4F4F4",
1132
+ "&:hover": { background: "#008AFF" }
1133
+ }}
1134
+ variant="contained"
1135
+ fullWidth
1136
+ disabled={sender.isLoading || receiver.isLoading || isOutOfLimits()}
1137
+ onClick={handleNext}
1138
+ >
1072
1139
  {content.simulator.footer_action_button}
1073
1140
  </Button>
1074
1141
  </Grid>}
1075
- <Grid size={{ xs: 12}} sx={{ textAlign: "center", marginTop: "15px", marginBottom: "15px" }}>
1142
+ <Grid item xs={12} style={{ marginTop: 15, marginBottom: 15, textAlign: "center" }}>
1076
1143
  {(recalculate && sender.selectedOption.type != TransferType.WALLET) && <Timer onTimeout={calculateAgain} locale={locale} />}
1077
1144
  </Grid>
1078
- <Grid size={{ xs: 12}} sx={{marginTop: "30px"}}>
1145
+ <Grid item xs={12} style={{ marginTop: "30px" }}>
1079
1146
  <Divider ></Divider>
1080
1147
  </Grid>
1081
- <Grid size={{ xs: 12}} container
1148
+ <Grid item xs={12} container
1082
1149
  direction="row"
1083
1150
  justifyContent="center"
1084
1151
  alignItems="center"
1085
- sx={{ paddingBottom: "10px"}} >
1152
+ style={{ paddingBottom: "10px", }} >
1086
1153
  <Typography
1087
1154
  variant="subtitle1"
1088
- sx={{ display: "flex", alignItems: "center", textAlign: "center" }}
1155
+ style={{ display: "flex", alignItems: "center", textAlign: "center" }}
1089
1156
  >
1090
1157
  <span style={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
1091
1158
  <span style={{ fontWeight: "bold", fontSize: "12px", textAlign: "center" }}>Orquezta</span>
@@ -1093,7 +1160,7 @@ function Simulator(props) {
1093
1160
  </Grid>
1094
1161
  </Grid>
1095
1162
  </Paper>
1096
- </main>;
1163
+ </Fragment>;
1097
1164
  }
1098
1165
 
1099
1166
  export default Simulator;