From 9a0c7e562d04ff535c4602382a3152395a4a2247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?=
<54077855+yigiterdev@users.noreply.github.com>
Date: Tue, 7 Jun 2022 18:05:57 +0300
Subject: [PATCH 01/10] feat(connect-modal): implement new design
---
package-lock.json | 75 +++++----
package.json | 2 +-
rollup.config.js | 2 +-
src/asset/icon/Close--dark.svg | 3 +
src/asset/icon/Close.svg | 12 +-
src/asset/icon/Layer.svg | 3 +
src/asset/icon/Note.svg | 3 +
src/asset/icon/PeraWallet--circle.svg | 10 ++
src/asset/icon/PeraWallet--with-text.svg | 12 ++
src/asset/icon/PeraWallet.svg | 15 +-
src/asset/icon/Right.svg | 3 +
src/asset/icon/ShieldTick.svg | 3 +
.../img/ConnectModalBackgroundPattern.png | Bin 0 -> 3157 bytes
src/asset/img/PeraDownloadQRCode.png | Bin 0 -> 157214 bytes
src/declarations/custom.d.ts | 5 +
src/modal/PeraWalletConnectModal.tsx | 144 ++++++++----------
src/modal/_pera-wallet-connect-modal.scss | 117 +++++++++-----
src/modal/_pera-wallet-modal.scss | 106 ++++++++++---
src/modal/component/accordion/Accordion.tsx | 36 +++++
.../accordion/button/AccordionButton.tsx | 22 +++
.../accordion/button/_accordion-button.scss | 26 ++++
.../accordion/icon/AccordionIcon.tsx | 9 ++
.../accordion/item/AccordionItem.tsx | 27 ++++
.../accordion/item/_accordion-item.scss | 31 ++++
.../accordion/panel/AccordionPanel.tsx | 17 +++
.../accordion/panel/_accordion-panel.scss | 14 ++
.../accordion/util/accordionTypes.ts | 7 +
...raWalletConnectModalInformationSection.tsx | 92 +++++++++++
...pera-wallet-modal-information-section.scss | 102 +++++++++++++
.../PeraWalletConnectModalPendingMessage.tsx | 41 +++++
...-wallet-connect-modal-pending-message.scss | 19 +++
.../util/peraWalletConnectModalUtils.tsx | 52 +++++++
src/ui/styles/_media-queries.scss | 8 +
src/util/screen/mediaQueryHookConstants.ts | 7 +
src/util/screen/useMediaQuery.ts | 45 ++++++
35 files changed, 885 insertions(+), 185 deletions(-)
create mode 100644 src/asset/icon/Close--dark.svg
create mode 100644 src/asset/icon/Layer.svg
create mode 100644 src/asset/icon/Note.svg
create mode 100644 src/asset/icon/PeraWallet--circle.svg
create mode 100644 src/asset/icon/PeraWallet--with-text.svg
create mode 100644 src/asset/icon/Right.svg
create mode 100644 src/asset/icon/ShieldTick.svg
create mode 100644 src/asset/img/ConnectModalBackgroundPattern.png
create mode 100644 src/asset/img/PeraDownloadQRCode.png
create mode 100644 src/modal/component/accordion/Accordion.tsx
create mode 100644 src/modal/component/accordion/button/AccordionButton.tsx
create mode 100644 src/modal/component/accordion/button/_accordion-button.scss
create mode 100644 src/modal/component/accordion/icon/AccordionIcon.tsx
create mode 100644 src/modal/component/accordion/item/AccordionItem.tsx
create mode 100644 src/modal/component/accordion/item/_accordion-item.scss
create mode 100644 src/modal/component/accordion/panel/AccordionPanel.tsx
create mode 100644 src/modal/component/accordion/panel/_accordion-panel.scss
create mode 100644 src/modal/component/accordion/util/accordionTypes.ts
create mode 100644 src/modal/section/information/PeraWalletConnectModalInformationSection.tsx
create mode 100644 src/modal/section/information/_pera-wallet-modal-information-section.scss
create mode 100644 src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.tsx
create mode 100644 src/modal/section/pending-message/_pera-wallet-connect-modal-pending-message.scss
create mode 100644 src/modal/util/peraWalletConnectModalUtils.tsx
create mode 100644 src/ui/styles/_media-queries.scss
create mode 100644 src/util/screen/mediaQueryHookConstants.ts
create mode 100644 src/util/screen/useMediaQuery.ts
diff --git a/package-lock.json b/package-lock.json
index 2173cb3..21ed778 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
"@json-rpc-tools/utils": "^1.7.6",
"@walletconnect/client": "^1.7.7",
"buffer": "^6.0.3",
- "react-qr-code": "^2.0.5"
+ "react-qrcode-logo": "^2.7.0"
},
"devDependencies": {
"@hipo/eslint-config-base": "^4.1.1",
@@ -3927,6 +3927,11 @@
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
"dev": true
},
+ "node_modules/lodash.isequal": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+ "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+ },
"node_modules/lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -3949,6 +3954,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "peer": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
@@ -5634,6 +5640,8 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "dev": true,
+ "peer": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -5655,10 +5663,10 @@
"node": ">=6"
}
},
- "node_modules/qr.js": {
- "version": "0.0.0",
- "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
- "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8="
+ "node_modules/qrcode-generator": {
+ "version": "1.4.4",
+ "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+ "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
},
"node_modules/qs": {
"version": "6.5.3",
@@ -5758,24 +5766,21 @@
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+ "dev": true,
+ "peer": true
},
- "node_modules/react-qr-code": {
- "version": "2.0.5",
- "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.5.tgz",
- "integrity": "sha512-8R/n/5X9n5JsND+npJYYCcrf1jEcphG7o0d5aXl7cx/tpDF0kfSoYucG8BUG3EN/LCzf5Ehf2yl7zdnxdpKGBQ==",
+ "node_modules/react-qrcode-logo": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/react-qrcode-logo/-/react-qrcode-logo-2.7.0.tgz",
+ "integrity": "sha512-79Ce+1GlETAbu8fQGAoHczjvXjsm044+FeVAutu9lwJ/w0hRKRRPPHQRkPmXZK4aPi/H9Fqv+7P29VYQ9Yo2dA==",
"dependencies": {
- "prop-types": "^15.7.2",
- "qr.js": "0.0.0"
+ "lodash.isequal": "^4.5.0",
+ "qrcode-generator": "^1.4.1"
},
"peerDependencies": {
- "react": "^16.x || ^17.x || ^18.x",
- "react-native-svg": "*"
- },
- "peerDependenciesMeta": {
- "react-native-svg": {
- "optional": true
- }
+ "react": ">=16.4.1",
+ "react-dom": ">=16.4.1"
}
},
"node_modules/read-pkg": {
@@ -10985,6 +10990,11 @@
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
"dev": true
},
+ "lodash.isequal": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+ "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+ },
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11007,6 +11017,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "peer": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
@@ -12173,6 +12184,8 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "dev": true,
+ "peer": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -12191,10 +12204,10 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
- "qr.js": {
- "version": "0.0.0",
- "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
- "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8="
+ "qrcode-generator": {
+ "version": "1.4.4",
+ "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+ "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
},
"qs": {
"version": "6.5.3",
@@ -12262,15 +12275,17 @@
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+ "dev": true,
+ "peer": true
},
- "react-qr-code": {
- "version": "2.0.5",
- "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.5.tgz",
- "integrity": "sha512-8R/n/5X9n5JsND+npJYYCcrf1jEcphG7o0d5aXl7cx/tpDF0kfSoYucG8BUG3EN/LCzf5Ehf2yl7zdnxdpKGBQ==",
+ "react-qrcode-logo": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/react-qrcode-logo/-/react-qrcode-logo-2.7.0.tgz",
+ "integrity": "sha512-79Ce+1GlETAbu8fQGAoHczjvXjsm044+FeVAutu9lwJ/w0hRKRRPPHQRkPmXZK4aPi/H9Fqv+7P29VYQ9Yo2dA==",
"requires": {
- "prop-types": "^15.7.2",
- "qr.js": "0.0.0"
+ "lodash.isequal": "^4.5.0",
+ "qrcode-generator": "^1.4.1"
}
},
"read-pkg": {
diff --git a/package.json b/package.json
index 7ae3c00..12df9c4 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
"@json-rpc-tools/utils": "^1.7.6",
"@walletconnect/client": "^1.7.7",
"buffer": "^6.0.3",
- "react-qr-code": "^2.0.5"
+ "react-qrcode-logo": "^2.7.0"
},
"peerDependencies": {
"algosdk": "^1.15.0",
diff --git a/rollup.config.js b/rollup.config.js
index b9bfaa6..db32a86 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -17,7 +17,7 @@ export default [
"react-dom",
"@walletconnect/client",
"@hipo/react-ui-toolkit",
- "react-qr-code",
+ "react-qrcode-logo",
"@json-rpc-tools/utils/dist/cjs/format",
"algosdk"
],
diff --git a/src/asset/icon/Close--dark.svg b/src/asset/icon/Close--dark.svg
new file mode 100644
index 0000000..3fb8c1f
--- /dev/null
+++ b/src/asset/icon/Close--dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/asset/icon/Close.svg b/src/asset/icon/Close.svg
index e08d1f8..fb31f33 100644
--- a/src/asset/icon/Close.svg
+++ b/src/asset/icon/Close.svg
@@ -1,11 +1,3 @@
-