diff --git a/apps/tx-builder/src/assets/fonts/DMSans700.woff2 b/apps/tx-builder/src/assets/fonts/DMSans700.woff2 new file mode 100644 index 000000000..4b0a5ded0 Binary files /dev/null and b/apps/tx-builder/src/assets/fonts/DMSans700.woff2 differ diff --git a/apps/tx-builder/src/assets/fonts/DMSansRegular.woff2 b/apps/tx-builder/src/assets/fonts/DMSansRegular.woff2 new file mode 100644 index 000000000..21f9cbc2b Binary files /dev/null and b/apps/tx-builder/src/assets/fonts/DMSansRegular.woff2 differ diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx new file mode 100644 index 000000000..db52c68b9 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx new file mode 100644 index 000000000..c827097bc --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx new file mode 100644 index 000000000..53fb1e697 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx new file mode 100644 index 000000000..89c2e70c4 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx new file mode 100644 index 000000000..7ff362f9a --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx b/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx new file mode 100644 index 000000000..787496322 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx new file mode 100644 index 000000000..ce111fd02 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx new file mode 100644 index 000000000..5d34bd879 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx new file mode 100644 index 000000000..46dcd7a21 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx new file mode 100644 index 000000000..7b30e056b --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx b/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx new file mode 100644 index 000000000..fbc514c9e --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx b/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx new file mode 100644 index 000000000..6372e94e7 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx b/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx new file mode 100644 index 000000000..90937ac89 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +const icon = ( + + + + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx b/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx new file mode 100644 index 000000000..531776bb5 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/networkError.tsx b/apps/tx-builder/src/components/FixedIcon/images/networkError.tsx new file mode 100644 index 000000000..daff9c9e3 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/networkError.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +const icon = ( + + + + + + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/notConnected.tsx b/apps/tx-builder/src/components/FixedIcon/images/notConnected.tsx new file mode 100644 index 000000000..1b2b19246 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/notConnected.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +const icon = ( + + + + + + + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/notOwner.tsx b/apps/tx-builder/src/components/FixedIcon/images/notOwner.tsx new file mode 100644 index 000000000..e2ea0945d --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/notOwner.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +const icon = ( + + + + + + + + + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/options.tsx b/apps/tx-builder/src/components/FixedIcon/images/options.tsx new file mode 100644 index 000000000..6ab2a5ab0 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/options.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + + + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/plus.tsx b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx new file mode 100644 index 000000000..408a2bf71 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx b/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx new file mode 100644 index 000000000..9ada76f01 --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx b/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx new file mode 100644 index 000000000..43dfe865d --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const icon = ( + + + + + + + +) + +export default icon diff --git a/apps/tx-builder/src/components/FixedIcon/index.tsx b/apps/tx-builder/src/components/FixedIcon/index.tsx new file mode 100644 index 000000000..823e5a03e --- /dev/null +++ b/apps/tx-builder/src/components/FixedIcon/index.tsx @@ -0,0 +1,63 @@ +import React from 'react' + +import arrowSort from './images/arrowSort' +import connectedRinkeby from './images/connectedRinkeby' +import connectedWallet from './images/connectedWallet' +import bullit from './images/bullit' +import dropdownArrowSmall from './images/dropdownArrowSmall' +import arrowReceived from './images/arrowReceived' +import arrowReceivedWhite from './images/arrowReceivedWhite' +import arrowSent from './images/arrowSent' +import arrowSentWhite from './images/arrowSentWhite' +import threeDots from './images/threeDots' +import options from './images/options' +import plus from './images/plus' +import chevronRight from './images/chevronRight' +import chevronLeft from './images/chevronLeft' +import chevronUp from './images/chevronUp' +import chevronDown from './images/chevronDown' +import settingsChange from './images/settingsChange' +import creatingInProgress from './images/creatingInProgress' +import notOwner from './images/notOwner' +import notConnected from './images/notConnected' +import networkError from './images/networkError' + +const icons = { + arrowSort, + connectedRinkeby, + connectedWallet, + bullit, + dropdownArrowSmall, + arrowReceived, + arrowReceivedWhite, + arrowSent, + arrowSentWhite, + threeDots, + options, + plus, + chevronRight, + chevronLeft, + chevronUp, + chevronDown, + settingsChange, + creatingInProgress, + notOwner, + notConnected, + networkError, +} + +export type IconType = typeof icons +export type IconTypes = keyof IconType + +type Props = { + type: IconTypes +} + +/** + * The `FixedIcon` renders an icon + */ +function FixedIcon({ type }: Props): React.ReactElement { + return {icons[type]} +} + +export default FixedIcon diff --git a/apps/tx-builder/src/components/Icon/images/add.tsx b/apps/tx-builder/src/components/Icon/images/add.tsx new file mode 100644 index 000000000..7bfabcb56 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/add.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/addressBook.tsx b/apps/tx-builder/src/components/Icon/images/addressBook.tsx new file mode 100644 index 000000000..f31e05503 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/addressBook.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/addressBookAdd.tsx b/apps/tx-builder/src/components/Icon/images/addressBookAdd.tsx new file mode 100644 index 000000000..c5e81f589 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/addressBookAdd.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/alert.tsx b/apps/tx-builder/src/components/Icon/images/alert.tsx new file mode 100644 index 000000000..7bbb9897a --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/alert.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/allowances.tsx b/apps/tx-builder/src/components/Icon/images/allowances.tsx new file mode 100644 index 000000000..4761e4d49 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/allowances.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/apps.tsx b/apps/tx-builder/src/components/Icon/images/apps.tsx new file mode 100644 index 000000000..0d3e77a7f --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/apps.tsx @@ -0,0 +1,40 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + + ), + md: ( + + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/arrowDown.tsx b/apps/tx-builder/src/components/Icon/images/arrowDown.tsx new file mode 100644 index 000000000..6e62ad647 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/arrowDown.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/arrowLeft.tsx b/apps/tx-builder/src/components/Icon/images/arrowLeft.tsx new file mode 100644 index 000000000..4c1538e6b --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/arrowLeft.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/arrowRight.tsx b/apps/tx-builder/src/components/Icon/images/arrowRight.tsx new file mode 100644 index 000000000..1c366234c --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/arrowRight.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/arrowUp.tsx b/apps/tx-builder/src/components/Icon/images/arrowUp.tsx new file mode 100644 index 000000000..04c60b947 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/arrowUp.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/assets.tsx b/apps/tx-builder/src/components/Icon/images/assets.tsx new file mode 100644 index 000000000..76fd8f274 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/assets.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/awaitingConfirmations.tsx b/apps/tx-builder/src/components/Icon/images/awaitingConfirmations.tsx new file mode 100644 index 000000000..abf2e8fed --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/awaitingConfirmations.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/bookmark.tsx b/apps/tx-builder/src/components/Icon/images/bookmark.tsx new file mode 100644 index 000000000..528ccf212 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/bookmark.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + ), + md: ( + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/bookmarkFilled.tsx b/apps/tx-builder/src/components/Icon/images/bookmarkFilled.tsx new file mode 100644 index 000000000..a8fdec094 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/bookmarkFilled.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + ), + md: ( + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/camera.tsx b/apps/tx-builder/src/components/Icon/images/camera.tsx new file mode 100644 index 000000000..e7caa52be --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/camera.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/chain.tsx b/apps/tx-builder/src/components/Icon/images/chain.tsx new file mode 100644 index 000000000..32acfada4 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/chain.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/check.tsx b/apps/tx-builder/src/components/Icon/images/check.tsx new file mode 100644 index 000000000..4487379d6 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/check.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/circleCheck.tsx b/apps/tx-builder/src/components/Icon/images/circleCheck.tsx new file mode 100644 index 000000000..7746709e7 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/circleCheck.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/circleCross.tsx b/apps/tx-builder/src/components/Icon/images/circleCross.tsx new file mode 100644 index 000000000..a3774fde3 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/circleCross.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/circleDropdown.tsx b/apps/tx-builder/src/components/Icon/images/circleDropdown.tsx new file mode 100644 index 000000000..c358edc31 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/circleDropdown.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/code.tsx b/apps/tx-builder/src/components/Icon/images/code.tsx new file mode 100644 index 000000000..dda613230 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/code.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/collectibles.tsx b/apps/tx-builder/src/components/Icon/images/collectibles.tsx new file mode 100644 index 000000000..e87b01107 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/collectibles.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + + + + ), + md: ( + + + + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/copy.tsx b/apps/tx-builder/src/components/Icon/images/copy.tsx new file mode 100644 index 000000000..d3a07d584 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/copy.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/cross.tsx b/apps/tx-builder/src/components/Icon/images/cross.tsx new file mode 100644 index 000000000..30b62cb84 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/cross.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/currency.tsx b/apps/tx-builder/src/components/Icon/images/currency.tsx new file mode 100644 index 000000000..306f8fe9b --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/currency.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/delete.tsx b/apps/tx-builder/src/components/Icon/images/delete.tsx new file mode 100644 index 000000000..91e472c3f --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/delete.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/devicePassword.tsx b/apps/tx-builder/src/components/Icon/images/devicePassword.tsx new file mode 100644 index 000000000..647658eea --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/devicePassword.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/edit.tsx b/apps/tx-builder/src/components/Icon/images/edit.tsx new file mode 100644 index 000000000..e1286ad05 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/edit.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/error.tsx b/apps/tx-builder/src/components/Icon/images/error.tsx new file mode 100644 index 000000000..1fb30bab8 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/error.tsx @@ -0,0 +1,40 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + ), + md: ( + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/eth.tsx b/apps/tx-builder/src/components/Icon/images/eth.tsx new file mode 100644 index 000000000..ff3a72cbd --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/eth.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/export.tsx b/apps/tx-builder/src/components/Icon/images/export.tsx new file mode 100644 index 000000000..28da74fe6 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/export.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + ), + md: ( + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/externalLink.tsx b/apps/tx-builder/src/components/Icon/images/externalLink.tsx new file mode 100644 index 000000000..11e22ebdb --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/externalLink.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/eye.tsx b/apps/tx-builder/src/components/Icon/images/eye.tsx new file mode 100644 index 000000000..de6a38ac9 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/eye.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/eyeOff.tsx b/apps/tx-builder/src/components/Icon/images/eyeOff.tsx new file mode 100644 index 000000000..c99eaae25 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/eyeOff.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/filledCross.tsx b/apps/tx-builder/src/components/Icon/images/filledCross.tsx new file mode 100644 index 000000000..d5e30db54 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/filledCross.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/fingerPrint.tsx b/apps/tx-builder/src/components/Icon/images/fingerPrint.tsx new file mode 100644 index 000000000..ba4ef1f65 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/fingerPrint.tsx @@ -0,0 +1,46 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + ), + md: ( + + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/fuelIndicator.tsx b/apps/tx-builder/src/components/Icon/images/fuelIndicator.tsx new file mode 100644 index 000000000..7232682d2 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/fuelIndicator.tsx @@ -0,0 +1,42 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/getInTouch.tsx b/apps/tx-builder/src/components/Icon/images/getInTouch.tsx new file mode 100644 index 000000000..8cfa45fc3 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/getInTouch.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/gift.tsx b/apps/tx-builder/src/components/Icon/images/gift.tsx new file mode 100644 index 000000000..fa29b7c3f --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/gift.tsx @@ -0,0 +1,72 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/home.tsx b/apps/tx-builder/src/components/Icon/images/home.tsx new file mode 100644 index 000000000..99f1c6ae8 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/home.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/import.tsx b/apps/tx-builder/src/components/Icon/images/import.tsx new file mode 100644 index 000000000..c7dd3c43b --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/import.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + ), + md: ( + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/info.tsx b/apps/tx-builder/src/components/Icon/images/info.tsx new file mode 100644 index 000000000..0f546863f --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/info.tsx @@ -0,0 +1,40 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + ), + md: ( + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/knowledge.tsx b/apps/tx-builder/src/components/Icon/images/knowledge.tsx new file mode 100644 index 000000000..bcf22aa97 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/knowledge.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/licenses.tsx b/apps/tx-builder/src/components/Icon/images/licenses.tsx new file mode 100644 index 000000000..ced0f3f21 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/licenses.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/loadSafe.tsx b/apps/tx-builder/src/components/Icon/images/loadSafe.tsx new file mode 100644 index 000000000..32de0a881 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/loadSafe.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/locked.tsx b/apps/tx-builder/src/components/Icon/images/locked.tsx new file mode 100644 index 000000000..a653e04cf --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/locked.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/mobileConfirm.tsx b/apps/tx-builder/src/components/Icon/images/mobileConfirm.tsx new file mode 100644 index 000000000..499bd6e25 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/mobileConfirm.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/noInternet.tsx b/apps/tx-builder/src/components/Icon/images/noInternet.tsx new file mode 100644 index 000000000..790145e5a --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/noInternet.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/owners.tsx b/apps/tx-builder/src/components/Icon/images/owners.tsx new file mode 100644 index 000000000..318c96344 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/owners.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/paste.tsx b/apps/tx-builder/src/components/Icon/images/paste.tsx new file mode 100644 index 000000000..5adbf45fd --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/paste.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/paymentToken.tsx b/apps/tx-builder/src/components/Icon/images/paymentToken.tsx new file mode 100644 index 000000000..13d59aa83 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/paymentToken.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/privacyPolicy.tsx b/apps/tx-builder/src/components/Icon/images/privacyPolicy.tsx new file mode 100644 index 000000000..4665d6be2 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/privacyPolicy.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/qrCode.tsx b/apps/tx-builder/src/components/Icon/images/qrCode.tsx new file mode 100644 index 000000000..42617ab42 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/qrCode.tsx @@ -0,0 +1,78 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/question.tsx b/apps/tx-builder/src/components/Icon/images/question.tsx new file mode 100644 index 000000000..54f118c8c --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/question.tsx @@ -0,0 +1,39 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/rateApp.tsx b/apps/tx-builder/src/components/Icon/images/rateApp.tsx new file mode 100644 index 000000000..da0641758 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/rateApp.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/received.tsx b/apps/tx-builder/src/components/Icon/images/received.tsx new file mode 100644 index 000000000..e7e95260d --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/received.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/recover.tsx b/apps/tx-builder/src/components/Icon/images/recover.tsx new file mode 100644 index 000000000..488890655 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/recover.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/replaceOwner.tsx b/apps/tx-builder/src/components/Icon/images/replaceOwner.tsx new file mode 100644 index 000000000..4c2b440a2 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/replaceOwner.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/requiredConfirmations.tsx b/apps/tx-builder/src/components/Icon/images/requiredConfirmations.tsx new file mode 100644 index 000000000..0ed5525a9 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/requiredConfirmations.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/restricted.tsx b/apps/tx-builder/src/components/Icon/images/restricted.tsx new file mode 100644 index 000000000..21591162c --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/restricted.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/resync.tsx b/apps/tx-builder/src/components/Icon/images/resync.tsx new file mode 100644 index 000000000..5164b6b6a --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/resync.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/rocket.tsx b/apps/tx-builder/src/components/Icon/images/rocket.tsx new file mode 100644 index 000000000..b4f6bbbaa --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/rocket.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/safe.tsx b/apps/tx-builder/src/components/Icon/images/safe.tsx new file mode 100644 index 000000000..e01a52a16 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/safe.tsx @@ -0,0 +1,39 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/scan.tsx b/apps/tx-builder/src/components/Icon/images/scan.tsx new file mode 100644 index 000000000..612b95aff --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/scan.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/search.tsx b/apps/tx-builder/src/components/Icon/images/search.tsx new file mode 100644 index 000000000..1034e83f5 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/search.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/sendAgain.tsx b/apps/tx-builder/src/components/Icon/images/sendAgain.tsx new file mode 100644 index 000000000..c935cb835 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/sendAgain.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/sent.tsx b/apps/tx-builder/src/components/Icon/images/sent.tsx new file mode 100644 index 000000000..4279522c8 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/sent.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/serverError.tsx b/apps/tx-builder/src/components/Icon/images/serverError.tsx new file mode 100644 index 000000000..6bbd6f5ba --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/serverError.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/settings.tsx b/apps/tx-builder/src/components/Icon/images/settings.tsx new file mode 100644 index 000000000..8b4829127 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/settings.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/settingsChange.tsx b/apps/tx-builder/src/components/Icon/images/settingsChange.tsx new file mode 100644 index 000000000..c018296b3 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/settingsChange.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/settingsTool.tsx b/apps/tx-builder/src/components/Icon/images/settingsTool.tsx new file mode 100644 index 000000000..9cee1412e --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/settingsTool.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/share.tsx b/apps/tx-builder/src/components/Icon/images/share.tsx new file mode 100644 index 000000000..cd21a60cb --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/share.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx b/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx new file mode 100644 index 000000000..9cb6ef82e --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/transactionsInactive.tsx b/apps/tx-builder/src/components/Icon/images/transactionsInactive.tsx new file mode 100644 index 000000000..ac428ef2a --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/transactionsInactive.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/unlocked.tsx b/apps/tx-builder/src/components/Icon/images/unlocked.tsx new file mode 100644 index 000000000..1e8c56fda --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/unlocked.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + + ), + md: ( + + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/userEdit.tsx b/apps/tx-builder/src/components/Icon/images/userEdit.tsx new file mode 100644 index 000000000..8f649e7d7 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/userEdit.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/images/wallet.tsx b/apps/tx-builder/src/components/Icon/images/wallet.tsx new file mode 100644 index 000000000..f40ed2544 --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/wallet.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +export default { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} diff --git a/apps/tx-builder/src/components/Icon/index.tsx b/apps/tx-builder/src/components/Icon/index.tsx new file mode 100644 index 000000000..86187756b --- /dev/null +++ b/apps/tx-builder/src/components/Icon/index.tsx @@ -0,0 +1,204 @@ +import React from 'react' +import styled from 'styled-components' + +import add from './images/add' +import addressBook from './images/addressBook' +import addressBookAdd from './images/addressBookAdd' +import alert from './images/alert' +import allowances from './images/allowances' +import apps from './images/apps' +import arrowUp from './images/arrowUp' +import arrowRight from './images/arrowRight' +import arrowDown from './images/arrowDown' +import arrowLeft from './images/arrowLeft' +import assets from './images/assets' +import awaitingConfirmations from './images/awaitingConfirmations' +import bookmark from './images/bookmark' +import bookmarkFilled from './images/bookmarkFilled' +import camera from './images/camera' +import chain from './images/chain' +import check from './images/check' +import circleCheck from './images/circleCheck' +import circleCross from './images/circleCross' +import circleDropdown from './images/circleDropdown' +import code from './images/code' +import collectibles from './images/collectibles' +import copy from './images/copy' +import cross from './images/cross' +import currency from './images/currency' +import deleteIcon from './images/delete' +import devicePassword from './images/devicePassword' +import edit from './images/edit' +import error from './images/error' +import eth from './images/eth' +import exportImg from './images/export' +import externalLink from './images/externalLink' +import eye from './images/eye' +import eyeOff from './images/eyeOff' +import filledCross from './images/filledCross' +import fingerPrint from './images/fingerPrint' +import fuelIndicator from './images/fuelIndicator' +import getInTouch from './images/getInTouch' +import gift from './images/gift' +import home from './images/home' +import importImg from './images/import' +import info from './images/info' +import knowledge from './images/knowledge' +import licenses from './images/licenses' +import loadSafe from './images/loadSafe' +import locked from './images/locked' +import mobileConfirm from './images/mobileConfirm' +import noInternet from './images/noInternet' +import owners from './images/owners' +import paste from './images/paste' +import paymentToken from './images/paymentToken' +import privacyPolicy from './images/privacyPolicy' +import qrCode from './images/qrCode' +import question from './images/question' +import rateApp from './images/rateApp' +import received from './images/received' +import recover from './images/recover' +import replaceOwner from './images/replaceOwner' +import requiredConfirmations from './images/requiredConfirmations' +import restricted from './images/restricted' +import resync from './images/resync' +import rocket from './images/rocket' +import safe from './images/safe' +import scan from './images/scan' +import search from './images/search' +import sendAgain from './images/sendAgain' +import sent from './images/sent' +import serverError from './images/serverError' +import settings from './images/settings' +import settingsChange from './images/settingsChange' +import settingsTool from './images/settingsTool' +import share from './images/share' +import termsOfUse from './images/termsOfUse' +import transactionsInactive from './images/transactionsInactive' +import unlocked from './images/unlocked' +import userEdit from './images/userEdit' +import wallet from './images/wallet' +import { type Theme } from '@material-ui/core/styles' +import { Tooltip } from '../Tooltip' + +const StyledIcon = styled.span<{ color?: keyof Theme['palette'] }>` + display: inline-flex; + + .icon-color { + fill: ${({ theme, color }) => (color ? theme.palette[color].main : '#B2B5B2')}; + } + + .icon-stroke { + stroke: ${({ theme, color }) => (color ? theme.palette[color].main : '#B2B5B2')}; + } +` + +const icons = { + add, + addressBook, + addressBookAdd, + alert, + allowances, + apps, + arrowUp, + arrowLeft, + arrowDown, + arrowRight, + assets, + awaitingConfirmations, + bookmark, + bookmarkFilled, + camera, + chain, + check, + circleCheck, + circleCross, + circleDropdown, + code, + collectibles, + copy, + cross, + currency, + delete: deleteIcon, + devicePassword, + edit, + error, + eth, + exportImg, + externalLink, + eye, + eyeOff, + filledCross, + fingerPrint, + fuelIndicator, + getInTouch, + gift, + home, + importImg, + info, + knowledge, + licenses, + loadSafe, + locked, + mobileConfirm, + noInternet, + owners, + paste, + paymentToken, + privacyPolicy, + qrCode, + question, + rateApp, + received, + recover, + replaceOwner, + requiredConfirmations, + restricted, + resync, + rocket, + safe, + scan, + search, + sendAgain, + sent, + serverError, + settings, + settingsChange, + settingsTool, + share, + termsOfUse, + transactionsInactive, + unlocked, + userEdit, + wallet, +} + +export type IconType = typeof icons +export type IconTypes = keyof IconType + +export type IconProps = { + type: IconTypes + size: 'sm' | 'md' + color?: keyof Theme['palette'] + tooltip?: string + className?: string +} + +/** + * The `Icon` renders an icon, it can be one already defined specified by + * the type Iconprops or custom one using the customUrl. + */ +export const Icon = ({ type, size, color, tooltip, className }: IconProps): React.ReactElement => { + const IconElement = ( + + {icons[type][size]} + + ) + return tooltip === undefined ? ( + IconElement + ) : ( + + {IconElement} + + ) +} diff --git a/apps/tx-builder/src/components/IconText/index.tsx b/apps/tx-builder/src/components/IconText/index.tsx new file mode 100644 index 000000000..f2ec58512 --- /dev/null +++ b/apps/tx-builder/src/components/IconText/index.tsx @@ -0,0 +1,73 @@ +import React from 'react' +import styled from 'styled-components' +import { type Theme } from '@material-ui/core/styles' + +import { Icon, IconProps, IconType } from '../Icon' +import Text from '../Text' + +const iconTextMargins = { + xxs: '4px', + xs: '6px', + sm: '8px', + md: '12px', + lg: '16px', + xl: '20px', + xxl: '24px', +} + +type IconMargins = keyof typeof iconTextMargins + +type Props = { + iconType: keyof IconType + iconSize: IconProps['size'] + iconColor?: keyof Theme['palette'] + margin?: IconMargins + color?: keyof Theme['palette'] + text: string + className?: string + iconSide?: 'left' | 'right' +} + +const LeftIconText = styled.div<{ margin: IconMargins }>` + display: flex; + align-items: center; + svg { + margin: 0 ${({ margin }) => iconTextMargins[margin]} 0 0; + } +` + +const RightIconText = styled.div<{ margin: IconMargins }>` + display: flex; + align-items: center; + svg { + margin: 0 0 0 ${({ margin }) => iconTextMargins[margin]}; + } +` + +/** + * The `IconText` renders an icon next to a text + */ +const IconText = ({ + iconSize, + margin = 'xs', + iconType, + iconColor, + text, + iconSide = 'left', + color, + className, +}: Props): React.ReactElement => { + return iconSide === 'right' ? ( + + {text} + + + ) : ( + + + {text} + + ) +} + +export default IconText