feat: confirm phone code with auto focus

ui/summit-2023/package.json

@@ -15,10 +15,13 @@
     "@textea/json-viewer": "^3.0.0",
     "@types/uuid": "^9.0.2",
     "history": "^5.3.0",
+    "i18next": "^22.4.14",
     "json-canonicalize": "^1.0.6",
     "moment": "^2.29.4",
+    "mui-tel-input": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
     "react-redux": "^8.0.7",
     "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
@@ -32,9 +35,7 @@
     "swiper": "^9.3.1",
     "typescript": "^4.9.5",
     "uuid": "^9.0.0",
-    "web-vitals": "^2.1.4",
-    "i18next": "^22.4.14",
-    "react-i18next": "^12.2.0"
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

ui/summit-2023/src/components/VerifyWallet/VerifyWallet.scss

@@ -0,0 +1,106 @@
+@import './src/common/styles/colors';
+
+.description {
+  color: var(--color-medium-grey);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.optionItem {
+  border-radius: 8px;
+  border: 1px solid var(--color-light-blue);
+  background: var(--color-ultra-light-grey);
+  margin-top: 12px;
+  padding: 16px !important;
+  cursor: pointer;
+}
+
+.optionLabel {
+  color: var(--color-medium-grey);
+  font-size: 16px !important;
+  font-style: normal;
+  font-weight: 600 !important;
+  line-height: 22px;
+}
+
+.MuiListItemAvatar-root {
+  min-width: 24px !important;
+  margin-right: 13px;
+}
+
+.option-icon {
+  color: var(--color-ultra-dark-blue) !important;
+}
+
+.phone-number-input.MuiTelInput-TextField {
+  width: 100% !important;
+}
+
+.verify-number-button-cancel.MuiButtonBase-root {
+  display: flex;
+  width: 162px;
+  padding: 16px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  background-color: transparent !important;
+  border: 1px solid var(--color-light-blue);
+  color: var(--color-medium-grey);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: none;
+}
+
+.verify-number-button-continue.MuiButtonBase-root {
+  display: flex;
+  width: 162px;
+  padding: 16px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  background: var(--color-light-grey);
+  color: var(--color-light) !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: none;
+}
+
+.verify-number-button-valid.MuiButtonBase-root {
+  background: var(--color-light-green) !important;
+  color: var(--color-ultra-dark-blue) !important;
+}
+
+.confirm-phone-code-input {
+  width: 53px;
+  height: 58px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid var(--color-light-grey);
+  background: var(--color-ultra-light-grey);
+  text-align: center;
+  outline: none;
+  color: var(--color-medium-grey);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 22px; /* 122.222% */
+}
+
+.didnt-receive-label{
+  color: var(--color-dark-blue);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600 !important;
+  line-height: 22px; /* 137.5% */
+  text-decoration-line: underline;
+  margin-top: 28px;
+}