mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Merge remote-tracking branch 'upstream/develop' into minimal
This commit is contained in:
commit
ae22514012
GPG Key ID:
606EEEF3C479A91F
@ -701,7 +701,7 @@ jobs:
|
||||
|
||||
test-e2e-firefox-snaps:
|
||||
executor: node-browsers
|
||||
parallelism: 2
|
||||
parallelism: 4
|
||||
steps:
|
||||
- checkout
|
||||
- run:
|
||||
@ -738,7 +738,7 @@ jobs:
|
||||
|
||||
test-e2e-chrome-snaps:
|
||||
executor: node-browsers
|
||||
parallelism: 2
|
||||
parallelism: 4
|
||||
steps:
|
||||
- checkout
|
||||
- run:
|
||||
|
||||
6
app/_locales/de/messages.json
generated
6
app/_locales/de/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Ethereum Merge ist da!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Sicherheits- und Datenschutzeinstellungen anzeigen"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Sicherheits- und Datenschutzeinstellungen"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Mobile MetaMask-Anwender können jetzt Token in ihren mobilen Wallets swappen. Scannen Sie den QR-Code, um die mobile App zu erhalten und mit dem Swapping zu beginnen.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/el/messages.json
generated
6
app/_locales/el/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Η συγχώνευση στο Ethereum είναι εδώ!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Εμφάνιση ρυθμίσεων Ασφάλειας & Απορρήτου"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Ρυθμίσεις Ασφάλειας & Απορρήτου"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Οι χρήστες του MetaMask Mobile μπορούν τώρα να ανταλλάξουν tokens μέσα στο κινητό τους πορτοφόλι. Σαρώστε τον κωδικό QR για να πάρετε την εφαρμογή για κινητά και να αρχίσετε να ανταλλάζετε.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
21
app/_locales/en/messages.json
generated
21
app/_locales/en/messages.json
generated
@ -2471,40 +2471,37 @@
|
||||
"notifications15Title": {
|
||||
"message": "The Ethereum Merge is here!"
|
||||
},
|
||||
"notifications16ActionText": {
|
||||
"notifications18ActionText": {
|
||||
"message": "Enable security alerts"
|
||||
},
|
||||
"notifications16DescriptionOne": {
|
||||
"notifications18DescriptionOne": {
|
||||
"message": "Get alerts from third parties when you may have received a malicious request.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes Opensea Security Provider feature."
|
||||
},
|
||||
"notifications16DescriptionThree": {
|
||||
"notifications18DescriptionThree": {
|
||||
"message": "Always be sure to do your own due diligence before approving any requests.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes Opensea Security Provider feature."
|
||||
},
|
||||
"notifications16DescriptionTwo": {
|
||||
"notifications18DescriptionTwo": {
|
||||
"message": "OpenSea is the first provider for this feature. More providers coming soon!",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes Opensea Security Provider feature."
|
||||
},
|
||||
"notifications16Title": {
|
||||
"message": "Stay safe with security alerts"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"notifications19ActionText": {
|
||||
"message": "Enable NFT autodetection"
|
||||
},
|
||||
"notifications17DescriptionOne": {
|
||||
"notifications19DescriptionOne": {
|
||||
"message": "Two ways you can get started:",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes NFT autodetection feature."
|
||||
},
|
||||
"notifications17DescriptionThree": {
|
||||
"notifications19DescriptionThree": {
|
||||
"message": "We only support ERC-721 at the moment.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes NFT autodetection feature."
|
||||
},
|
||||
"notifications17DescriptionTwo": {
|
||||
"notifications19DescriptionTwo": {
|
||||
"message": "Manually add your NFTs, or turn on NFT autodetection in Settings > Experimental.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes NFT autodetection feature."
|
||||
},
|
||||
"notifications17Title": {
|
||||
"notifications19Title": {
|
||||
"message": "See your NFTs like never before"
|
||||
},
|
||||
"notifications1Description": {
|
||||
|
||||
6
app/_locales/es/messages.json
generated
6
app/_locales/es/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "¡La Fusión de Ethereum está aquí!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Mostrar configuración de seguridad y privacidad"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Configuración de Seguridad y privacidad"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Los usuarios de la aplicación móvil de MetaMask ahora pueden canjear tokens en su cartera móvil. Escanee el código QR para obtener la aplicación móvil y comience a canjear.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/fr/messages.json
generated
6
app/_locales/fr/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "La fusion Ethereum est en marche !"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Afficher les paramètres de sécurité et de confidentialité"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Paramètres de sécurité et de confidentialité"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Les utilisateurs de MetaMask Mobile peuvent désormais échanger des jetons dans leur portefeuille mobile. Scannez le code QR pour obtenir l’application mobile et commencez à échanger.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
10
app/_locales/hi/messages.json
generated
10
app/_locales/hi/messages.json
generated
@ -1601,11 +1601,11 @@
|
||||
"description": "Is the bolded text in 'holdToRevealContent1'"
|
||||
},
|
||||
"holdToRevealContent3": {
|
||||
"message": "इसे किसी के साथ साझा न करें। $1$2",
|
||||
"message": "इसे किसी के साथ साझा न करें। $1,$2",
|
||||
"description": "$1 is a message from 'holdToRevealContent4' and $2 is a text link with the message from 'holdToRevealContent5'"
|
||||
},
|
||||
"holdToRevealContent4": {
|
||||
"message": "MetaMask सपोर्ट इसका अनुरोध नहीं करेगा,",
|
||||
"message": "MetaMask सपोर्ट इसका अनुरोध नहीं करेगा",
|
||||
"description": "Part of 'holdToRevealContent3'"
|
||||
},
|
||||
"holdToRevealContent5": {
|
||||
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "इथेरियम मर्ज यहाँ है!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "सुरक्षा और गोपनीयता सेटिंग्स को दिखाएं"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "सुरक्षा और गोपनीयता सेटिंग्स"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "MetaMask Mobile उपयोगकर्ता अब अपने मोबाइल वॉलेट के अंदर टोकन स्वैप कर सकते हैं। मोबाइल ऐप प्राप्त करने के लिए QR कोड को स्कैन करें और स्वैप करना शुरू करें।",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/id/messages.json
generated
6
app/_locales/id/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Penggabungan Ethereum telah tiba!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Tampilkan pengaturan Keamanan & Privasi"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Pengaturan Keamanan & Privasi"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Pengguna MetaMask Mobile kini bisa menukar token di dalam dompet seluler mereka. Pindai kode QR untuk mendapatkan aplikasi seluler dan mulai menukar.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
10
app/_locales/ja/messages.json
generated
10
app/_locales/ja/messages.json
generated
@ -1601,11 +1601,11 @@
|
||||
"description": "Is the bolded text in 'holdToRevealContent1'"
|
||||
},
|
||||
"holdToRevealContent3": {
|
||||
"message": "これは誰にも教えないでください。$1$2",
|
||||
"message": "これは誰にも教えないでください。$1、$2",
|
||||
"description": "$1 is a message from 'holdToRevealContent4' and $2 is a text link with the message from 'holdToRevealContent5'"
|
||||
},
|
||||
"holdToRevealContent4": {
|
||||
"message": "MetaMask サポートがこの情報を尋ねることはなく、",
|
||||
"message": "MetaMask サポートがこの情報を尋ねることはなく",
|
||||
"description": "Part of 'holdToRevealContent3'"
|
||||
},
|
||||
"holdToRevealContent5": {
|
||||
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Ethereum のマージ (Merge) が完了しました！"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "セキュリティおよびプライバシー設定を表示"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "セキュリティおよびプライバシー設定"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "MetaMask Mobileのユーザーが、モバイルウォレット内でトークンを交換できるようになりました。QRコードをスキャンしてモバイルアプリを取得し、スワップを開始します。",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/ko/messages.json
generated
6
app/_locales/ko/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "이더리움 머지가 완료되었습니다!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "보안 및 개인정보 설정 표시"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "보안 및 개인정보 설정 표시"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "MetaMask 모바일 사용자는 이제 모바일 지갑에서 토큰을 스왑할 수 있습니다. QR 코드를 스캔하여 모바일 앱을 설치하고 스왑을 시작하세요.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/pt/messages.json
generated
6
app/_locales/pt/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "A fusão do Ethereum chegou!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Mostrar configurações de segurança e privacidade"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Configurações de segurança e privacidade"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Usuários da MetaMask Mobile agora podem trocar tokens dentro de sua carteira mobile. Leia o QR code para obter o aplicativo para dispositivos móveis e comece a trocar.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/ru/messages.json
generated
6
app/_locales/ru/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Ethereum Merge уже досутпно!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Показать настройки безопасности и конфиденциальности"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Настройки безопасности и конфиденциальности"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Теперь пользователи MetaMask Mobile могут обменивать токены в своем мобильном кошельке. Отсканируйте QR-код, чтобы скачать мобильное приложение и начать обмен.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/tl/messages.json
generated
6
app/_locales/tl/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Narito na ang Ethereum Merge!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Ipakita ang mga setting ng Seguridad at Pagkapribado"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Mga Setting ng Seguridad at Pagkapribado"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Ang mga user ng MetaMask Mobile ay maaari na ngayong mag-swap ng mga token sa loob ng kanilang mobile wallet. I-scan ang QR code para makuha ang mobile app at magsimulang mag-swap.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
8
app/_locales/tr/messages.json
generated
8
app/_locales/tr/messages.json
generated
@ -1593,7 +1593,7 @@
|
||||
"message": "GKİ'yi göstermek için basılı tut"
|
||||
},
|
||||
"holdToRevealContent1": {
|
||||
"message": "Gizli Kurtarma İfadeniz: $1$",
|
||||
"message": "Gizli Kurtarma İfadeniz: $1",
|
||||
"description": "$1 is a bolded text with the message from 'holdToRevealContent2'"
|
||||
},
|
||||
"holdToRevealContent2": {
|
||||
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Ethereum Birleşmesi başladı!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Güvenlik ve Gizlilik ayarlarını göster"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Güvenlik ve Gizlilik Ayarları"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "MetaMask Mobil kullanıcıları artık mobil cüzdanları içinde token takas edebilirler. Mobil uygulamayı edinmek ve takas yapmaya başlamak için QR kodunu tarayın.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/vi/messages.json
generated
6
app/_locales/vi/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "Hợp nhất Ethereum đã được triển khai!"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "Hiển thị cài đặt Bảo mật và Quyền riêng tư"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "Cài đặt Bảo mật và Quyền riêng tư"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "Giờ đây, người dùng MetaMask trên điện thoại di động có thể hoán đổi token trong ví di động của họ. Quét mã QR để tải ứng dụng di động và bắt đầu hoán đổi.",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
6
app/_locales/zh_CN/messages.json
generated
6
app/_locales/zh_CN/messages.json
generated
@ -2327,12 +2327,6 @@
|
||||
"notifications15Title": {
|
||||
"message": "以太坊合并来了！"
|
||||
},
|
||||
"notifications17ActionText": {
|
||||
"message": "显示安全和隐私设置"
|
||||
},
|
||||
"notifications17Title": {
|
||||
"message": "安全和隐私设置"
|
||||
},
|
||||
"notifications1Description": {
|
||||
"message": "MetaMask Mobile 用户现在可以在他们的移动钱包中交换代币。扫描二维码以获取移动应用程序并开始交换。",
|
||||
"description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M127.666 220C127.666 220 206.331 193.236 206.331 94.9394V59.5566C206.331 55.6784 203.315 52.5662 199.532 52.3268C185.264 51.6086 151.414 48.7359 127.666 36C103.965 48.7359 70.0669 51.6086 55.7989 52.2789C52.0164 52.5662 49 55.6784 49 59.5566V94.9394C49 193.236 127.666 220 127.666 220Z" fill="#00AEEF"/>
|
||||
<path d="M159.457 107.867C158.5 97.1419 149.307 93.4552 137.624 92.3539L137.672 77.3677L128.623 77.4156L128.671 91.923C126.277 91.923 123.739 91.923 121.298 91.9709V77.272L112.153 77.3199L112.201 92.2103C110.237 92.2582 93.9106 92.2582 93.9106 92.2582V101.786H105.497L105.45 149.665L95.2991 149.713L95.2034 160.63C95.2034 160.63 109.567 160.582 111.674 160.582L111.722 175.664L120.723 175.712L120.819 160.726C123.309 160.773 125.702 160.821 128.049 160.869L128.001 175.712H137.146L137.098 160.726C152.323 159.959 163.048 156.177 164.485 141.909C165.634 130.37 160.271 125.199 151.605 123.092C156.872 120.411 160.176 115.719 159.457 107.867ZM146.578 139.946C146.482 151.198 127.426 149.809 121.25 149.761L121.202 129.796C127.378 129.843 146.674 128.216 146.578 139.946ZM142.556 111.793C142.46 122.039 126.564 120.746 121.489 120.698L121.441 102.6C126.516 102.6 142.604 101.116 142.556 111.793Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1308.89 1311"><defs><style>.cls-1{fill:#1c46a0;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M655.5,873.5c-120.47,0-218.12-97.72-218-218.22-.31-120,96.7-217.48,216.67-217.79h2.33c95.93.43,177.22,62.81,205.93,149.2a36.9,36.9,0,0,0,35,25.3h192a9,9,0,0,0,9-9V553.46a4,4,0,0,1,4-4h46.78a4,4,0,0,1,4,4V603a9,9,0,0,0,9,9h27.36a9,9,0,0,0,9-9V553.46a4,4,0,0,1,4-4h46.78a4,4,0,0,1,4,4V603a9,9,0,0,0,9,9h37.5a9,9,0,0,0,9-9c0-.25,0-.51,0-.76C1281.78,265.28,999.83.21,655.91,0,294-.22,0,293.61,0,655.51S293.48,1311,655.5,1311c344.1,0,626.27-265.14,653.36-602.26a9,9,0,0,0-8.23-9.71c-.26,0-.51,0-.77,0H897.45a37.08,37.08,0,0,0-35.11,25.53C833.46,811.1,751.77,873.5,655.5,873.5Z"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 805 B |
@ -1,40 +0,0 @@
|
||||
<svg width="426" height="149" viewBox="0 0 426 149" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M52.5095 1.29006C43.9873 3.00709 35.8923 6.40352 28.6963 11.2813C18.1341 18.4704 9.8993 28.5855 5.00166 40.3863C3.29958 44.4987 2.02478 48.7753 1.19735 53.1485C-0.416047 61.4971 -0.382513 70.0805 1.29607 78.4162C3.02032 86.9352 6.41862 95.0271 11.2939 102.223C18.4808 112.795 28.5956 121.041 40.3989 125.95C48.441 129.265 57.0602 130.954 65.7588 130.92L65.5021 65.4631L65.2059 0C60.9419 0.0171994 56.6897 0.449264 52.5095 1.29006Z" fill="#3E125B"/>
|
||||
<path d="M11.2949 102.229C13.6717 105.733 16.3806 109 19.384 111.984L65.457 65.4894L11.2949 102.229Z" fill="#974AC5"/>
|
||||
<path d="M65.5036 65.4631L10.9598 29.2629C8.62988 32.7795 6.64606 36.5135 5.03613 40.4126L65.5036 65.4631Z" fill="#682E8B"/>
|
||||
<path d="M65.5029 65.4631L4.94982 40.3994C3.24775 44.5119 1.97294 48.7884 1.14551 53.1616L65.5029 65.4631Z" fill="#6F3294"/>
|
||||
<path d="M65.5038 65.4631L19.003 19.3901C16.0098 22.4139 13.3162 25.7203 10.96 29.2629L65.5038 65.4631Z" fill="#612982"/>
|
||||
<path d="M65.5038 65.4631L1.29785 78.4162C2.13137 82.5544 3.36581 86.6016 4.98369 90.5005L65.5038 65.4631Z" fill="#8841B2"/>
|
||||
<path d="M28.6977 11.2813C25.2025 13.6611 21.9448 16.3722 18.9697 19.377L65.4705 65.45L28.6977 11.2813Z" fill="#592479"/>
|
||||
<path d="M65.5029 65.4631L0.0332031 65.7527C0.0615207 70.0087 0.502373 74.2519 1.34957 78.4228L65.5029 65.4631Z" fill="#813CA9"/>
|
||||
<path d="M1.17186 53.1616C0.380059 57.3116 -0.0122564 61.5279 0.000291701 65.7527L65.47 65.4631L1.17186 53.1616Z" fill="#76379E"/>
|
||||
<path d="M65.5033 65.4631L40.4528 4.97589C36.34 6.67669 32.4121 8.7939 28.7305 11.2945L65.5033 65.4631Z" fill="#511E6F"/>
|
||||
<path d="M65.5026 65.4631L65.2065 0C60.9526 0.0279982 56.7116 0.468856 52.543 1.31637L65.5026 65.4631Z" fill="#3E125B"/>
|
||||
<path d="M52.5098 1.2901C48.3693 2.12268 44.3198 3.35714 40.4189 4.97594L65.5024 65.4632L52.5098 1.2901Z" fill="#481965"/>
|
||||
<path d="M65.5036 65.4631L19.4307 111.957C22.4526 114.955 25.7591 117.65 29.3034 120.007L65.5036 65.4631Z" fill="#9E4DCF"/>
|
||||
<path d="M65.5029 65.4631L29.3027 120.007C32.8193 122.333 36.5507 124.317 40.4458 125.931L65.5029 65.4631Z" fill="#A851D9"/>
|
||||
<path d="M65.5029 65.4631L5.01562 90.5071C6.71387 94.6198 8.82891 98.5477 11.3276 102.229L65.5029 65.4631Z" fill="#9045BC"/>
|
||||
<path d="M65.5029 65.4631L40.4326 125.957C44.5354 127.653 48.8006 128.925 53.1619 129.755L65.5029 65.4631Z" fill="#B056E3"/>
|
||||
<path d="M53.1611 129.755C57.3131 130.548 61.5319 130.938 65.7588 130.92L65.5021 65.4631L53.1611 129.755Z" fill="#B155E5"/>
|
||||
<path d="M144.077 70.5772C142.352 62.0582 138.954 53.9663 134.079 46.7707C126.897 36.2016 116.79 27.9559 104.994 23.0431C96.9516 19.7279 88.3323 18.039 79.6338 18.0738L79.9234 83.5369L80.2196 149C84.4734 148.972 88.7144 148.531 92.8831 147.684C101.406 145.963 109.501 142.562 116.696 137.679C127.258 130.49 135.493 120.375 140.391 108.574C142.093 104.462 143.368 100.185 144.195 95.812C145.799 87.4639 145.757 78.8828 144.07 70.5509L144.077 70.5772Z" fill="#17125B"/>
|
||||
<path d="M134.079 46.7706C131.701 43.276 128.992 40.0184 125.99 37.0427L79.917 83.5369L134.079 46.7706Z" fill="#534AC5"/>
|
||||
<path d="M79.9043 83.5369L134.448 119.737C136.778 116.221 138.762 112.487 140.372 108.587L79.8779 83.5237L79.9043 83.5369Z" fill="#342E8B"/>
|
||||
<path d="M79.9033 83.5369L140.397 108.601C142.099 104.488 143.374 100.212 144.201 95.8384L79.9033 83.5369Z" fill="#393294"/>
|
||||
<path d="M79.9033 83.5369L126.404 129.61C129.397 126.586 132.091 123.28 134.447 119.737L79.9033 83.5369Z" fill="#302982"/>
|
||||
<path d="M79.9033 83.5369L144.076 70.5772C143.243 66.439 142.008 62.3918 140.391 58.4929L79.9033 83.504V83.5369Z" fill="#4A41B2"/>
|
||||
<path d="M116.676 137.706C120.171 135.33 123.428 132.623 126.404 129.623L79.9033 83.55L116.676 137.706Z" fill="#2B2479"/>
|
||||
<path d="M79.9045 83.5369L145.374 83.2473C145.346 78.9913 144.905 74.7481 144.058 70.5772L79.8848 83.5369H79.9045Z" fill="#453CA9"/>
|
||||
<path d="M144.201 95.8383C144.993 91.6884 145.386 87.4721 145.373 83.2473L79.9033 83.5369L144.201 95.8383Z" fill="#3E379E"/>
|
||||
<path d="M79.9033 83.5369L104.954 144.024C109.067 142.323 112.994 140.206 116.676 137.706L79.9033 83.5369Z" fill="#241E6F"/>
|
||||
<path d="M79.9033 83.5369L80.1995 149C84.4533 148.972 88.6944 148.531 92.863 147.684L79.9033 83.5106V83.5369Z" fill="#17125B"/>
|
||||
<path d="M92.863 147.71C97.0035 146.877 101.053 145.643 104.954 144.024L79.9033 83.5369L92.863 147.71Z" fill="#1E1965"/>
|
||||
<path d="M79.9033 83.5369L125.976 37.0427C122.954 34.0455 119.648 31.3496 116.104 28.9931L79.9033 83.5369Z" fill="#564DCF"/>
|
||||
<path d="M79.9038 83.5369L116.104 28.9931C112.587 26.6671 108.856 24.6834 104.961 23.0695L79.8906 83.5633L79.9038 83.5369Z" fill="#5D51D9"/>
|
||||
<path d="M79.9033 83.5368L140.391 58.5258C138.692 54.4131 136.577 50.4852 134.079 46.8035L79.9033 83.5698V83.5368Z" fill="#4E45BC"/>
|
||||
<path d="M79.9033 83.5369L104.993 23.0431C100.88 21.3428 96.6039 20.068 92.2311 19.2388L79.9231 83.5369H79.9033Z" fill="#6156E3"/>
|
||||
<path d="M92.2129 19.2388C88.061 18.4459 83.8422 18.0558 79.6152 18.0738L79.9048 83.5369L92.2129 19.2388Z" fill="#6055E5"/>
|
||||
<path d="M236.239 53.1287L229.052 57.6438C222.786 49.4034 214.267 45.3051 203.495 45.3489C194.886 45.3884 187.749 48.1901 182.084 53.754C179.347 56.3511 177.183 59.4911 175.73 62.9729C174.277 66.4546 173.567 70.2014 173.646 73.9734C173.655 79.0806 175.032 84.092 177.635 88.4864C180.184 92.9382 183.931 96.5864 188.448 99.0174C193.166 101.537 198.45 102.811 203.797 102.716C214.184 102.673 222.646 98.504 229.184 90.2109L236.424 94.9234C233.06 100.028 228.383 104.132 222.885 106.804C217.18 109.634 210.7 111.064 203.442 111.095C192.275 111.148 182.992 107.637 175.594 100.564C168.196 93.4908 164.466 84.8664 164.405 74.6908C164.342 67.986 166.098 61.3894 169.486 55.6035C172.831 49.7784 177.725 44.9942 183.624 41.7816C189.813 38.4238 196.756 36.6999 203.797 36.7728C208.397 36.7424 212.972 37.4468 217.349 38.8592C221.33 40.081 225.081 41.9512 228.453 44.3946C231.589 46.775 234.233 49.7412 236.239 53.1287Z" fill="#1C1C1C"/>
|
||||
<path d="M244.499 38.4116L253.595 38.3722L253.74 71.3736C253.775 79.4297 254.234 84.9717 255.116 87.9993C256.332 92.1854 258.986 95.8077 262.612 98.2275C266.285 100.72 270.66 101.957 275.736 101.94C280.813 101.922 285.111 100.678 288.63 98.2078C292.071 95.8806 294.643 92.4778 295.943 88.5325C296.82 85.8032 297.259 80.0199 297.259 71.1827L297.114 38.1813L306.401 38.1352L306.553 72.8282C306.601 82.5693 305.504 89.9146 303.262 94.8642C301.117 99.6901 297.557 103.75 293.053 106.507C288.494 109.316 282.773 110.737 275.888 110.773C269.003 110.808 263.246 109.436 258.617 106.659C254.042 103.938 250.417 99.8723 248.238 95.0156C245.943 90.0178 244.773 82.4969 244.729 72.453L244.499 38.4116Z" fill="#1C1C1C"/>
|
||||
<path d="M316.966 38.0892L326.253 38.0497L326.299 48.3766C329.05 44.2958 331.959 41.2397 335.026 39.2081C337.859 37.2557 341.209 36.1903 344.649 36.1475C347.496 36.2288 350.274 37.0451 352.712 38.517L348.006 46.2046C346.497 45.4875 344.863 45.0737 343.194 44.9869C340.162 44.9869 337.245 46.2463 334.441 48.7649C331.637 51.2836 329.511 55.1581 328.063 60.3885C326.953 64.421 326.426 72.5649 326.483 84.8203L326.588 108.726L317.295 108.772L316.966 38.0892Z" fill="#1C1C1C"/>
|
||||
<path d="M359.057 37.9048L368.732 37.8588L392.696 89.2762L415.904 37.6481L425.645 37.6086L393.605 108.429H391.913L359.057 37.9048Z" fill="#1C1C1C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.9 KiB |
@ -1,25 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 247.16 47.67" style="enable-background:new 0 0 247.16 47.67;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#C2A882;}
|
||||
.st1{fill:#00292B;}
|
||||
.st2{fill:#00FFD4;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st1" d="M62.59,11.28l7.63,17.12h-15.3L62.59,11.28z M60.08,3.45L41.64,44.22h6.24l4.61-10.29h20.16l4.56,10.29h6.46
|
||||
L65.22,3.45H60.08z"/>
|
||||
<g>
|
||||
<path class="st1" d="M10.4,9.36h11.22c5.82,0,9.16,1.89,9.16,6.31c0,4.42-3.62,6.77-9.22,6.77H10.4V9.36z M36.81,15.67
|
||||
c0-7.54-5.83-11.94-14.86-11.94H4.43v40.5h5.97v-16.2h11.55C30.99,28.02,36.81,23.27,36.81,15.67"/>
|
||||
<path class="st1" d="M101.22,22.44V9.36h11.22c5.82,0,9.16,1.9,9.16,6.31c0,4.42-3.62,6.77-9.22,6.77H101.22z M116.54,27.71
|
||||
c6.85-1.16,11.09-5.56,11.09-12.04c0-7.54-5.83-11.94-14.85-11.94H95.25v40.5h5.97v-16.2h8.13l11.61,16.2h7.37L116.54,27.71z"/>
|
||||
</g>
|
||||
<polygon class="st0" points="144.19,3.73 144.19,44.22 150.16,44.22 150.16,28.02 168.37,28.02 168.37,22.44 150.16,22.44
|
||||
150.16,9.36 173.74,9.36 173.74,3.73 "/>
|
||||
<rect x="187.22" y="3.73" class="st0" width="5.97" height="40.5"/>
|
||||
<polygon class="st0" points="236.87,3.73 236.87,33.43 213.52,3.73 208.23,3.73 208.23,44.22 214.09,44.22 214.09,13.8
|
||||
238.05,44.22 242.72,44.22 242.72,3.73 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,26 +0,0 @@
|
||||
<svg width="168" height="168" viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="168" height="169">
|
||||
<path d="M84 0C130.392 0 168 37.6081 168 84C168 105.195 160.15 124.557 147.199 139.336L151.846 145.077C156.735 151.117 155.803 159.977 149.763 164.866C143.939 169.58 135.493 168.882 130.513 163.41L129.974 162.783L125.384 157.115C113.169 164.044 99.0465 168 84 168C37.6081 168 0 130.392 0 84C0 37.6081 37.6081 0 84 0ZM84 28.14C53.1494 28.14 28.14 53.1494 28.14 84C28.14 114.851 53.1494 139.86 84 139.86C92.32 139.86 100.215 138.041 107.309 134.779L101.414 127.503C96.5249 121.463 97.4575 112.603 103.497 107.714C109.321 102.999 117.767 103.698 122.747 109.17L123.286 109.797L129.094 116.974C135.863 107.733 139.86 96.3331 139.86 84C139.86 53.1494 114.851 28.14 84 28.14Z" fill="#242424"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M168 67.2L0 100.8V168H168V67.2Z" fill="url(#paint0_linear)"/>
|
||||
<ellipse cx="14.7" cy="94.5" rx="14.7" ry="14.7" fill="#FCE001"/>
|
||||
<path d="M-9.96887 -9.94773L176.881 -9.94771L176.881 64.7921L-9.96886 102.162L-9.96887 -9.94773Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M168 73.5C168 81.6186 161.419 88.2 153.3 88.2C145.182 88.2 138.6 81.6186 138.6 73.5C138.6 65.3815 145.182 58.8 153.3 58.8C161.419 58.8 168 65.3815 168 73.5Z" fill="#FF39E8"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="150" y1="84" x2="6.5" y2="118" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF38E7"/>
|
||||
<stop offset="1" stop-color="#00C9FA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="-23.0611" y1="66.1912" x2="180" y2="7" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.25" stop-color="#FCE000"/>
|
||||
<stop offset="1" stop-color="#00DFA1"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0">
|
||||
<rect width="168" height="168" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
3
app/images/icons/arrow-2-up-right.svg
Normal file
3
app/images/icons/arrow-2-up-right.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="icon-arrow-2-up-right" viewBox="0 0 512 512">
|
||||
<path d="m137 107c0-12 10-22 22-22l225 0c12 0 21 10 21 22l0 225c0 12-9 21-21 21-12 0-21-9-21-21l0-174-241 241c-9 8-22 8-30 0-9-8-9-22 0-30l240-241-173 0c-12 0-22-10-22-21z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 274 B |
@ -127,10 +127,6 @@ chrome.runtime.onMessage.addListener(() => {
|
||||
return false;
|
||||
});
|
||||
|
||||
chrome.runtime.onStartup.addListener(() => {
|
||||
globalThis.isFirstTimeProfileLoaded = true;
|
||||
});
|
||||
|
||||
/*
|
||||
* This content script is injected programmatically because
|
||||
* MAIN world injection does not work properly via manifest
|
||||
|
||||
@ -268,7 +268,23 @@ async function initialize() {
|
||||
await DesktopManager.init(platform.getVersion());
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
setupController(initState, initLangCode);
|
||||
let isFirstMetaMaskControllerSetup;
|
||||
if (isManifestV3) {
|
||||
const sessionData = await browser.storage.session.get([
|
||||
'isFirstMetaMaskControllerSetup',
|
||||
]);
|
||||
|
||||
isFirstMetaMaskControllerSetup =
|
||||
sessionData?.isFirstMetaMaskControllerSetup === undefined;
|
||||
await browser.storage.session.set({ isFirstMetaMaskControllerSetup });
|
||||
}
|
||||
|
||||
setupController(
|
||||
initState,
|
||||
initLangCode,
|
||||
{},
|
||||
isFirstMetaMaskControllerSetup,
|
||||
);
|
||||
if (!isManifestV3) {
|
||||
await loadPhishingWarningPage();
|
||||
}
|
||||
@ -410,8 +426,14 @@ export async function loadStateFromPersistence() {
|
||||
* @param {object} initState - The initial state to start the controller with, matches the state that is emitted from the controller.
|
||||
* @param {string} initLangCode - The region code for the language preferred by the current user.
|
||||
* @param {object} overrides - object with callbacks that are allowed to override the setup controller logic (usefull for desktop app)
|
||||
* @param isFirstMetaMaskControllerSetup
|
||||
*/
|
||||
export function setupController(initState, initLangCode, overrides) {
|
||||
export function setupController(
|
||||
initState,
|
||||
initLangCode,
|
||||
overrides,
|
||||
isFirstMetaMaskControllerSetup,
|
||||
) {
|
||||
//
|
||||
// MetaMask Controller
|
||||
//
|
||||
@ -437,6 +459,7 @@ export function setupController(initState, initLangCode, overrides) {
|
||||
},
|
||||
localStore,
|
||||
overrides,
|
||||
isFirstMetaMaskControllerSetup,
|
||||
});
|
||||
|
||||
setupEnsIpfsResolver({
|
||||
|
||||
@ -62,7 +62,7 @@ export default class AccountTracker {
|
||||
accounts: {},
|
||||
currentBlockGasLimit: '',
|
||||
};
|
||||
this.store = new ObservableStore(initState);
|
||||
this.store = new ObservableStore({ ...initState, ...opts.initState });
|
||||
|
||||
this.resetState = () => {
|
||||
this.store.updateState(initState);
|
||||
|
||||
@ -115,7 +115,7 @@ async function switchEthereumChainHandler(
|
||||
) {
|
||||
setProviderType(approvedRequestData.type);
|
||||
} else {
|
||||
await setActiveNetwork(approvedRequestData);
|
||||
await setActiveNetwork(approvedRequestData.id);
|
||||
}
|
||||
res.result = null;
|
||||
} catch (error) {
|
||||
|
||||
@ -62,7 +62,6 @@ import {
|
||||
} from '@metamask/snaps-controllers';
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
|
||||
import browser from 'webextension-polyfill';
|
||||
import {
|
||||
AssetType,
|
||||
TransactionStatus,
|
||||
@ -204,6 +203,8 @@ export default class MetamaskController extends EventEmitter {
|
||||
constructor(opts) {
|
||||
super();
|
||||
|
||||
const { isFirstMetaMaskControllerSetup } = opts;
|
||||
|
||||
this.defaultMaxListeners = 20;
|
||||
|
||||
this.sendUpdate = debounce(
|
||||
@ -547,10 +548,14 @@ export default class MetamaskController extends EventEmitter {
|
||||
this.phishingController.setStalelistRefreshInterval(30 * SECOND);
|
||||
}
|
||||
|
||||
this.announcementController = new AnnouncementController(
|
||||
{ allAnnouncements: UI_NOTIFICATIONS },
|
||||
initState.AnnouncementController,
|
||||
);
|
||||
const announcementMessenger = this.controllerMessenger.getRestricted({
|
||||
name: 'AnnouncementController',
|
||||
});
|
||||
this.announcementController = new AnnouncementController({
|
||||
messenger: announcementMessenger,
|
||||
allAnnouncements: UI_NOTIFICATIONS,
|
||||
state: initState.AnnouncementController,
|
||||
});
|
||||
|
||||
// token exchange rate tracker
|
||||
this.tokenRatesController = new TokenRatesController(
|
||||
@ -638,6 +643,12 @@ export default class MetamaskController extends EventEmitter {
|
||||
},
|
||||
preferencesController: this.preferencesController,
|
||||
onboardingController: this.onboardingController,
|
||||
initState:
|
||||
isManifestV3 &&
|
||||
isFirstMetaMaskControllerSetup === false &&
|
||||
initState.AccountTracker?.accounts
|
||||
? { accounts: initState.AccountTracker.accounts }
|
||||
: { accounts: {} },
|
||||
});
|
||||
|
||||
// start and stop polling for balances based on activeControllerConnections
|
||||
@ -1369,8 +1380,11 @@ export default class MetamaskController extends EventEmitter {
|
||||
];
|
||||
|
||||
if (isManifestV3) {
|
||||
if (globalThis.isFirstTimeProfileLoaded === true) {
|
||||
if (isFirstMetaMaskControllerSetup === true) {
|
||||
this.resetStates(resetMethods);
|
||||
this.extension.storage.session.set({
|
||||
isFirstMetaMaskControllerSetup: false,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// it's always the first time in MV2
|
||||
@ -1445,8 +1459,6 @@ export default class MetamaskController extends EventEmitter {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
|
||||
globalThis.isFirstTimeProfileLoaded = false;
|
||||
}
|
||||
|
||||
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
||||
@ -2671,10 +2683,8 @@ export default class MetamaskController extends EventEmitter {
|
||||
*/
|
||||
async submitEncryptionKey() {
|
||||
try {
|
||||
const { loginToken, loginSalt } = await browser.storage.session.get([
|
||||
'loginToken',
|
||||
'loginSalt',
|
||||
]);
|
||||
const { loginToken, loginSalt } =
|
||||
await this.extension.storage.session.get(['loginToken', 'loginSalt']);
|
||||
if (loginToken && loginSalt) {
|
||||
const { vault } = this.keyringController.store.getState();
|
||||
|
||||
@ -2699,7 +2709,7 @@ export default class MetamaskController extends EventEmitter {
|
||||
}
|
||||
|
||||
async clearLoginArtifacts() {
|
||||
await browser.storage.session.remove(['loginToken', 'loginSalt']);
|
||||
await this.extension.storage.session.remove(['loginToken', 'loginSalt']);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -4117,7 +4127,7 @@ export default class MetamaskController extends EventEmitter {
|
||||
);
|
||||
|
||||
if (isManifestV3) {
|
||||
await browser.storage.session.set({ loginToken, loginSalt });
|
||||
await this.extension.storage.session.set({ loginToken, loginSalt });
|
||||
}
|
||||
|
||||
if (!addresses.length) {
|
||||
|
||||
@ -30,6 +30,9 @@ const browserPolyfillMock = {
|
||||
},
|
||||
getPlatformInfo: async () => 'mac',
|
||||
},
|
||||
storage: {
|
||||
session: {},
|
||||
},
|
||||
};
|
||||
|
||||
let loggerMiddlewareMock;
|
||||
@ -79,6 +82,10 @@ const MetaMaskController = proxyquire('./metamask-controller', {
|
||||
'ethjs-contract': MockEthContract,
|
||||
}).default;
|
||||
|
||||
const MetaMaskControllerMV3 = proxyquire('./metamask-controller', {
|
||||
'../../shared/modules/mv3.utils': { isManifestV3: true },
|
||||
}).default;
|
||||
|
||||
const currentNetworkId = '5';
|
||||
const DEFAULT_LABEL = 'Account 1';
|
||||
const TEST_SEED =
|
||||
@ -168,10 +175,13 @@ describe('MetaMaskController', function () {
|
||||
const sandbox = sinon.createSandbox();
|
||||
const noop = () => undefined;
|
||||
|
||||
browserPolyfillMock.storage.session.set = sandbox.spy();
|
||||
|
||||
before(async function () {
|
||||
globalThis.isFirstTimeProfileLoaded = true;
|
||||
await ganacheServer.start();
|
||||
sinon.spy(MetaMaskController.prototype, 'resetStates');
|
||||
sinon.spy(MetaMaskControllerMV3.prototype, 'resetStates');
|
||||
});
|
||||
|
||||
beforeEach(function () {
|
||||
@ -224,6 +234,7 @@ describe('MetaMaskController', function () {
|
||||
},
|
||||
browser: browserPolyfillMock,
|
||||
infuraProjectId: 'foo',
|
||||
isFirstMetaMaskControllerSetup: true,
|
||||
});
|
||||
|
||||
// add sinon method spies
|
||||
@ -247,14 +258,70 @@ describe('MetaMaskController', function () {
|
||||
});
|
||||
|
||||
describe('should reset states on first time profile load', function () {
|
||||
it('should reset state', function () {
|
||||
assert(metamaskController.resetStates.calledOnce);
|
||||
assert.equal(globalThis.isFirstTimeProfileLoaded, false);
|
||||
it('in mv2, it should reset state without attempting to call browser storage', function () {
|
||||
assert.equal(metamaskController.resetStates.callCount, 1);
|
||||
assert.equal(browserPolyfillMock.storage.session.set.callCount, 0);
|
||||
});
|
||||
|
||||
it('should not reset states if already set', function () {
|
||||
// global.isFirstTime should also remain false
|
||||
assert.equal(globalThis.isFirstTimeProfileLoaded, false);
|
||||
it('in mv3, it should reset state', function () {
|
||||
MetaMaskControllerMV3.prototype.resetStates.resetHistory();
|
||||
const metamaskControllerMV3 = new MetaMaskControllerMV3({
|
||||
showUserConfirmation: noop,
|
||||
encryptor: {
|
||||
encrypt(_, object) {
|
||||
this.object = object;
|
||||
return Promise.resolve('mock-encrypted');
|
||||
},
|
||||
decrypt() {
|
||||
return Promise.resolve(this.object);
|
||||
},
|
||||
},
|
||||
initState: cloneDeep(firstTimeState),
|
||||
initLangCode: 'en_US',
|
||||
platform: {
|
||||
showTransactionNotification: () => undefined,
|
||||
getVersion: () => 'foo',
|
||||
},
|
||||
browser: browserPolyfillMock,
|
||||
infuraProjectId: 'foo',
|
||||
isFirstMetaMaskControllerSetup: true,
|
||||
});
|
||||
assert.equal(metamaskControllerMV3.resetStates.callCount, 1);
|
||||
assert.equal(browserPolyfillMock.storage.session.set.callCount, 1);
|
||||
assert.deepEqual(
|
||||
browserPolyfillMock.storage.session.set.getCall(0).args[0],
|
||||
{
|
||||
isFirstMetaMaskControllerSetup: false,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it('in mv3, it should not reset states if isFirstMetaMaskControllerSetup is false', function () {
|
||||
MetaMaskControllerMV3.prototype.resetStates.resetHistory();
|
||||
browserPolyfillMock.storage.session.set.resetHistory();
|
||||
const metamaskControllerMV3 = new MetaMaskControllerMV3({
|
||||
showUserConfirmation: noop,
|
||||
encryptor: {
|
||||
encrypt(_, object) {
|
||||
this.object = object;
|
||||
return Promise.resolve('mock-encrypted');
|
||||
},
|
||||
decrypt() {
|
||||
return Promise.resolve(this.object);
|
||||
},
|
||||
},
|
||||
initState: cloneDeep(firstTimeState),
|
||||
initLangCode: 'en_US',
|
||||
platform: {
|
||||
showTransactionNotification: () => undefined,
|
||||
getVersion: () => 'foo',
|
||||
},
|
||||
browser: browserPolyfillMock,
|
||||
infuraProjectId: 'foo',
|
||||
isFirstMetaMaskControllerSetup: false,
|
||||
});
|
||||
assert.equal(metamaskControllerMV3.resetStates.callCount, 0);
|
||||
assert.equal(browserPolyfillMock.storage.session.set.callCount, 0);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
// subset of files to check against these targets.
|
||||
module.exports = {
|
||||
global: {
|
||||
lines: 65.5,
|
||||
branches: 53.5,
|
||||
statements: 64.75,
|
||||
functions: 58,
|
||||
lines: 66,
|
||||
branches: 54.4,
|
||||
statements: 65,
|
||||
functions: 58.5,
|
||||
},
|
||||
transforms: {
|
||||
branches: 100,
|
||||
|
||||
@ -147,6 +147,9 @@ async function defineAndRunBuildTasks() {
|
||||
browserPlatforms,
|
||||
browserVersionMap,
|
||||
buildType,
|
||||
applyLavaMoat,
|
||||
shouldIncludeSnow,
|
||||
entryTask,
|
||||
});
|
||||
|
||||
const styleTasks = createStyleTasks({ livereload });
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
const { promises: fs } = require('fs');
|
||||
const path = require('path');
|
||||
const { mergeWith, cloneDeep } = require('lodash');
|
||||
const childProcess = require('child_process');
|
||||
const { mergeWith, cloneDeep, capitalize } = require('lodash');
|
||||
|
||||
const baseManifest = process.env.ENABLE_MV3
|
||||
? require('../../app/manifest/v3/_base.json')
|
||||
: require('../../app/manifest/v2/_base.json');
|
||||
const { BuildType } = require('../lib/build-type');
|
||||
|
||||
const { TASKS } = require('./constants');
|
||||
const { TASKS, ENVIRONMENT } = require('./constants');
|
||||
const { createTask, composeSeries } = require('./task');
|
||||
const { getEnvironment } = require('./utils');
|
||||
|
||||
module.exports = createManifestTasks;
|
||||
|
||||
@ -16,6 +18,9 @@ function createManifestTasks({
|
||||
browserPlatforms,
|
||||
browserVersionMap,
|
||||
buildType,
|
||||
applyLavaMoat,
|
||||
shouldIncludeSnow,
|
||||
entryTask,
|
||||
}) {
|
||||
// merge base manifest with per-platform manifests
|
||||
const prepPlatforms = async () => {
|
||||
@ -38,6 +43,9 @@ function createManifestTasks({
|
||||
await getBuildModifications(buildType, platform),
|
||||
customArrayMerge,
|
||||
);
|
||||
|
||||
modifyNameAndDescForNonProd(result);
|
||||
|
||||
const dir = path.join('.', 'dist', platform);
|
||||
await fs.mkdir(dir, { recursive: true });
|
||||
await writeJson(result, path.join(dir, 'manifest.json'));
|
||||
@ -101,12 +109,39 @@ function createManifestTasks({
|
||||
);
|
||||
const manifest = await readJson(manifestPath);
|
||||
transformFn(manifest);
|
||||
|
||||
await writeJson(manifest, manifestPath);
|
||||
}),
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
// For non-production builds only, modify the extension's name and description
|
||||
function modifyNameAndDescForNonProd(manifest) {
|
||||
const environment = getEnvironment({ buildTarget: entryTask });
|
||||
|
||||
if (environment === ENVIRONMENT.PRODUCTION) {
|
||||
return;
|
||||
}
|
||||
|
||||
const mv3Str = process.env.ENABLE_MV3 ? ' MV3' : '';
|
||||
const lavamoatStr = applyLavaMoat ? ' lavamoat' : '';
|
||||
const snowStr = shouldIncludeSnow ? ' snow' : '';
|
||||
|
||||
// Get the first 8 characters of the git revision id
|
||||
const gitRevisionStr = childProcess
|
||||
.execSync('git rev-parse HEAD')
|
||||
.toString()
|
||||
.trim()
|
||||
.substring(0, 8);
|
||||
|
||||
manifest.name = `MetaMask ${capitalize(
|
||||
buildType,
|
||||
)}${mv3Str}${lavamoatStr}${snowStr}`;
|
||||
|
||||
manifest.description = `${environment} build from git id: ${gitRevisionStr}`;
|
||||
}
|
||||
|
||||
// helper for merging obj value
|
||||
function customArrayMerge(objValue, srcValue) {
|
||||
if (Array.isArray(objValue)) {
|
||||
|
||||
@ -386,9 +386,9 @@
|
||||
"ui/components/app/asset-list-item/asset-list-item.js",
|
||||
"ui/components/app/asset-list-item/index.js",
|
||||
"ui/components/app/asset-list/asset-list.js",
|
||||
"ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js",
|
||||
"ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.stories.js",
|
||||
"ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.test.js",
|
||||
"ui/components/app/asset-list/detected-tokens-link/detected-tokens-link.js",
|
||||
"ui/components/app/asset-list/detected-tokens-link/detected-tokens-link.stories.js",
|
||||
"ui/components/app/asset-list/detected-tokens-link/detected-tokens-link.test.js",
|
||||
"ui/components/app/asset-list/index.js",
|
||||
"ui/components/app/cancel-button/cancel-button.js",
|
||||
"ui/components/app/cancel-button/index.js",
|
||||
|
||||
@ -686,18 +686,10 @@
|
||||
},
|
||||
"@metamask/announcement-controller": {
|
||||
"packages": {
|
||||
"@metamask/announcement-controller>@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/announcement-controller>@metamask/base-controller": {
|
||||
"packages": {
|
||||
"immer": true
|
||||
"@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/approval-controller": {
|
||||
"globals": {
|
||||
"console.log": true
|
||||
},
|
||||
"packages": {
|
||||
"@metamask/approval-controller>nanoid": true,
|
||||
"@metamask/base-controller": true,
|
||||
|
||||
@ -686,18 +686,10 @@
|
||||
},
|
||||
"@metamask/announcement-controller": {
|
||||
"packages": {
|
||||
"@metamask/announcement-controller>@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/announcement-controller>@metamask/base-controller": {
|
||||
"packages": {
|
||||
"immer": true
|
||||
"@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/approval-controller": {
|
||||
"globals": {
|
||||
"console.log": true
|
||||
},
|
||||
"packages": {
|
||||
"@metamask/approval-controller>nanoid": true,
|
||||
"@metamask/base-controller": true,
|
||||
|
||||
@ -686,18 +686,10 @@
|
||||
},
|
||||
"@metamask/announcement-controller": {
|
||||
"packages": {
|
||||
"@metamask/announcement-controller>@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/announcement-controller>@metamask/base-controller": {
|
||||
"packages": {
|
||||
"immer": true
|
||||
"@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/approval-controller": {
|
||||
"globals": {
|
||||
"console.log": true
|
||||
},
|
||||
"packages": {
|
||||
"@metamask/approval-controller>nanoid": true,
|
||||
"@metamask/base-controller": true,
|
||||
|
||||
@ -686,18 +686,10 @@
|
||||
},
|
||||
"@metamask/announcement-controller": {
|
||||
"packages": {
|
||||
"@metamask/announcement-controller>@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/announcement-controller>@metamask/base-controller": {
|
||||
"packages": {
|
||||
"immer": true
|
||||
"@metamask/base-controller": true
|
||||
}
|
||||
},
|
||||
"@metamask/approval-controller": {
|
||||
"globals": {
|
||||
"console.log": true
|
||||
},
|
||||
"packages": {
|
||||
"@metamask/approval-controller>nanoid": true,
|
||||
"@metamask/base-controller": true,
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"start": "yarn build:dev dev --apply-lavamoat=false --snow=false",
|
||||
"start:lavamoat": "yarn build:dev dev --apply-lavamoat=true",
|
||||
"start:mv3": "ENABLE_MV3=true yarn build:dev dev --apply-lavamoat=false",
|
||||
"start:flask": "yarn start --build-type flask",
|
||||
"dist": "yarn build dist",
|
||||
"build": "yarn lavamoat:build",
|
||||
"build:dev": "node development/build/index.js",
|
||||
@ -226,7 +227,7 @@
|
||||
"@lavamoat/snow": "^1.5.0",
|
||||
"@material-ui/core": "^4.11.0",
|
||||
"@metamask/address-book-controller": "^1.0.0",
|
||||
"@metamask/announcement-controller": "^1.0.0",
|
||||
"@metamask/announcement-controller": "^2.0.1",
|
||||
"@metamask/approval-controller": "^1.0.0",
|
||||
"@metamask/assets-controllers": "^4.0.1",
|
||||
"@metamask/base-controller": "^1.0.0",
|
||||
|
||||
@ -81,13 +81,21 @@ export const UI_NOTIFICATIONS = {
|
||||
16: {
|
||||
id: 16,
|
||||
date: null,
|
||||
},
|
||||
17: {
|
||||
id: 17,
|
||||
date: null,
|
||||
},
|
||||
18: {
|
||||
id: 18,
|
||||
date: null,
|
||||
image: {
|
||||
src: 'images/open-sea-security-provider.svg',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
17: {
|
||||
id: 17,
|
||||
19: {
|
||||
id: 19,
|
||||
date: null,
|
||||
image: {
|
||||
src: 'images/nfts.svg',
|
||||
@ -240,34 +248,34 @@ export const getTranslatedUINotifications = (t, locale) => {
|
||||
)
|
||||
: '',
|
||||
},
|
||||
16: {
|
||||
...UI_NOTIFICATIONS[16],
|
||||
title: t('notifications16Title'),
|
||||
18: {
|
||||
...UI_NOTIFICATIONS[18],
|
||||
title: t('notifications18Title'),
|
||||
description: [
|
||||
t('notifications16DescriptionOne'),
|
||||
t('notifications16DescriptionTwo'),
|
||||
t('notifications16DescriptionThree'),
|
||||
t('notifications18DescriptionOne'),
|
||||
t('notifications18DescriptionTwo'),
|
||||
t('notifications18DescriptionThree'),
|
||||
],
|
||||
actionText: t('notifications16ActionText'),
|
||||
date: UI_NOTIFICATIONS[16].date
|
||||
actionText: t('notifications18ActionText'),
|
||||
date: UI_NOTIFICATIONS[18].date
|
||||
? new Intl.DateTimeFormat(formattedLocale).format(
|
||||
new Date(UI_NOTIFICATIONS[16].date),
|
||||
new Date(UI_NOTIFICATIONS[18].date),
|
||||
)
|
||||
: '',
|
||||
},
|
||||
|
||||
17: {
|
||||
...UI_NOTIFICATIONS[17],
|
||||
title: t('notifications17Title'),
|
||||
19: {
|
||||
...UI_NOTIFICATIONS[19],
|
||||
title: t('notifications19Title'),
|
||||
description: [
|
||||
t('notifications17DescriptionOne'),
|
||||
t('notifications17DescriptionTwo'),
|
||||
t('notifications17DescriptionThree'),
|
||||
t('notifications19DescriptionOne'),
|
||||
t('notifications19DescriptionTwo'),
|
||||
t('notifications19DescriptionThree'),
|
||||
],
|
||||
actionText: t('notifications17ActionText'),
|
||||
date: UI_NOTIFICATIONS[17].date
|
||||
actionText: t('notifications19ActionText'),
|
||||
date: UI_NOTIFICATIONS[19].date
|
||||
? new Intl.DateTimeFormat(formattedLocale).format(
|
||||
new Date(UI_NOTIFICATIONS[17].date),
|
||||
new Date(UI_NOTIFICATIONS[19].date),
|
||||
)
|
||||
: '',
|
||||
},
|
||||
|
||||
@ -117,11 +117,21 @@ function defaultFixture() {
|
||||
16: {
|
||||
date: null,
|
||||
id: 16,
|
||||
isShown: true,
|
||||
isShown: false,
|
||||
},
|
||||
17: {
|
||||
date: null,
|
||||
id: 17,
|
||||
isShown: false,
|
||||
},
|
||||
18: {
|
||||
date: null,
|
||||
id: 18,
|
||||
isShown: true,
|
||||
},
|
||||
19: {
|
||||
date: null,
|
||||
id: 19,
|
||||
isShown: true,
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
const { strict: assert } = require('assert');
|
||||
const { withFixtures } = require('../helpers');
|
||||
const FixtureBuilder = require('../fixture-builder');
|
||||
const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
|
||||
@ -61,7 +60,7 @@ describe('Test Snap bip-32', function () {
|
||||
});
|
||||
|
||||
// wait for permissions popover, click checkboxes and confirm
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#key-access-bip32-m-44h-0h-secp256k1-0');
|
||||
await driver.clickElement('#key-access-bip32-m-44h-0h-ed25519-1');
|
||||
await driver.clickElement(
|
||||
@ -73,7 +72,6 @@ describe('Test Snap bip-32', function () {
|
||||
});
|
||||
|
||||
await driver.waitForSelector({ text: 'Ok' });
|
||||
|
||||
await driver.clickElement({
|
||||
text: 'Ok',
|
||||
tag: 'button',
|
||||
@ -90,46 +88,30 @@ describe('Test Snap bip-32', function () {
|
||||
|
||||
// scroll to and click get public key
|
||||
await driver.delay(1000);
|
||||
const snapButton2 = await driver.findElement('#bip32GetPublic');
|
||||
await driver.scrollToElement(snapButton2);
|
||||
await driver.delay(1000);
|
||||
await driver.waitForSelector({ text: 'Get Public Key' });
|
||||
await driver.clickElement('#bip32GetPublic');
|
||||
|
||||
// check for proper public key response
|
||||
await driver.delay(1000);
|
||||
const retrievePublicKeyResult1 = await driver.findElement(
|
||||
'#bip32PublicKeyResult',
|
||||
);
|
||||
assert.equal(
|
||||
await retrievePublicKeyResult1.getText(),
|
||||
'"0x043e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366606ece56791c361a2320e7fad8bcbb130f66d51c591fc39767ab2856e93f8dfb"',
|
||||
);
|
||||
// check for proper public key response using waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#bip32PublicKeyResult',
|
||||
text: '"0x043e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366606ece56791c361a2320e7fad8bcbb130f66d51c591fc39767ab2856e93f8dfb',
|
||||
});
|
||||
|
||||
// scroll to and click get compressed public key
|
||||
await driver.delay(1000);
|
||||
const snapButton3 = await driver.findElement(
|
||||
'#bip32GetCompressedPublic',
|
||||
);
|
||||
await driver.scrollToElement(snapButton3);
|
||||
await driver.delay(1000);
|
||||
await driver.waitForSelector({ text: 'Get Compressed Public Key' });
|
||||
await driver.clickElement('#bip32GetCompressedPublic');
|
||||
|
||||
// check for proper public key response
|
||||
await driver.delay(1000);
|
||||
const retrievePublicKeyResult2 = await driver.findElement(
|
||||
'#bip32PublicKeyResult',
|
||||
);
|
||||
assert.equal(
|
||||
await retrievePublicKeyResult2.getText(),
|
||||
'"0x033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366"',
|
||||
);
|
||||
// check for proper public key response using waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#bip32PublicKeyResult',
|
||||
text: '"0x033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366',
|
||||
});
|
||||
|
||||
// wait then run SECP256K1 test
|
||||
await driver.delay(1000);
|
||||
await driver.pasteIntoField('#bip32Message-secp256k1', 'foo bar');
|
||||
await driver.fill('#bip32Message-secp256k1', 'foo bar');
|
||||
await driver.clickElement('#sendBip32-secp256k1');
|
||||
|
||||
// hit 'approve' on the custom confirm
|
||||
// hit 'approve' on the signature confirmation
|
||||
windowHandles = await driver.waitUntilXWindowHandles(2, 1000, 10000);
|
||||
await driver.switchToWindowWithTitle(
|
||||
'MetaMask Notification',
|
||||
@ -140,28 +122,23 @@ describe('Test Snap bip-32', function () {
|
||||
tag: 'button',
|
||||
});
|
||||
|
||||
// switch back to the test-snaps window
|
||||
windowHandles = await driver.waitUntilXWindowHandles(1, 1000, 10000);
|
||||
await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
|
||||
|
||||
// check result
|
||||
await driver.delay(1000);
|
||||
const secp256k1Result = await driver.findElement(
|
||||
'#bip32MessageResult-secp256k1',
|
||||
);
|
||||
assert.equal(
|
||||
await secp256k1Result.getText(),
|
||||
'"0x3045022100b3ade2992ea3e5eb58c7550e9bddad356e9554233c8b099ebc3cb418e9301ae2022064746e15ae024808f0ba5d860e44dc4c97e65c8cba6f5ef9ea2e8c819930d2dc"',
|
||||
);
|
||||
// check results of the secp256k1 signature with waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#bip32MessageResult-secp256k1',
|
||||
text: '"0x3045022100b3ade2992ea3e5eb58c7550e9bddad356e9554233c8b099ebc3cb418e9301ae2022064746e15ae024808f0ba5d860e44dc4c97e65c8cba6f5ef9ea2e8c819930d2dc',
|
||||
});
|
||||
|
||||
// scroll further into messages section
|
||||
await driver.delay(1000);
|
||||
const snapButton4 = await driver.findElement('#bip32Message-ed25519');
|
||||
const snapButton4 = await driver.findElement('#sendBip32-ed25519');
|
||||
await driver.scrollToElement(snapButton4);
|
||||
await driver.delay(1000);
|
||||
|
||||
// wait then run ed25519 test
|
||||
await driver.delay(1000);
|
||||
await driver.pasteIntoField('#bip32Message-ed25519', 'foo bar');
|
||||
await driver.delay(500);
|
||||
await driver.fill('#bip32Message-ed25519', 'foo bar');
|
||||
await driver.clickElement('#sendBip32-ed25519');
|
||||
|
||||
// hit 'approve' on the custom confirm
|
||||
@ -178,15 +155,11 @@ describe('Test Snap bip-32', function () {
|
||||
windowHandles = await driver.waitUntilXWindowHandles(1, 1000, 10000);
|
||||
await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
|
||||
|
||||
// check result
|
||||
await driver.delay(1000);
|
||||
const ed25519Result = await driver.findElement(
|
||||
'#bip32MessageResult-ed25519',
|
||||
);
|
||||
assert.equal(
|
||||
await ed25519Result.getText(),
|
||||
'"0xf3215b4d6c59aac7e01b4ceef530d1e2abf4857926b85a81aaae3894505699243768a887b7da4a8c2e0f25196196ba290b6531050db8dc15c252bdd508532a0a"',
|
||||
);
|
||||
// check results of ed25519 signature with waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#bip32MessageResult-ed25519',
|
||||
text: '"0xf3215b4d6c59aac7e01b4ceef530d1e2abf4857926b85a81aaae3894505699243768a887b7da4a8c2e0f25196196ba290b6531050db8dc15c252bdd508532a0a"',
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
const { strict: assert } = require('assert');
|
||||
const { withFixtures } = require('../helpers');
|
||||
const FixtureBuilder = require('../fixture-builder');
|
||||
const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
|
||||
@ -31,13 +30,15 @@ describe('Test Snap bip-44', function () {
|
||||
// navigate to test snaps page and connect
|
||||
await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
|
||||
await driver.delay(1000);
|
||||
|
||||
// find and scroll to the bip44 test and connect
|
||||
const snapButton1 = await driver.findElement('#connectBip44Snap');
|
||||
await driver.scrollToElement(snapButton1);
|
||||
await driver.delay(1000);
|
||||
await driver.clickElement('#connectBip44Snap');
|
||||
await driver.delay(1000);
|
||||
|
||||
// switch to metamask extension and click connect
|
||||
// switch to metamask extension and click connect and approve
|
||||
let windowHandles = await driver.waitUntilXWindowHandles(
|
||||
2,
|
||||
1000,
|
||||
@ -51,31 +52,26 @@ describe('Test Snap bip-44', function () {
|
||||
text: 'Connect',
|
||||
tag: 'button',
|
||||
});
|
||||
|
||||
await driver.waitForSelector({ text: 'Approve & install' });
|
||||
|
||||
await driver.clickElement({
|
||||
text: 'Approve & install',
|
||||
tag: 'button',
|
||||
});
|
||||
|
||||
// deal with permissions popover
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#key-access-bip44-1-0');
|
||||
await driver.delay(1500);
|
||||
await driver.clickElement({
|
||||
text: 'Confirm',
|
||||
tag: 'button',
|
||||
});
|
||||
|
||||
await driver.waitForSelector({ text: 'Ok' });
|
||||
|
||||
await driver.clickElement({
|
||||
text: 'Ok',
|
||||
tag: 'button',
|
||||
});
|
||||
|
||||
// click send inputs on test snap page
|
||||
// switch back to test-snaps window
|
||||
await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
|
||||
|
||||
// wait for npm installation success
|
||||
@ -84,22 +80,21 @@ describe('Test Snap bip-44', function () {
|
||||
text: 'Reconnect to BIP-44 Snap',
|
||||
});
|
||||
|
||||
// find and click bip44 test
|
||||
await driver.clickElement('#sendBip44Test');
|
||||
|
||||
// check the results of the public key test
|
||||
await driver.delay(1000);
|
||||
const bip44Result = await driver.findElement('#bip44Result');
|
||||
assert.equal(
|
||||
await bip44Result.getText(),
|
||||
'"0x86debb44fb3a984d93f326131d4c1db0bc39644f1a67b673b3ab45941a1cea6a385981755185ac4594b6521e4d1e08d1"',
|
||||
);
|
||||
// check the results of the public key test using waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#bip44Result',
|
||||
text: '"0x86debb44fb3a984d93f326131d4c1db0bc39644f1a67b673b3ab45941a1cea6a385981755185ac4594b6521e4d1e08d1"',
|
||||
});
|
||||
|
||||
// enter a message to sign
|
||||
await driver.pasteIntoField('#bip44Message', '1234');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
const snapButton3 = await driver.findElement('#signBip44Message');
|
||||
await driver.scrollToElement(snapButton3);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#signBip44Message');
|
||||
|
||||
// Switch to approve signature message window and approve
|
||||
@ -116,14 +111,12 @@ describe('Test Snap bip-44', function () {
|
||||
// switch back to test-snaps page
|
||||
windowHandles = await driver.waitUntilXWindowHandles(1, 1000, 10000);
|
||||
await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
|
||||
await driver.delay(1000);
|
||||
|
||||
// check the results of the message signature
|
||||
const bip44SignResult = await driver.findElement('#bip44SignResult');
|
||||
assert.equal(
|
||||
await bip44SignResult.getText(),
|
||||
'"0xa41ab87ca50606eefd47525ad90294bbe44c883f6bc53655f1b8a55aa8e1e35df216f31be62e52c7a1faa519420e20810162e07dedb0fde2a4d997ff7180a78232ecd8ce2d6f4ba42ccacad33c5e9e54a8c4d41506bdffb2bb4c368581d8b086"',
|
||||
);
|
||||
// check the results of the message signature using waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#bip44SignResult',
|
||||
text: '"0xa41ab87ca50606eefd47525ad90294bbe44c883f6bc53655f1b8a55aa8e1e35df216f31be62e52c7a1faa519420e20810162e07dedb0fde2a4d997ff7180a78232ecd8ce2d6f4ba42ccacad33c5e9e54a8c4d41506bdffb2bb4c368581d8b086"',
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@ -77,7 +77,7 @@ describe('Test Snap Dialog', function () {
|
||||
|
||||
// click on alert dialog
|
||||
await driver.clickElement('#sendAlertButton');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// switch to dialog popup
|
||||
windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
|
||||
@ -85,12 +85,12 @@ describe('Test Snap Dialog', function () {
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// check dialog contents
|
||||
let result = await driver.findElement('.snap-ui-renderer__panel');
|
||||
await driver.scrollToElement(result);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
assert.equal(await result.getText(), 'Alert Dialog\nText here');
|
||||
|
||||
// click ok button
|
||||
@ -105,12 +105,12 @@ describe('Test Snap Dialog', function () {
|
||||
|
||||
// check result is null
|
||||
result = await driver.findElement('#dialogResult');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
assert.equal(await result.getText(), 'null');
|
||||
|
||||
// click conf button
|
||||
await driver.clickElement('#sendConfButton');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// switch to dialog popup
|
||||
windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
|
||||
@ -118,7 +118,7 @@ describe('Test Snap Dialog', function () {
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// click reject
|
||||
await driver.clickElement({
|
||||
@ -132,12 +132,12 @@ describe('Test Snap Dialog', function () {
|
||||
|
||||
// check for false result
|
||||
result = await driver.findElement('#dialogResult');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
assert.equal(await result.getText(), 'false');
|
||||
|
||||
// click conf button again
|
||||
await driver.clickElement('#sendConfButton');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// switch to dialog popup
|
||||
windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
|
||||
@ -145,7 +145,7 @@ describe('Test Snap Dialog', function () {
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// click accept
|
||||
await driver.clickElement({
|
||||
@ -159,12 +159,12 @@ describe('Test Snap Dialog', function () {
|
||||
|
||||
// check for true result
|
||||
result = await driver.findElement('#dialogResult');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
assert.equal(await result.getText(), 'true');
|
||||
|
||||
// click prompt button
|
||||
await driver.clickElement('#sendPromptButton');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// switch to dialog popup
|
||||
windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
|
||||
@ -172,7 +172,7 @@ describe('Test Snap Dialog', function () {
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// click cancel button
|
||||
await driver.clickElement({
|
||||
@ -186,12 +186,12 @@ describe('Test Snap Dialog', function () {
|
||||
|
||||
// check result is equal to 'null'
|
||||
result = await driver.findElement('#dialogResult');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
assert.equal(await result.getText(), 'null');
|
||||
|
||||
// click prompt button
|
||||
await driver.clickElement('#sendPromptButton');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// switch to dialog popup
|
||||
windowHandles = await driver.waitUntilXWindowHandles(3, 1000, 10000);
|
||||
@ -199,7 +199,7 @@ describe('Test Snap Dialog', function () {
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// fill '2323' in form field
|
||||
await driver.pasteIntoField('.MuiInput-input', '2323');
|
||||
@ -216,7 +216,6 @@ describe('Test Snap Dialog', function () {
|
||||
|
||||
// check result is equal to '2323'
|
||||
result = await driver.findElement('#dialogResult');
|
||||
await driver.delay(1000);
|
||||
assert.equal(await result.getText(), '"2323"');
|
||||
},
|
||||
);
|
||||
|
||||
@ -81,7 +81,7 @@ describe('Test Snap Error', function () {
|
||||
|
||||
// switch back to the extension page
|
||||
await driver.switchToWindow(extensionPage);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// look for the actual error and check if it is correct
|
||||
const error = await driver.findElement(
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
const { strict: assert } = require('assert');
|
||||
const { withFixtures } = require('../helpers');
|
||||
const FixtureBuilder = require('../fixture-builder');
|
||||
const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
|
||||
@ -33,9 +32,9 @@ describe('Test Snap Installed', function () {
|
||||
await driver.delay(1000);
|
||||
const confirmButton = await driver.findElement('#connectDialogSnap');
|
||||
await driver.scrollToElement(confirmButton);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#connectDialogSnap');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// switch to metamask extension and click connect
|
||||
let windowHandles = await driver.waitUntilXWindowHandles(
|
||||
@ -77,7 +76,7 @@ describe('Test Snap Installed', function () {
|
||||
|
||||
const errorButton = await driver.findElement('#connectErrorSnap');
|
||||
await driver.scrollToElement(errorButton);
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#connectErrorSnap');
|
||||
|
||||
// switch to metamask extension and click connect
|
||||
@ -109,17 +108,9 @@ describe('Test Snap Installed', function () {
|
||||
|
||||
// wait for npm installation success
|
||||
await driver.waitForSelector({
|
||||
css: '#connectErrorSnap',
|
||||
text: 'Reconnect to Error Snap',
|
||||
css: '#installedSnapsResult',
|
||||
text: 'npm:@metamask/test-snap-dialog, npm:@metamask/test-snap-error',
|
||||
});
|
||||
|
||||
const result = await driver.findElement('#installedSnapsResult');
|
||||
await driver.scrollToElement(result);
|
||||
await driver.delay(1000);
|
||||
assert.equal(
|
||||
await result.getText(),
|
||||
'npm:@metamask/test-snap-dialog, npm:@metamask/test-snap-error',
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@ -82,7 +82,7 @@ describe('Test Snap Notification', function () {
|
||||
|
||||
// switch back to the extension page
|
||||
await driver.switchToWindow(extensionPage);
|
||||
await driver.delay(1500);
|
||||
await driver.delay(1000);
|
||||
|
||||
// check to see that there is one notification
|
||||
const notificationResult = await driver.findElement(
|
||||
@ -92,14 +92,14 @@ describe('Test Snap Notification', function () {
|
||||
|
||||
// try to click on the account menu icon (via xpath)
|
||||
await driver.clickElement('.account-menu__icon');
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// try to click on the notification item (via xpath)
|
||||
await driver.clickElement({
|
||||
text: 'Notifications',
|
||||
tag: 'div',
|
||||
});
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
|
||||
// look for the correct text in notifications (via xpath)
|
||||
const notificationResultMessage = await driver.findElement(
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
const { strict: assert } = require('assert');
|
||||
const { withFixtures } = require('../helpers');
|
||||
const FixtureBuilder = require('../fixture-builder');
|
||||
const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
|
||||
@ -62,7 +61,7 @@ describe('Test Snap RPC', function () {
|
||||
});
|
||||
|
||||
// wait for permissions popover, click checkboxes and confirm
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#key-access-bip32-m-44h-0h-secp256k1-0');
|
||||
await driver.clickElement('#key-access-bip32-m-44h-0h-ed25519-1');
|
||||
await driver.clickElement(
|
||||
@ -127,14 +126,11 @@ describe('Test Snap RPC', function () {
|
||||
await driver.delay(1000);
|
||||
await driver.clickElement('#sendRpc');
|
||||
|
||||
// delay for result creation
|
||||
await driver.delay(2500);
|
||||
|
||||
const confirmResult = await driver.findElement('#rpcResult');
|
||||
assert.equal(
|
||||
await confirmResult.getText(),
|
||||
'"0x033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366"',
|
||||
);
|
||||
// check result with waitForSelector
|
||||
await driver.waitForSelector({
|
||||
css: '#rpcResult',
|
||||
text: '"0x033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366"',
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@ -100,7 +100,7 @@ describe('Test Snap TxInsights', function () {
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
await driver.delay(2000);
|
||||
await driver.delay(1000);
|
||||
await driver.clickElement({
|
||||
text: 'TxInsightsTest',
|
||||
tag: 'button',
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
const { strict: assert } = require('assert');
|
||||
const { withFixtures } = require('../helpers');
|
||||
const FixtureBuilder = require('../fixture-builder');
|
||||
const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
|
||||
@ -37,7 +36,7 @@ describe('Test Snap update', function () {
|
||||
await driver.scrollToElement(snapButton);
|
||||
await driver.delay(1000);
|
||||
await driver.clickElement('#connectUpdate');
|
||||
await driver.delay(2000);
|
||||
await driver.delay(1000);
|
||||
|
||||
// switch to metamask extension and click connect
|
||||
let windowHandles = await driver.waitUntilXWindowHandles(
|
||||
@ -62,7 +61,7 @@ describe('Test Snap update', function () {
|
||||
});
|
||||
|
||||
// wait for permissions popover, click checkboxes and confirm
|
||||
await driver.delay(1000);
|
||||
await driver.delay(500);
|
||||
await driver.clickElement('#key-access-bip32-m-44h-0h-secp256k1-0');
|
||||
await driver.clickElement('#key-access-bip32-m-44h-0h-ed25519-1');
|
||||
await driver.clickElement(
|
||||
@ -96,11 +95,8 @@ describe('Test Snap update', function () {
|
||||
await driver.clickElement('#connectUpdateNew');
|
||||
await driver.delay(1000);
|
||||
|
||||
// switch to metamask extension and click connect
|
||||
// switch to metamask extension and update
|
||||
await driver.waitUntilXWindowHandles(2, 1000, 10000);
|
||||
await driver.delay(1000);
|
||||
|
||||
// approve update of snap
|
||||
windowHandles = await driver.getAllWindowHandles();
|
||||
await driver.switchToWindowWithTitle(
|
||||
'MetaMask Notification',
|
||||
@ -125,9 +121,10 @@ describe('Test Snap update', function () {
|
||||
await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
|
||||
|
||||
// look for the correct version text
|
||||
const versionResult = await driver.findElement('#updateSnapVersion');
|
||||
await driver.delay(1000);
|
||||
assert.equal(await versionResult.getText(), '"5.1.2"');
|
||||
await driver.waitForSelector({
|
||||
css: '#updateSnapVersion',
|
||||
text: '"5.1.2"',
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
102
test/e2e/tests/switch-custom-network.spec.js
Normal file
102
test/e2e/tests/switch-custom-network.spec.js
Normal file
@ -0,0 +1,102 @@
|
||||
const { strict: assert } = require('assert');
|
||||
const FixtureBuilder = require('../fixture-builder');
|
||||
const { convertToHexValue, withFixtures } = require('../helpers');
|
||||
|
||||
describe('Swtich ethereum chain', function () {
|
||||
const ganacheOptions = {
|
||||
accounts: [
|
||||
{
|
||||
secretKey:
|
||||
'0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
|
||||
balance: convertToHexValue(25000000000000000000),
|
||||
},
|
||||
],
|
||||
concurrent: { port: 8546, chainId: 1338, ganacheOptions2: {} },
|
||||
};
|
||||
|
||||
it('should successfully change the network in response to wallet_switchEthereumChain', async function () {
|
||||
await withFixtures(
|
||||
{
|
||||
dapp: true,
|
||||
fixtures: new FixtureBuilder()
|
||||
.withPermissionControllerConnectedToTestDapp()
|
||||
.build(),
|
||||
ganacheOptions,
|
||||
title: this.test.title,
|
||||
failOnConsoleError: false,
|
||||
},
|
||||
async ({ driver }) => {
|
||||
await driver.navigate();
|
||||
await driver.fill('#password', 'correct horse battery staple');
|
||||
await driver.press('#password', driver.Key.ENTER);
|
||||
|
||||
const windowHandles = await driver.getAllWindowHandles();
|
||||
const extension = windowHandles[0];
|
||||
|
||||
await driver.openNewPage('http://127.0.0.1:8080/');
|
||||
|
||||
await driver.clickElement({
|
||||
tag: 'button',
|
||||
text: 'Add Localhost 8546',
|
||||
});
|
||||
|
||||
await driver.waitUntilXWindowHandles(3);
|
||||
|
||||
await driver.switchToWindowWithTitle(
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
|
||||
await driver.clickElement({
|
||||
tag: 'button',
|
||||
text: 'Approve',
|
||||
});
|
||||
|
||||
await driver.findElement({
|
||||
tag: 'h3',
|
||||
text: 'Allow this site to switch the network?',
|
||||
});
|
||||
|
||||
// Don't switch to network now, because we will click the 'Switch to Localhost 8546' button below
|
||||
await driver.clickElement({
|
||||
tag: 'button',
|
||||
text: 'Cancel',
|
||||
});
|
||||
|
||||
await driver.waitUntilXWindowHandles(2);
|
||||
|
||||
await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
|
||||
await driver.clickElement({
|
||||
tag: 'button',
|
||||
text: 'Switch to Localhost 8546',
|
||||
});
|
||||
|
||||
await driver.waitUntilXWindowHandles(3);
|
||||
|
||||
await driver.switchToWindowWithTitle(
|
||||
'MetaMask Notification',
|
||||
windowHandles,
|
||||
);
|
||||
|
||||
await driver.clickElement({
|
||||
tag: 'button',
|
||||
text: 'Switch network',
|
||||
});
|
||||
|
||||
await driver.waitUntilXWindowHandles(2);
|
||||
|
||||
await driver.switchToWindow(extension);
|
||||
|
||||
const currentNetworkName = await driver.findElement({
|
||||
tag: 'span',
|
||||
text: 'Localhost 8546',
|
||||
});
|
||||
|
||||
assert.ok(
|
||||
Boolean(currentNetworkName),
|
||||
'Failed to switch to custom network',
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -92,7 +92,7 @@
|
||||
@import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index';
|
||||
@import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index';
|
||||
@import 'currency-input/index';
|
||||
@import 'asset-list/detetcted-tokens-link/index';
|
||||
@import 'asset-list/detected-tokens-link/index';
|
||||
@import 'detected-token/detected-token-address/index';
|
||||
@import 'detected-token/detected-token-aggregators/index';
|
||||
@import 'detected-token/detected-token-values/index';
|
||||
|
||||
@ -30,7 +30,7 @@ import {
|
||||
MultichainImportTokenLink,
|
||||
} from '../../multichain';
|
||||
import { Text } from '../../component-library';
|
||||
import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link';
|
||||
import DetectedTokensLink from './detected-tokens-link/detected-tokens-link';
|
||||
|
||||
const AssetList = ({ onClickAsset }) => {
|
||||
const t = useI18nContext();
|
||||
|
||||
@ -6,16 +6,14 @@ import BigNumber from 'bignumber.js';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
import Box from '../../ui/box';
|
||||
import FormField from '../../ui/form-field';
|
||||
import Typography from '../../ui/typography';
|
||||
import { Text, ButtonLink } from '../../component-library';
|
||||
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
|
||||
import { ButtonLink } from '../../component-library';
|
||||
import {
|
||||
AlignItems,
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
TEXT_ALIGN,
|
||||
FONT_WEIGHT,
|
||||
TypographyVariant,
|
||||
TextVariant,
|
||||
JustifyContent,
|
||||
Size,
|
||||
BLOCK_SIZES,
|
||||
@ -72,14 +70,14 @@ export default function CustomSpendingCap({
|
||||
return {
|
||||
className: 'custom-spending-cap__lowerValue',
|
||||
description: t('inputLogicEqualOrSmallerNumber', [
|
||||
<Typography
|
||||
<Text
|
||||
key="custom-spending-cap"
|
||||
variant={TypographyVariant.H6}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
variant={TextVariant.bodySmBold}
|
||||
as="h6"
|
||||
className="custom-spending-cap__input-value-and-token-name"
|
||||
>
|
||||
{replaceCommaToDot(inputNumber)} {tokenName}
|
||||
</Typography>,
|
||||
</Text>,
|
||||
]),
|
||||
};
|
||||
} else if (decConversionGreaterThan(inputNumber, currentTokenBalance)) {
|
||||
@ -146,14 +144,14 @@ export default function CustomSpendingCap({
|
||||
currentTokenBalance,
|
||||
)
|
||||
? t('warningTooltipText', [
|
||||
<Typography
|
||||
<Text
|
||||
key="tooltip-text"
|
||||
variant={TypographyVariant.H7}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
variant={TextVariant.bodySmBold}
|
||||
as="h6"
|
||||
color={TextColor.errorDefault}
|
||||
>
|
||||
<Icon name={ICON_NAMES.WARNING} /> {t('beCareful')}
|
||||
</Typography>,
|
||||
</Text>,
|
||||
])
|
||||
: t('inputLogicEmptyState');
|
||||
|
||||
@ -250,15 +248,17 @@ export default function CustomSpendingCap({
|
||||
'custom-spending-cap__description--with-error-message': error,
|
||||
})}
|
||||
>
|
||||
<Typography
|
||||
<Text
|
||||
color={TextColor.textDefault}
|
||||
variant={TypographyVariant.H7}
|
||||
boxProps={{ paddingTop: 2, paddingBottom: 2 }}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
paddingTop={2}
|
||||
paddingBottom={2}
|
||||
>
|
||||
{replaceCommaToDot(value)
|
||||
? customSpendingCapText
|
||||
: inputLogicEmptyStateText}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
|
||||
@ -44,7 +44,10 @@ export default function MultilayerFeeMessage({
|
||||
useEffect(() => {
|
||||
const getEstimatedL1Fee = async () => {
|
||||
try {
|
||||
const result = await fetchEstimatedL1Fee(transaction);
|
||||
const result = await fetchEstimatedL1Fee(
|
||||
transaction.chainId,
|
||||
transaction.txParams,
|
||||
);
|
||||
setLayer1Total(result);
|
||||
} catch (e) {
|
||||
captureException(e);
|
||||
@ -75,7 +78,7 @@ export default function MultilayerFeeMessage({
|
||||
return (
|
||||
<div className="multi-layer-fee-message">
|
||||
<TransactionDetailItem
|
||||
key="total-item"
|
||||
key="total-item-gas-fee"
|
||||
detailTitle={t('gasFee')}
|
||||
detailTotal={layer1Total}
|
||||
detailText={feeTotalInFiat}
|
||||
@ -83,7 +86,7 @@ export default function MultilayerFeeMessage({
|
||||
flexWidthValues={plainStyle}
|
||||
/>
|
||||
<TransactionDetailItem
|
||||
key="total-item"
|
||||
key="total-item-total"
|
||||
detailTitle={t('total')}
|
||||
detailTotal={totalInEth}
|
||||
detailText={totalInFiat}
|
||||
|
||||
@ -61,10 +61,16 @@ function getActionFunctionById(id, history) {
|
||||
},
|
||||
16: () => {
|
||||
updateViewedNotifications({ 16: true });
|
||||
history.push(`${EXPERIMENTAL_ROUTE}#transaction-security-check`);
|
||||
},
|
||||
17: () => {
|
||||
updateViewedNotifications({ 17: true });
|
||||
},
|
||||
18: () => {
|
||||
updateViewedNotifications({ 18: true });
|
||||
history.push(`${EXPERIMENTAL_ROUTE}#transaction-security-check`);
|
||||
},
|
||||
19: () => {
|
||||
updateViewedNotifications({ 19: true });
|
||||
history.push(`${EXPERIMENTAL_ROUTE}#autodetect-nfts`);
|
||||
},
|
||||
};
|
||||
@ -266,8 +272,8 @@ export default function WhatsNewPopup({ onClose }) {
|
||||
const notification = getTranslatedUINotifications(t, locale)[id];
|
||||
const isLast = index === notifications.length - 1;
|
||||
// Display the swaps notification with full image
|
||||
// Displays the NFTs & OpenSea notifications 16,17 with full image
|
||||
return index === 0 || id === 1 || id === 16 || id === 17
|
||||
// Displays the NFTs & OpenSea notifications 18,19 with full image
|
||||
return index === 0 || id === 1 || id === 18 || id === 19
|
||||
? renderFirstNotification(notification, idRefMap, history, isLast)
|
||||
: renderSubsequentNotification(
|
||||
notification,
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { Icon, IconName } from '..';
|
||||
import README from './README.mdx';
|
||||
import { AvatarBase } from './avatar-base';
|
||||
import { AVATAR_BASE_SIZES } from './avatar-base.constants';
|
||||
@ -124,7 +124,7 @@ export const Children = (args) => (
|
||||
backgroundColor={BackgroundColor.infoMuted}
|
||||
borderColor={BorderColor.infoMuted}
|
||||
>
|
||||
<Icon name={ICON_NAMES.USER} color={Color.infoDefault} />
|
||||
<Icon name={IconName.User} color={Color.infoDefault} />
|
||||
</AvatarBase>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { AvatarBase } from '../avatar-base';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES, Icon } from '../icon/deprecated';
|
||||
import { IconName, Icon } from '../icon';
|
||||
import {
|
||||
BorderColor,
|
||||
Size,
|
||||
@ -43,7 +43,7 @@ export const AvatarFavicon = ({
|
||||
/>
|
||||
) : (
|
||||
<Icon
|
||||
name={ICON_NAMES.GLOBAL}
|
||||
name={IconName.Global}
|
||||
color={IconColor.iconDefault}
|
||||
size={size}
|
||||
{...fallbackIconProps}
|
||||
@ -65,7 +65,7 @@ AvatarFavicon.propTypes = {
|
||||
/**
|
||||
* Props for the fallback icon. All Icon props can be used
|
||||
*/
|
||||
fallbackIconProps: PropTypes.shape(Icon.PropTypes),
|
||||
fallbackIconProps: PropTypes.object,
|
||||
/**
|
||||
* The size of the AvatarFavicon
|
||||
* Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px
|
||||
|
||||
@ -44,7 +44,7 @@ Defaults to `Size.MD`
|
||||
|
||||
```jsx
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
|
||||
import { AvatarIcon, IconName } from '../ui/component-library';
|
||||
|
||||
<AvatarIcon {...args} size={Size.XS} />
|
||||
<AvatarIcon {...args} size={Size.SM} />
|
||||
@ -55,22 +55,22 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
|
||||
|
||||
### Icon Name<span style={{ color: 'red' }}>\*</span>
|
||||
|
||||
Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library` to select icon
|
||||
Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon
|
||||
|
||||
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-avataricon--icon-name" />
|
||||
<Story id="components-componentlibrary-avataricon--icon-name-story" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
|
||||
import { AvatarIcon, IconName } from '../ui/component-library';
|
||||
|
||||
<AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} />
|
||||
<AvatarIcon iconName={ICON_NAMES.CONFIRMATION} />
|
||||
<AvatarIcon iconName={ICON_NAMES.INFO} />
|
||||
<AvatarIcon iconName={ICON_NAMES.WARNING} />
|
||||
<AvatarIcon iconName={ICON_NAMES.DANGER} />
|
||||
<AvatarIcon iconName={IconName.SwapHorizontal} />
|
||||
<AvatarIcon iconName={IconName.Confirmation} />
|
||||
<AvatarIcon iconName={IconName.Info} />
|
||||
<AvatarIcon iconName={IconName.Warning} />
|
||||
<AvatarIcon iconName={IconName.Danger} />
|
||||
```
|
||||
|
||||
### Color and Background Color
|
||||
|
||||
@ -14,7 +14,7 @@ import {
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName, Icon } from '../icon';
|
||||
import { AvatarBase } from '../avatar-base';
|
||||
|
||||
import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
|
||||
@ -27,39 +27,37 @@ export const AvatarIcon = ({
|
||||
iconProps,
|
||||
iconName,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<AvatarBase
|
||||
}) => (
|
||||
<AvatarBase
|
||||
size={size}
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={AlignItems.center}
|
||||
justifyContent={JustifyContent.center}
|
||||
color={color}
|
||||
backgroundColor={backgroundColor}
|
||||
borderColor={BorderColor.transparent}
|
||||
className={classnames('mm-avatar-icon', className)}
|
||||
{...props}
|
||||
>
|
||||
<Icon
|
||||
color={IconColor.inherit}
|
||||
name={iconName}
|
||||
size={size}
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={AlignItems.center}
|
||||
justifyContent={JustifyContent.center}
|
||||
color={color}
|
||||
backgroundColor={backgroundColor}
|
||||
borderColor={BorderColor.transparent}
|
||||
className={classnames('mm-avatar-icon', className)}
|
||||
{...props}
|
||||
>
|
||||
<Icon
|
||||
color={IconColor.inherit}
|
||||
name={iconName}
|
||||
size={size}
|
||||
{...iconProps}
|
||||
/>
|
||||
</AvatarBase>
|
||||
);
|
||||
};
|
||||
{...iconProps}
|
||||
/>
|
||||
</AvatarBase>
|
||||
);
|
||||
|
||||
AvatarIcon.propTypes = {
|
||||
/**
|
||||
*
|
||||
* The name of the icon to display. Should be one of ICON_NAMES
|
||||
* The name of the icon to display. Should be one of IconName
|
||||
*/
|
||||
iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
|
||||
iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
|
||||
/**
|
||||
* Props for the icon inside AvatarIcon. All Icon props can be used
|
||||
*/
|
||||
iconProps: PropTypes.shape(Icon.PropTypes),
|
||||
iconProps: PropTypes.object,
|
||||
/**
|
||||
* The size of the AvatarIcon
|
||||
* Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
|
||||
import README from './README.mdx';
|
||||
import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
|
||||
@ -35,7 +35,6 @@ const marginSizeControlOptions = [
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/AvatarIcon',
|
||||
|
||||
component: AvatarIcon,
|
||||
parameters: {
|
||||
docs: {
|
||||
@ -44,7 +43,7 @@ export default {
|
||||
},
|
||||
argTypes: {
|
||||
iconName: {
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
control: 'select',
|
||||
},
|
||||
size: {
|
||||
@ -89,7 +88,7 @@ export default {
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return <AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} {...args} />;
|
||||
return <AvatarIcon iconName={IconName.SwapHorizontal} {...args} />;
|
||||
};
|
||||
|
||||
export const DefaultStory = Template.bind({});
|
||||
@ -107,80 +106,82 @@ export const SizeStory = (args) => (
|
||||
SizeStory.storyName = 'Size';
|
||||
|
||||
SizeStory.args = {
|
||||
iconName: ICON_NAMES.CONFIRMATION,
|
||||
iconName: IconName.Confirmation,
|
||||
};
|
||||
|
||||
export const IconName = (args) => (
|
||||
export const IconNameStory = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<AvatarIcon
|
||||
color={IconColor.primaryDefault}
|
||||
backgroundColor={BackgroundColor.primaryMuted}
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.successDefault}
|
||||
backgroundColor={BackgroundColor.successMuted}
|
||||
iconName={ICON_NAMES.CONFIRMATION}
|
||||
iconName={IconName.Confirmation}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.infoDefault}
|
||||
backgroundColor={BackgroundColor.infoMuted}
|
||||
iconName={ICON_NAMES.INFO}
|
||||
iconName={IconName.Info}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.warningDefault}
|
||||
backgroundColor={BackgroundColor.warningMuted}
|
||||
iconName={ICON_NAMES.WARNING}
|
||||
iconName={IconName.Warning}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.errorDefault}
|
||||
backgroundColor={BackgroundColor.errorMuted}
|
||||
iconName={ICON_NAMES.DANGER}
|
||||
iconName={IconName.Danger}
|
||||
{...args}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
IconNameStory.storyName = 'Icon Name';
|
||||
|
||||
export const ColorAndBackgroundColor = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<AvatarIcon
|
||||
color={IconColor.primaryDefault}
|
||||
backgroundColor={BackgroundColor.primaryMuted}
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.primaryInverse}
|
||||
backgroundColor={BackgroundColor.primaryDefault}
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.successDefault}
|
||||
backgroundColor={BackgroundColor.successMuted}
|
||||
iconName={ICON_NAMES.CONFIRMATION}
|
||||
iconName={IconName.Confirmation}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.infoDefault}
|
||||
backgroundColor={BackgroundColor.infoMuted}
|
||||
iconName={ICON_NAMES.INFO}
|
||||
iconName={IconName.Info}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.warningDefault}
|
||||
backgroundColor={BackgroundColor.warningMuted}
|
||||
iconName={ICON_NAMES.WARNING}
|
||||
iconName={IconName.Warning}
|
||||
{...args}
|
||||
/>
|
||||
<AvatarIcon
|
||||
color={IconColor.errorDefault}
|
||||
backgroundColor={BackgroundColor.errorMuted}
|
||||
iconName={ICON_NAMES.DANGER}
|
||||
iconName={IconName.Danger}
|
||||
{...args}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import {
|
||||
BackgroundColor,
|
||||
IconColor,
|
||||
@ -13,7 +13,7 @@ describe('AvatarIcon', () => {
|
||||
it('should render correctly', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
data-testid="avatar-icon"
|
||||
/>,
|
||||
);
|
||||
@ -25,27 +25,27 @@ describe('AvatarIcon', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
size={AVATAR_ICON_SIZES.XS}
|
||||
data-testid={AVATAR_ICON_SIZES.XS}
|
||||
/>
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
size={AVATAR_ICON_SIZES.SM}
|
||||
data-testid={AVATAR_ICON_SIZES.SM}
|
||||
/>
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
size={AVATAR_ICON_SIZES.MD}
|
||||
data-testid={AVATAR_ICON_SIZES.MD}
|
||||
/>
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
size={AVATAR_ICON_SIZES.LG}
|
||||
data-testid={AVATAR_ICON_SIZES.LG}
|
||||
/>
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
size={AVATAR_ICON_SIZES.XL}
|
||||
data-testid={AVATAR_ICON_SIZES.XL}
|
||||
/>
|
||||
@ -71,7 +71,7 @@ describe('AvatarIcon', () => {
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
className="mm-avatar-icon--test"
|
||||
data-testid="classname"
|
||||
/>,
|
||||
@ -82,7 +82,7 @@ describe('AvatarIcon', () => {
|
||||
it('should render with icon', () => {
|
||||
const { getByTestId } = render(
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
iconProps={{ 'data-testid': 'avatar-icon' }}
|
||||
/>,
|
||||
);
|
||||
@ -93,7 +93,7 @@ describe('AvatarIcon', () => {
|
||||
it('should render with success color icon and background color', () => {
|
||||
const { getByTestId } = render(
|
||||
<AvatarIcon
|
||||
iconName={ICON_NAMES.SWAP_HORIZONTAL}
|
||||
iconName={IconName.SwapHorizontal}
|
||||
color={IconColor.successDefault}
|
||||
backgroundColor={BackgroundColor.successMuted}
|
||||
data-testid="success"
|
||||
|
||||
@ -88,7 +88,7 @@ export const DefaultStory = Template.bind({});
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Children = () => (
|
||||
export const Children: ComponentStory<typeof BadgeWrapper> = () => (
|
||||
<Box display={DISPLAY.FLEX} gap={4}>
|
||||
<BadgeWrapper
|
||||
badge={
|
||||
@ -140,7 +140,7 @@ export const Children = () => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Badge = () => (
|
||||
export const Badge: ComponentStory<typeof BadgeWrapper> = () => (
|
||||
<Box display={DISPLAY.FLEX} gap={4}>
|
||||
<BadgeWrapper
|
||||
badge={
|
||||
@ -207,7 +207,7 @@ export const Badge = () => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Position = () => (
|
||||
export const Position: ComponentStory<typeof BadgeWrapper> = () => (
|
||||
<Box display={DISPLAY.FLEX} gap={4}>
|
||||
<BadgeWrapper
|
||||
position={BadgeWrapperPosition.topLeft}
|
||||
@ -263,7 +263,7 @@ export const Position = () => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const PositionObj = () => (
|
||||
export const PositionObj: ComponentStory<typeof BadgeWrapper> = () => (
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={4}>
|
||||
<BadgeWrapper
|
||||
badge={
|
||||
@ -281,7 +281,7 @@ export const PositionObj = () => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const AnchorElementShape = () => (
|
||||
export const AnchorElementShape: ComponentStory<typeof BadgeWrapper> = () => (
|
||||
<Box display={DISPLAY.FLEX} gap={4}>
|
||||
<BadgeWrapper
|
||||
badge={
|
||||
|
||||
@ -118,13 +118,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerAlert, ICON_NAMES } from '../../component-library';
|
||||
import { BannerAlert, IconName } from '../../component-library';
|
||||
|
||||
<BannerAlert
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
endIconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
endIconName: IconName.Arrow2Right,
|
||||
}}
|
||||
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
|
||||
>
|
||||
|
||||
@ -2,14 +2,12 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { BannerBase } from '..';
|
||||
import { BannerBase, Icon, IconName, IconSize } from '..';
|
||||
|
||||
import {
|
||||
BackgroundColor,
|
||||
IconColor,
|
||||
SEVERITIES,
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
|
||||
|
||||
@ -23,23 +21,23 @@ export const BannerAlert = ({
|
||||
switch (severity) {
|
||||
case SEVERITIES.DANGER:
|
||||
return {
|
||||
name: ICON_NAMES.DANGER,
|
||||
name: IconName.Danger,
|
||||
color: IconColor.errorDefault,
|
||||
};
|
||||
case SEVERITIES.WARNING:
|
||||
return {
|
||||
name: ICON_NAMES.WARNING,
|
||||
name: IconName.Warning,
|
||||
color: IconColor.warningDefault,
|
||||
};
|
||||
case SEVERITIES.SUCCESS:
|
||||
return {
|
||||
name: ICON_NAMES.CONFIRMATION,
|
||||
name: IconName.Confirmation,
|
||||
color: IconColor.successDefault,
|
||||
};
|
||||
// Defaults to SEVERITIES.INFO
|
||||
default:
|
||||
return {
|
||||
name: ICON_NAMES.INFO,
|
||||
name: IconName.Info,
|
||||
color: IconColor.primaryDefault,
|
||||
};
|
||||
}
|
||||
@ -61,7 +59,7 @@ export const BannerAlert = ({
|
||||
|
||||
return (
|
||||
<BannerBase
|
||||
startAccessory={<Icon size={Size.LG} {...severityIcon()} />}
|
||||
startAccessory={<Icon size={IconSize.Lg} {...severityIcon()} />}
|
||||
backgroundColor={severityBackground()}
|
||||
paddingLeft={2}
|
||||
className={classnames(
|
||||
|
||||
@ -7,8 +7,7 @@ import {
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ButtonLink, ButtonPrimary } from '..';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { ButtonLink, ButtonPrimary, IconName } from '..';
|
||||
import README from './README.mdx';
|
||||
import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
|
||||
|
||||
@ -165,7 +164,7 @@ ActionButton.args = {
|
||||
actionButtonLabel: 'Action',
|
||||
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
|
||||
actionButtonProps: {
|
||||
endIconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
endIconName: IconName.Arrow2Right,
|
||||
},
|
||||
children:
|
||||
'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
|
||||
|
||||
@ -81,13 +81,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerBase, ICON_NAMES } from '../../component-library';
|
||||
import { BannerBase, IconName } from '../../component-library';
|
||||
|
||||
<BannerBase
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
endIconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
endIconName: IconName.Arrow2Right,
|
||||
}}
|
||||
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
|
||||
>
|
||||
@ -129,11 +129,11 @@ Use the `startAccessory` prop to add components such as icons or fox image to th
|
||||
```jsx
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { BannerBase } from '../../component-library';
|
||||
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
|
||||
import { Icon, IconName } from '../../component-library';
|
||||
|
||||
<BannerBase
|
||||
title="Start accessory demo"
|
||||
startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />}
|
||||
startAccessory={<Icon name={IconName.Info} size={IconSize.Lg} />}
|
||||
>
|
||||
The info icon on the left is passed through the startAccessory prop
|
||||
</BannerBase>;
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { ButtonIcon, ButtonLink, Text } from '..';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '../icon';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
|
||||
@ -72,7 +72,7 @@ export const BannerBase = ({
|
||||
<ButtonIcon
|
||||
className="mm-banner-base__close-button"
|
||||
marginLeft="auto"
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
iconName={IconName.Close}
|
||||
size={Size.SM}
|
||||
ariaLabel="Close" // TODO: i18n
|
||||
onClick={onClose}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useState } from '@storybook/addons';
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { ButtonLink, ButtonPrimary } from '..';
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { ButtonLink, ButtonPrimary, Icon, IconName, IconSize } from '..';
|
||||
import { BannerBase } from './banner-base';
|
||||
import README from './README.mdx';
|
||||
|
||||
@ -96,7 +95,7 @@ DefaultStory.args = {
|
||||
title: 'Title is sentence case no period',
|
||||
children: "Description shouldn't repeat title. 1-3 lines.",
|
||||
actionButtonLabel: 'Action',
|
||||
startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />,
|
||||
startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -144,7 +143,7 @@ ActionButton.args = {
|
||||
actionButtonLabel: 'Action',
|
||||
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
|
||||
actionButtonProps: {
|
||||
endIconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
endIconName: IconName.Arrow2Right,
|
||||
},
|
||||
children:
|
||||
'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
|
||||
@ -182,5 +181,5 @@ StartAccessory.args = {
|
||||
title: 'Start accessory demo',
|
||||
children:
|
||||
'The info icon on the left is passed through the startAccessory prop',
|
||||
startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />,
|
||||
startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import React from 'react';
|
||||
|
||||
import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { Icon, IconName } from '..';
|
||||
import { BannerBase } from './banner-base';
|
||||
|
||||
describe('BannerBase', () => {
|
||||
@ -58,7 +58,7 @@ describe('BannerBase', () => {
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
endIconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
endIconName: IconName.Arrow2Right,
|
||||
'data-testid': 'action',
|
||||
className: 'mm-banner-base__action',
|
||||
}}
|
||||
@ -78,7 +78,7 @@ describe('BannerBase', () => {
|
||||
const { getByTestId } = render(
|
||||
<BannerBase
|
||||
startAccessory={
|
||||
<Icon data-testid="start-accessory" name={ICON_NAMES.ADD_SQUARE} />
|
||||
<Icon data-testid="start-accessory" name={IconName.AddSquare} />
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
@ -107,13 +107,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip, ICON_NAMES } from '../../component-library';
|
||||
import { BannerTip, IconName } from '../../component-library';
|
||||
|
||||
<BannerTip
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
|
||||
icon: IconName.Arrow2Right, // TODO: change to iconName
|
||||
iconPositionRight: true,
|
||||
}}
|
||||
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
|
||||
@ -157,7 +157,7 @@ Use the `startAccessory` prop to pass a ReactNode to the start of the `BannerTip
|
||||
import { BannerTip } from '../../component-library';
|
||||
|
||||
<BannerTip
|
||||
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
|
||||
startAccessory={<Icon name={IconName.Messages} />}
|
||||
title="StartAccessory"
|
||||
>
|
||||
This is a demo of startAccessory override.
|
||||
|
||||
@ -5,8 +5,7 @@ import {
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { ButtonLink, ButtonPrimary } from '..';
|
||||
import { ButtonLink, ButtonPrimary, Icon, IconName } from '..';
|
||||
import README from './README.mdx';
|
||||
import { BannerTip, BannerTipLogoType } from '.';
|
||||
|
||||
@ -141,7 +140,7 @@ ActionButton.args = {
|
||||
actionButtonLabel: 'Action',
|
||||
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
|
||||
actionButtonProps: {
|
||||
iconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
iconName: IconName.Arrow2Right,
|
||||
iconPositionRight: true,
|
||||
},
|
||||
children:
|
||||
@ -176,7 +175,7 @@ export const StartAccessory = (args) => {
|
||||
return (
|
||||
<BannerTip
|
||||
{...args}
|
||||
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
|
||||
startAccessory={<Icon name={IconName.Messages} />}
|
||||
title="StartAccessory"
|
||||
onClose={() => console.log('close button clicked')}
|
||||
>
|
||||
|
||||
@ -144,7 +144,7 @@ import { ButtonBase } from '../../component-library';
|
||||
|
||||
### Icon Name
|
||||
|
||||
Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
|
||||
Use the `startIconName` and/or `endIconName` prop with the `IconName` enum from `./ui/components/component-library` to select icon.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-buttonbase--start-icon-name" />
|
||||
@ -152,9 +152,9 @@ Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object f
|
||||
|
||||
```jsx
|
||||
import { ButtonBase } from '../../component-library';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { IconName } from '../icon';
|
||||
|
||||
<ButtonBase startIconName={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>;
|
||||
<ButtonBase startIconName={IconName.AddSquare}>Button</ButtonBase>;
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
@ -163,9 +163,9 @@ import { ICON_NAMES } from '../icon';
|
||||
|
||||
```jsx
|
||||
import { ButtonBase } from '../../component-library';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { IconName } from '../icon';
|
||||
|
||||
<ButtonBase endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</ButtonBase>;
|
||||
<ButtonBase endIconName={IconName.Arrow2Right}>Button</ButtonBase>;
|
||||
```
|
||||
|
||||
### RTL
|
||||
@ -177,18 +177,18 @@ For RTL language support use the `textDirection` prop.
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonBase, ICON_NAMES, TextDirection } from '../../component-library';
|
||||
import { ButtonBase, IconName, TextDirection } from '../../component-library';
|
||||
|
||||
<>
|
||||
<ButtonBase
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={ICON_NAMES.ARROW_2_RIGHT}
|
||||
startIconName={IconName.AddSquare}
|
||||
endIconName={IconName.Arrow2Right}
|
||||
>
|
||||
Button Demo
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={ICON_NAMES.ARROW_2_RIGHT}
|
||||
startIconName={IconName.AddSquare}
|
||||
endIconName={IconName.Arrow2Right}
|
||||
textDirection={TextDirection.RightToLeft}
|
||||
>
|
||||
Button Demo
|
||||
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName, Icon, IconSize } from '../icon';
|
||||
import { Text } from '../text';
|
||||
|
||||
import {
|
||||
@ -12,7 +12,6 @@ import {
|
||||
JustifyContent,
|
||||
TextColor,
|
||||
TextVariant,
|
||||
Size,
|
||||
BorderRadius,
|
||||
BackgroundColor,
|
||||
IconColor,
|
||||
@ -75,7 +74,7 @@ export const ButtonBase = ({
|
||||
{startIconName && (
|
||||
<Icon
|
||||
name={startIconName}
|
||||
size={Size.SM}
|
||||
size={IconSize.Sm}
|
||||
marginInlineEnd={1}
|
||||
{...startIconProps}
|
||||
color={loading ? IconColor.transparent : startIconProps?.color}
|
||||
@ -102,7 +101,7 @@ export const ButtonBase = ({
|
||||
{endIconName && (
|
||||
<Icon
|
||||
name={endIconName}
|
||||
size={Size.SM}
|
||||
size={IconSize.Sm}
|
||||
marginInlineStart={1}
|
||||
{...endIconProps}
|
||||
color={loading ? IconColor.transparent : endIconProps?.color}
|
||||
@ -111,9 +110,9 @@ export const ButtonBase = ({
|
||||
{loading && (
|
||||
<Icon
|
||||
className="mm-button-base__icon-loading"
|
||||
name={ICON_NAMES.LOADING}
|
||||
name={IconName.Loading}
|
||||
color={color}
|
||||
size={Size.MD}
|
||||
size={IconSize.Md}
|
||||
{...iconLoadingProps}
|
||||
/>
|
||||
)}
|
||||
@ -160,26 +159,26 @@ ButtonBase.propTypes = {
|
||||
externalLink: PropTypes.bool,
|
||||
/**
|
||||
* Add icon to start (left side) of button text passing icon name
|
||||
* The name of the icon to display. Should be one of ICON_NAMES
|
||||
* The name of the icon to display. Should be one of IconName
|
||||
*/
|
||||
startIconName: PropTypes.oneOf(Object.values(ICON_NAMES)),
|
||||
startIconName: PropTypes.oneOf(Object.values(IconName)),
|
||||
/**
|
||||
* iconProps accepts all the props from Icon
|
||||
*/
|
||||
startIconProps: PropTypes.shape(Icon.PropTypes),
|
||||
startIconProps: PropTypes.object,
|
||||
/**
|
||||
* Add icon to end (right side) of button text passing icon name
|
||||
* The name of the icon to display. Should be one of ICON_NAMES
|
||||
* The name of the icon to display. Should be one of IconName
|
||||
*/
|
||||
endIconName: PropTypes.oneOf(Object.values(ICON_NAMES)),
|
||||
endIconName: PropTypes.oneOf(Object.values(IconName)),
|
||||
/**
|
||||
* iconProps accepts all the props from Icon
|
||||
*/
|
||||
endIconProps: PropTypes.shape(Icon.PropTypes),
|
||||
endIconProps: PropTypes.object,
|
||||
/**
|
||||
* iconLoadingProps accepts all the props from Icon
|
||||
*/
|
||||
iconLoadingProps: PropTypes.shape(Icon.PropTypes),
|
||||
iconLoadingProps: PropTypes.object,
|
||||
/**
|
||||
* Boolean to show loading spinner in button
|
||||
*/
|
||||
|
||||
@ -7,8 +7,8 @@ import {
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { TextDirection } from '..';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { TextDirection, IconName } from '..';
|
||||
|
||||
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
import { ButtonBase } from './button-base';
|
||||
import README from './README.mdx';
|
||||
@ -59,11 +59,11 @@ export default {
|
||||
},
|
||||
startIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
},
|
||||
endIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
},
|
||||
loading: {
|
||||
control: 'boolean',
|
||||
@ -177,13 +177,13 @@ Loading.args = {
|
||||
};
|
||||
|
||||
export const StartIconName = (args) => (
|
||||
<ButtonBase {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
|
||||
<ButtonBase {...args} startIconName={IconName.AddSquare}>
|
||||
Button
|
||||
</ButtonBase>
|
||||
);
|
||||
|
||||
export const EndIconName = (args) => (
|
||||
<ButtonBase {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
|
||||
<ButtonBase {...args} endIconName={IconName.Arrow2Right}>
|
||||
Button
|
||||
</ButtonBase>
|
||||
);
|
||||
@ -192,15 +192,15 @@ export const Rtl = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
<ButtonBase
|
||||
{...args}
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={ICON_NAMES.ARROW_2_RIGHT}
|
||||
startIconName={IconName.AddSquare}
|
||||
endIconName={IconName.Arrow2Right}
|
||||
>
|
||||
Button Demo
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
{...args}
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={ICON_NAMES.ARROW_2_RIGHT}
|
||||
startIconName={IconName.AddSquare}
|
||||
endIconName={IconName.Arrow2Right}
|
||||
textDirection={TextDirection.RightToLeft}
|
||||
>
|
||||
Button Demo
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
import { ButtonBase } from './button-base';
|
||||
|
||||
@ -125,9 +125,9 @@ describe('ButtonBase', () => {
|
||||
const { getByTestId } = render(
|
||||
<ButtonBase
|
||||
data-testid="icon"
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
startIconName={IconName.AddSquare}
|
||||
startIconProps={{ 'data-testid': 'start-button-icon' }}
|
||||
endIconName={ICON_NAMES.ADD_SQUARE}
|
||||
endIconName={IconName.AddSquare}
|
||||
endIconProps={{ 'data-testid': 'end-button-icon' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
@ -17,19 +17,19 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-u
|
||||
|
||||
### Icon Name<span style={{ color: 'red' }}>\*</span>
|
||||
|
||||
Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
|
||||
Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon.
|
||||
|
||||
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-buttonicon--icon-name" />
|
||||
<Story id="components-componentlibrary-buttonicon--icon-name-story" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon } from '../ui/component-library';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { IconName } from '../icon';
|
||||
|
||||
<ButtonIcon iconName={ICON_NAMES.CLOSE} ariaLabel="Close" />;
|
||||
<ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
|
||||
```
|
||||
|
||||
### Size
|
||||
@ -52,8 +52,8 @@ Possible sizes include:
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { ButtonIcon } from '../ui/component-library';
|
||||
|
||||
<ButtonIcon size={Size.SM} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
|
||||
<ButtonIcon size={Size.LG} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
|
||||
<ButtonIcon size={Size.SM} iconName={IconName.Close} ariaLabel="Close"/>
|
||||
<ButtonIcon size={Size.LG} iconName={IconName.Close} ariaLabel="Close"/>
|
||||
```
|
||||
|
||||
### Aria Label
|
||||
@ -65,12 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
|
||||
|
||||
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
```
|
||||
|
||||
### As
|
||||
@ -87,12 +87,12 @@ Button `as` options:
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
|
||||
|
||||
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
```
|
||||
|
||||
### Href
|
||||
@ -104,13 +104,13 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
|
||||
<ButtonIcon
|
||||
href="https://metamask.io/"
|
||||
target="_blank"
|
||||
iconName={ICON_NAMES.EXPORT}
|
||||
iconName={IconName.Export}
|
||||
color={Color.primaryDefault}
|
||||
ariaLabel="Visit MetaMask.io"
|
||||
/>;
|
||||
@ -125,11 +125,11 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.EXPORT}
|
||||
iconName={IconName.Export}
|
||||
color={Color.primaryDefault}
|
||||
ariaLabel="Visit MetaMask.io"
|
||||
/>;
|
||||
@ -146,5 +146,5 @@ Use the boolean `disabled` prop to disable button
|
||||
```jsx
|
||||
import { ButtonIcon } from '../ui/component-library';
|
||||
|
||||
<ButtonIcon iconName={ICON_NAMES.CLOSE} disabled ariaLabel="Close" />;
|
||||
<ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
|
||||
```
|
||||
|
||||
@ -13,7 +13,7 @@ import {
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { Icon, IconName } from '../icon';
|
||||
|
||||
import { BUTTON_ICON_SIZES } from './button-icon.constants';
|
||||
|
||||
@ -84,9 +84,9 @@ ButtonIcon.propTypes = {
|
||||
*/
|
||||
href: PropTypes.string,
|
||||
/**
|
||||
* The name of the icon to display. Should be one of ICON_NAMES
|
||||
* The name of the icon to display. Should be one of IconName
|
||||
*/
|
||||
iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
|
||||
iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
|
||||
/**
|
||||
* iconProps accepts all the props from Icon
|
||||
*/
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { BUTTON_ICON_SIZES } from './button-icon.constants';
|
||||
import { ButtonIcon } from './button-icon';
|
||||
import README from './README.mdx';
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
},
|
||||
iconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
@ -94,19 +94,21 @@ export default {
|
||||
export const DefaultStory = (args) => <ButtonIcon {...args} />;
|
||||
|
||||
DefaultStory.args = {
|
||||
iconName: ICON_NAMES.CLOSE,
|
||||
iconName: IconName.Close,
|
||||
ariaLabel: 'Close',
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const IconName = (args) => <ButtonIcon {...args} />;
|
||||
export const IconNameStory = (args) => <ButtonIcon {...args} />;
|
||||
|
||||
IconName.args = {
|
||||
iconName: ICON_NAMES.CLOSE,
|
||||
IconNameStory.args = {
|
||||
iconName: IconName.Close,
|
||||
ariaLabel: 'Close',
|
||||
};
|
||||
|
||||
IconNameStory.storyName = 'IconName';
|
||||
|
||||
export const SizeStory = (args) => (
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
@ -117,14 +119,14 @@ export const SizeStory = (args) => (
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
size={Size.SM}
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
/>
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
size={Size.LG}
|
||||
color={Color.primaryDefault}
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
/>
|
||||
</Box>
|
||||
@ -136,7 +138,7 @@ export const AriaLabel = (args) => (
|
||||
<>
|
||||
<ButtonIcon
|
||||
as="button"
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
{...args}
|
||||
/>
|
||||
@ -145,7 +147,7 @@ export const AriaLabel = (args) => (
|
||||
href="https://metamask.io/"
|
||||
target="_blank"
|
||||
color={Color.primaryDefault}
|
||||
iconName={ICON_NAMES.EXPORT}
|
||||
iconName={IconName.Export}
|
||||
ariaLabel="Visit MetaMask.io"
|
||||
{...args}
|
||||
/>
|
||||
@ -154,20 +156,20 @@ export const AriaLabel = (args) => (
|
||||
|
||||
export const As = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
|
||||
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
|
||||
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
|
||||
<ButtonIcon
|
||||
as="a"
|
||||
href="#"
|
||||
{...args}
|
||||
color={Color.primaryDefault}
|
||||
iconName={ICON_NAMES.EXPORT}
|
||||
iconName={IconName.Export}
|
||||
ariaLabel="demo"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Href = (args) => (
|
||||
<ButtonIcon iconName={ICON_NAMES.EXPORT} {...args} target="_blank" />
|
||||
<ButtonIcon iconName={IconName.Export} {...args} target="_blank" />
|
||||
);
|
||||
|
||||
Href.args = {
|
||||
@ -177,7 +179,7 @@ Href.args = {
|
||||
};
|
||||
|
||||
export const ColorStory = (args) => (
|
||||
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
|
||||
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
|
||||
);
|
||||
ColorStory.storyName = 'Color';
|
||||
|
||||
@ -186,7 +188,7 @@ ColorStory.args = {
|
||||
};
|
||||
|
||||
export const Disabled = (args) => (
|
||||
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
|
||||
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
|
||||
);
|
||||
|
||||
Disabled.args = {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { IconColor } from '../../../helpers/constants/design-system';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { BUTTON_ICON_SIZES } from './button-icon.constants';
|
||||
import { ButtonIcon } from './button-icon';
|
||||
|
||||
@ -11,7 +11,7 @@ describe('ButtonIcon', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<ButtonIcon
|
||||
data-testid="button-icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
@ -25,7 +25,7 @@ describe('ButtonIcon', () => {
|
||||
<ButtonIcon
|
||||
as="a"
|
||||
data-testid="button-icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
@ -39,7 +39,7 @@ describe('ButtonIcon', () => {
|
||||
<ButtonIcon
|
||||
href="/metamask"
|
||||
data-testid="button-icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
@ -51,13 +51,13 @@ describe('ButtonIcon', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
size={BUTTON_ICON_SIZES.SM}
|
||||
data-testid={BUTTON_ICON_SIZES.SM}
|
||||
/>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
size={BUTTON_ICON_SIZES.LG}
|
||||
data-testid={BUTTON_ICON_SIZES.LG}
|
||||
@ -76,13 +76,13 @@ describe('ButtonIcon', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
color={IconColor.iconDefault}
|
||||
data-testid={IconColor.iconDefault}
|
||||
/>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
color={IconColor.errorDefault}
|
||||
data-testid={IconColor.errorDefault}
|
||||
@ -102,7 +102,7 @@ describe('ButtonIcon', () => {
|
||||
<ButtonIcon
|
||||
data-testid="classname"
|
||||
className="mm-button-icon--test"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
@ -115,7 +115,7 @@ describe('ButtonIcon', () => {
|
||||
<ButtonIcon
|
||||
disabled
|
||||
data-testid="disabled"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
/>
|
||||
</>,
|
||||
@ -128,7 +128,7 @@ describe('ButtonIcon', () => {
|
||||
const { getByTestId } = render(
|
||||
<ButtonIcon
|
||||
data-testid="icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
iconName={IconName.AddSquare}
|
||||
ariaLabel="add"
|
||||
iconProps={{ 'data-testid': 'button-icon' }}
|
||||
/>,
|
||||
@ -139,7 +139,7 @@ describe('ButtonIcon', () => {
|
||||
|
||||
it('should render with aria-label', () => {
|
||||
const { getByLabelText } = render(
|
||||
<ButtonIcon iconName={ICON_NAMES.ADD_SQUARE} ariaLabel="add" />,
|
||||
<ButtonIcon iconName={IconName.AddSquare} ariaLabel="add" />,
|
||||
);
|
||||
|
||||
expect(getByLabelText('add')).toBeDefined();
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
TextColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { Text } from '../text';
|
||||
import { ButtonLink } from './button-link';
|
||||
import { BUTTON_LINK_SIZES } from './button-link.constants';
|
||||
@ -73,12 +73,12 @@ export default {
|
||||
},
|
||||
startIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
endIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
startIconProps: {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { ButtonLink } from './button-link';
|
||||
import { BUTTON_LINK_SIZES } from './button-link.constants';
|
||||
|
||||
@ -82,7 +82,7 @@ describe('ButtonLink', () => {
|
||||
});
|
||||
it('should render with icon', () => {
|
||||
const { container } = render(
|
||||
<ButtonLink data-testid="icon" startIconName={ICON_NAMES.ADD_SQUARE} />,
|
||||
<ButtonLink data-testid="icon" startIconName={IconName.AddSquare} />,
|
||||
);
|
||||
|
||||
const icons = container.getElementsByClassName('mm-icon').length;
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { ButtonPrimary } from './button-primary';
|
||||
|
||||
import README from './README.mdx';
|
||||
@ -63,12 +63,12 @@ export default {
|
||||
},
|
||||
startIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
endIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
startIconProps: {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { ButtonPrimary } from './button-primary';
|
||||
import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
|
||||
|
||||
@ -90,10 +90,7 @@ describe('ButtonPrimary', () => {
|
||||
});
|
||||
it('should render with icon', () => {
|
||||
const { container } = render(
|
||||
<ButtonPrimary
|
||||
data-testid="icon"
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
/>,
|
||||
<ButtonPrimary data-testid="icon" startIconName={IconName.AddSquare} />,
|
||||
);
|
||||
|
||||
const icons = container.getElementsByClassName('mm-icon').length;
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { ButtonSecondary } from './button-secondary';
|
||||
import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
|
||||
import README from './README.mdx';
|
||||
@ -62,12 +62,12 @@ export default {
|
||||
},
|
||||
startIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
endIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
startIconProps: {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { ButtonSecondary } from './button-secondary';
|
||||
import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
|
||||
|
||||
@ -94,10 +94,7 @@ describe('ButtonSecondary', () => {
|
||||
});
|
||||
it('should render with icon', () => {
|
||||
const { container } = render(
|
||||
<ButtonSecondary
|
||||
data-testid="icon"
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
/>,
|
||||
<ButtonSecondary data-testid="icon" startIconName={IconName.AddSquare} />,
|
||||
);
|
||||
|
||||
const icons = container.getElementsByClassName('mm-icon').length;
|
||||
|
||||
@ -175,7 +175,7 @@ import { Button } from '../ui/component-library';
|
||||
|
||||
### Icon Name
|
||||
|
||||
Use the `startIconName` and/or `endIconName` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
|
||||
Use the `startIconName` and/or `endIconName` prop and the `IconName` enum from `./ui/components/component-library/icon` to select icon.
|
||||
|
||||
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
|
||||
|
||||
@ -185,9 +185,9 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { IconName } from '../icon';
|
||||
|
||||
<Button startIconName={ICON_NAMES.ADD_SQUARE}>Button</Button>;
|
||||
<Button startIconName={IconName.AddSquare}>Button</Button>;
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
@ -196,7 +196,7 @@ import { ICON_NAMES } from '../icon';
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { IconName } from '../icon';
|
||||
|
||||
<Button endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</Button>;
|
||||
<Button endIconName={IconName.Arrow2Right}>Button</Button>;
|
||||
```
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
Size,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
|
||||
import Box from '../../ui/box/box';
|
||||
import { Text } from '../text';
|
||||
@ -66,11 +66,11 @@ export default {
|
||||
},
|
||||
startIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
},
|
||||
endIconName: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
options: Object.values(IconName),
|
||||
},
|
||||
startIconProps: {
|
||||
control: 'object',
|
||||
@ -214,13 +214,13 @@ Loading.args = {
|
||||
};
|
||||
|
||||
export const StartIconName = (args) => (
|
||||
<Button {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
|
||||
<Button {...args} startIconName={IconName.AddSquare}>
|
||||
Button
|
||||
</Button>
|
||||
);
|
||||
|
||||
export const EndIconName = (args) => (
|
||||
<Button {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
|
||||
<Button {...args} endIconName={IconName.Arrow2Right}>
|
||||
Button
|
||||
</Button>
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { ICON_NAMES } from '../icon/deprecated';
|
||||
import { IconName } from '..';
|
||||
import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
|
||||
import { Button } from './button';
|
||||
|
||||
@ -134,7 +134,7 @@ describe('Button', () => {
|
||||
const { getByTestId } = render(
|
||||
<Button
|
||||
data-testid="icon"
|
||||
startIconName={ICON_NAMES.ADD_SQUARE}
|
||||
startIconName={IconName.AddSquare}
|
||||
startIconProps={{ 'data-testid': 'start-button-icon' }}
|
||||
>
|
||||
Button
|
||||
|
||||
@ -99,7 +99,7 @@ import {
|
||||
ButtonPrimary,
|
||||
ButtonSecondary,
|
||||
FormTextField,
|
||||
ICON_NAMES,
|
||||
IconName,
|
||||
Text,
|
||||
} from '../../component-library';
|
||||
|
||||
@ -229,7 +229,7 @@ return (
|
||||
<ButtonPrimary type="submit">Submit</ButtonPrimary>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger>
|
||||
<ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
|
||||
Clear form
|
||||
</ButtonSecondary>
|
||||
{submitted === FORM_STATE.SUCCESS && (
|
||||
@ -264,7 +264,7 @@ import {
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated'
|
||||
import { Icon, IconName } from '..'
|
||||
import {
|
||||
ButtonLink,
|
||||
FormTextField,
|
||||
@ -293,8 +293,8 @@ import {
|
||||
Custom spending cap
|
||||
</Label>
|
||||
<Icon
|
||||
name={ICON_NAMES.INFO}
|
||||
size={Size.SM}
|
||||
name={IconName.Info}
|
||||
size={IconSize.Sm}
|
||||
marginLeft={1}
|
||||
color={IconColor.iconAlternative}
|
||||
/>
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
|
||||
import {
|
||||
Size,
|
||||
DISPLAY,
|
||||
AlignItems,
|
||||
TextVariant,
|
||||
@ -12,7 +11,6 @@ import {
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import {
|
||||
ButtonLink,
|
||||
ButtonPrimary,
|
||||
@ -22,6 +20,9 @@ import {
|
||||
Text,
|
||||
TEXT_FIELD_SIZES,
|
||||
TEXT_FIELD_TYPES,
|
||||
Icon,
|
||||
IconName,
|
||||
IconSize,
|
||||
} from '..';
|
||||
|
||||
import { FormTextField } from './form-text-field';
|
||||
@ -372,7 +373,7 @@ export const FormExample = () => {
|
||||
<ButtonPrimary type="submit">Submit</ButtonPrimary>
|
||||
</Box>
|
||||
</Box>
|
||||
<ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger>
|
||||
<ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
|
||||
Clear form
|
||||
</ButtonSecondary>
|
||||
{submitted === FORM_STATE.SUCCESS && (
|
||||
@ -405,8 +406,8 @@ export const CustomLabelOrHelpText = () => (
|
||||
import the Label component separately */}
|
||||
<Label htmlFor="custom-spending-cap">Custom spending cap</Label>
|
||||
<Icon
|
||||
name={ICON_NAMES.INFO}
|
||||
size={Size.SM}
|
||||
name={IconName.Info}
|
||||
size={IconSize.Sm}
|
||||
marginLeft={1}
|
||||
color={IconColor.iconAlternative}
|
||||
/>
|
||||
|
||||
@ -28,8 +28,7 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-
|
||||
|
||||
```jsx
|
||||
import { Size, IconColor } from '../../../helpers/constants/design-system';
|
||||
import { Icon, ICON_NAMES } from '../../icon/deprecated';
|
||||
import { HelpText } from '../../component-library';
|
||||
import { HelpText, Icon, IconName, IconSize } from '../../component-library';
|
||||
|
||||
<HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
|
||||
<HelpText>
|
||||
@ -37,8 +36,8 @@ import { HelpText } from '../../component-library';
|
||||
<Icon
|
||||
marginLeft={1}
|
||||
color={IconColor.iconAlternative}
|
||||
name={ICON_NAMES.WARNING}
|
||||
size={Size.inherit}
|
||||
name={IconName.Warning}
|
||||
size={IconSize.Inherit}
|
||||
/>
|
||||
</HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div>
|
||||
```
|
||||
|
||||
@ -4,13 +4,12 @@ import {
|
||||
FLEX_DIRECTION,
|
||||
IconColor,
|
||||
TextColor,
|
||||
Size,
|
||||
SEVERITIES,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { Icon, IconName, IconSize } from '..';
|
||||
|
||||
import { HelpText } from './help-text';
|
||||
|
||||
@ -59,8 +58,8 @@ export const Children = (args) => (
|
||||
<Icon
|
||||
marginLeft={1}
|
||||
color={IconColor.iconAlternative}
|
||||
name={ICON_NAMES.WARNING}
|
||||
size={Size.inherit}
|
||||
name={IconName.Warning}
|
||||
size={IconSize.Inherit}
|
||||
as="span"
|
||||
/>
|
||||
</HelpText>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { Icon, IconName } from '..';
|
||||
|
||||
import { HelpText } from './help-text';
|
||||
|
||||
@ -25,8 +25,7 @@ describe('HelpText', () => {
|
||||
it('should render with react nodes inside the HelpText', () => {
|
||||
const { getByText, getByTestId } = render(
|
||||
<HelpText>
|
||||
help text{' '}
|
||||
<Icon name={ICON_NAMES.WARNING} data-testid="icon" as="span" />
|
||||
help text <Icon name={IconName.Warning} data-testid="icon" as="span" />
|
||||
</HelpText>,
|
||||
);
|
||||
expect(getByText('help text')).toBeDefined();
|
||||
@ -67,7 +66,7 @@ describe('HelpText', () => {
|
||||
<>
|
||||
<HelpText>help text as p</HelpText>
|
||||
<HelpText data-testid="help-text-div">
|
||||
<span>help text as div</span> <Icon name={ICON_NAMES.WARNING} />
|
||||
<span>help text as div</span> <Icon name={IconName.Warning} />
|
||||
</HelpText>
|
||||
</>,
|
||||
);
|
||||
|
||||
@ -26,6 +26,7 @@ export enum IconName {
|
||||
Arrow2Left = 'arrow-2-left',
|
||||
Arrow2Right = 'arrow-2-right',
|
||||
Arrow2Up = 'arrow-2-up',
|
||||
Arrow2UpRight = 'arrow-2-up-right',
|
||||
ArrowDoubleLeft = 'arrow-double-left',
|
||||
ArrowDoubleRight = 'arrow-double-right',
|
||||
ArrowDown = 'arrow-down',
|
||||
|
||||
@ -32,16 +32,15 @@ The `children` of the label can be text or a react node
|
||||
|
||||
```jsx
|
||||
import { DISPLAY, AlignItems, FLEX_DIRECTION, Size, IconColor } from '../../../helpers/constants/design-system';
|
||||
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
|
||||
import { Label, TextField } from '../../component-library';
|
||||
import { Label, TextField, Icon, IconName, IconSize } from '../../component-library';
|
||||
|
||||
<Label>Plain text</Label>
|
||||
<Label display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
|
||||
Text and icon
|
||||
<Icon
|
||||
color={IconColor.iconAlternative}
|
||||
name={ICON_NAMES.INFO}
|
||||
size={Size.inherit}
|
||||
name={IconName.Info}
|
||||
size={IconSize.Inherit}
|
||||
/>
|
||||
</Label>
|
||||
<Label
|
||||
|
||||
@ -2,15 +2,13 @@ import React, { useState } from 'react';
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
Size,
|
||||
AlignItems,
|
||||
IconColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
|
||||
import { Icon, ICON_NAMES } from '../icon/deprecated';
|
||||
import { TextField } from '..';
|
||||
import { TextField, Icon, IconName, IconSize } from '..';
|
||||
|
||||
import { Label } from './label';
|
||||
|
||||
@ -57,8 +55,8 @@ export const Children = (args) => (
|
||||
Text and icon
|
||||
<Icon
|
||||
color={IconColor.iconAlternative}
|
||||
name={ICON_NAMES.INFO}
|
||||
size={Size.inherit}
|
||||
name={IconName.Info}
|
||||
size={IconSize.Inherit}
|
||||
/>
|
||||
</Label>
|
||||
<Label
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user