diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..30353f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +.idea +dist/ \ No newline at end of file diff --git a/README.md b/README.md index f4acce4..43a4963 100644 --- a/README.md +++ b/README.md @@ -1 +1,9 @@ -# multisig \ No newline at end of file +# TON Multisig UI + +``` +npm run serve +``` + +``` +npm run build +``` \ No newline at end of file diff --git a/assets/close.png b/assets/close.png new file mode 100644 index 0000000..65c586a Binary files /dev/null and b/assets/close.png differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..1d044a4 Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..89ac696 --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,4 @@ + diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..2548d70 --- /dev/null +++ b/css/main.css @@ -0,0 +1,336 @@ +html, body { + font-family: Helvetica, Arial, SansSerif; + height: 100%; + margin: 0; + padding: 0; + line-height: 200%; +} + +* { + box-sizing: border-box; +} + +a, a:active, a:focus, a:hover { + color: #0088cc; + text-decoration: none; +} + +input, select { + font-family: Helvetica, Arial, SansSerif; + text-align: left; + font-size: 14px; + color: black; + border: 1px solid #C0D1D9; + border-radius: 2px; + padding: 10px; + + margin-bottom: 20px; +} + +select { + -moz-appearance:none; /* Firefox */ + -webkit-appearance:none; /* Safari and Chrome */ + appearance:none; +} + +input::-webkit-date-and-time-value { + text-align: left; +} + +select::-webkit-date-and-time-value { + text-align: left; +} + +button, .btn { + border: none; + background: none; + /*background-color: #0088cc;*/ + font-size: 16px; + color: #0088cc; + border-radius: 40px; + padding: 12px 24px; + line-height: 24px; + font-weight: 600; + cursor: pointer; + flex-shrink: 0; +} + + +.btn-primary { + border: none; + background: none; + background-color: #0088cc; + font-size: 16px; + color: white; + border-radius: 40px; + padding: 12px 24px; + line-height: 24px; + font-weight: 600; + cursor: pointer; + flex-shrink: 0; +} + +button:disabled, .btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.screen { + display: flex; + flex-direction: column; + padding-left: 10px; + padding-right: 10px; +} + + +.testnet-badge { + position: absolute; + left: 0; + top: 0; + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + color: #fff; + background: red; + text-align: center; + font-size: 14px; + font-weight: bold; +} + +.testnet-padding { + padding-top: 60px; +} + +/**/ + +.label { + font-weight: bold; + flex-shrink: 0; +} + +#multisig_logoutButton { + padding-left: 0; + margin-bottom: 30px; +} + +#multisig_createNewOrderButton { + margin-top: 30px; + margin-bottom: 10px; +} + +#order_actions { + margin-bottom: 30px; +} + +#order_approveButton { + padding-left: 0; + margin-bottom: 10px; +} + +/* HEADER */ + +#header { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + max-width: 1120px; + min-height: 68px; + padding: 16px; + margin: 0 auto; + justify-content: flex-start; +} + +#header_logo { + width: 32px; + height: 32px; + background-image: url(../assets/logo.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + margin-right: 8px; + flex-shrink: 0; +} + +#header_title { + flex-shrink: 0; + font-size: 20px; + font-weight: bold; + line-height: 16px; + cursor: pointer; + color: #04060B; +} + +#header_grow { + flex-grow: 1; +} + +#tonConnectButton { + flex-shrink: 0; +} + +/* START SCREEN */ + +#startScreen button { + margin-top: 20px; + margin-bottom: 20px; +} + +/* MAIN SCREEN */ + +#startScreen, #importScreen { + align-items: center; + justify-content: center; + height: 80%; +} + +#import_input { + width: 60%; +} + +#multisigScreen, #newOrderScreen, #orderScreen, #newMultisigScreen1, #newMultisigScreen2 { + align-items: center; +} + +.panel { + display: flex; + flex-direction: column; + margin-top: 80px; + width: 100%; + max-width: 600px; +} + +#newOrderScreen input { + width: 100%; +} + +/* MULTISIG SCREEN */ + +#multisigScreen { +} + +#multisig_content { + flex-direction: column; +} + +#mainScreen_ordersList { + display: flex; + flex-direction: column; + margin-bottom: 10px; +} + +#mainScreen_ordersList div { + color: #0088cc; + padding-top: 8px; + padding-bottom: 8px; + border-bottom: 1px solid #ebebeb; +} + +#multisig_error { + color: #ec6471; +} + +.multisig_lastOrder { + cursor: pointer; +} + +/* ORDER SCREEN */ + +#orderScreen { +} + +#order_content { + flex-direction: column; +} + +#order_backButton { + padding-left: 0; + margin-bottom: 30px; +} + +#order_error { + color: #ec6471; +} + + +#order_actionsTitle { + margin-top: 30px; +} + +#order_approveNote { + color: #696969; + text-align: center; +} + +/* loading */ + +#loadingScreen { + align-items: center; + justify-content: center; + padding: 20px; + height: 80%; +} + +@-webkit-keyframes rotating /* Safari and Chrome */ +{ + from { + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes rotating { + from { + -ms-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.loading { + margin-top: 20px; + width: 48px; + height: 48px; + border-radius: 50%; + border: 5px solid #1d98dc; + border-left: 5px solid transparent; + + -webkit-animation: rotating 1s linear infinite; + -moz-animation: rotating 1s linear infinite; + -ms-animation: rotating 1s linear infinite; + -o-animation: rotating 1s linear infinite; + animation: rotating 1s linear infinite; +} + +/* NEW MULTISIG */ + +.address-input { + display: flex; + flex-direction: row; + align-items: baseline; + width: 100%; +} + +.address-input-num { + flex-shrink: 0; + margin-right: 8px; +} + +.address-input input { + flex-grow: 1; +} \ No newline at end of file diff --git a/docs/assets/close.png b/docs/assets/close.png new file mode 100644 index 0000000..65c586a Binary files /dev/null and b/docs/assets/close.png differ diff --git a/docs/assets/logo.png b/docs/assets/logo.png new file mode 100644 index 0000000..1d044a4 Binary files /dev/null and b/docs/assets/logo.png differ diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg new file mode 100644 index 0000000..89ac696 --- /dev/null +++ b/docs/assets/logo.svg @@ -0,0 +1,4 @@ + diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 0000000..2548d70 --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1,336 @@ +html, body { + font-family: Helvetica, Arial, SansSerif; + height: 100%; + margin: 0; + padding: 0; + line-height: 200%; +} + +* { + box-sizing: border-box; +} + +a, a:active, a:focus, a:hover { + color: #0088cc; + text-decoration: none; +} + +input, select { + font-family: Helvetica, Arial, SansSerif; + text-align: left; + font-size: 14px; + color: black; + border: 1px solid #C0D1D9; + border-radius: 2px; + padding: 10px; + + margin-bottom: 20px; +} + +select { + -moz-appearance:none; /* Firefox */ + -webkit-appearance:none; /* Safari and Chrome */ + appearance:none; +} + +input::-webkit-date-and-time-value { + text-align: left; +} + +select::-webkit-date-and-time-value { + text-align: left; +} + +button, .btn { + border: none; + background: none; + /*background-color: #0088cc;*/ + font-size: 16px; + color: #0088cc; + border-radius: 40px; + padding: 12px 24px; + line-height: 24px; + font-weight: 600; + cursor: pointer; + flex-shrink: 0; +} + + +.btn-primary { + border: none; + background: none; + background-color: #0088cc; + font-size: 16px; + color: white; + border-radius: 40px; + padding: 12px 24px; + line-height: 24px; + font-weight: 600; + cursor: pointer; + flex-shrink: 0; +} + +button:disabled, .btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.screen { + display: flex; + flex-direction: column; + padding-left: 10px; + padding-right: 10px; +} + + +.testnet-badge { + position: absolute; + left: 0; + top: 0; + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + color: #fff; + background: red; + text-align: center; + font-size: 14px; + font-weight: bold; +} + +.testnet-padding { + padding-top: 60px; +} + +/**/ + +.label { + font-weight: bold; + flex-shrink: 0; +} + +#multisig_logoutButton { + padding-left: 0; + margin-bottom: 30px; +} + +#multisig_createNewOrderButton { + margin-top: 30px; + margin-bottom: 10px; +} + +#order_actions { + margin-bottom: 30px; +} + +#order_approveButton { + padding-left: 0; + margin-bottom: 10px; +} + +/* HEADER */ + +#header { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + max-width: 1120px; + min-height: 68px; + padding: 16px; + margin: 0 auto; + justify-content: flex-start; +} + +#header_logo { + width: 32px; + height: 32px; + background-image: url(../assets/logo.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + margin-right: 8px; + flex-shrink: 0; +} + +#header_title { + flex-shrink: 0; + font-size: 20px; + font-weight: bold; + line-height: 16px; + cursor: pointer; + color: #04060B; +} + +#header_grow { + flex-grow: 1; +} + +#tonConnectButton { + flex-shrink: 0; +} + +/* START SCREEN */ + +#startScreen button { + margin-top: 20px; + margin-bottom: 20px; +} + +/* MAIN SCREEN */ + +#startScreen, #importScreen { + align-items: center; + justify-content: center; + height: 80%; +} + +#import_input { + width: 60%; +} + +#multisigScreen, #newOrderScreen, #orderScreen, #newMultisigScreen1, #newMultisigScreen2 { + align-items: center; +} + +.panel { + display: flex; + flex-direction: column; + margin-top: 80px; + width: 100%; + max-width: 600px; +} + +#newOrderScreen input { + width: 100%; +} + +/* MULTISIG SCREEN */ + +#multisigScreen { +} + +#multisig_content { + flex-direction: column; +} + +#mainScreen_ordersList { + display: flex; + flex-direction: column; + margin-bottom: 10px; +} + +#mainScreen_ordersList div { + color: #0088cc; + padding-top: 8px; + padding-bottom: 8px; + border-bottom: 1px solid #ebebeb; +} + +#multisig_error { + color: #ec6471; +} + +.multisig_lastOrder { + cursor: pointer; +} + +/* ORDER SCREEN */ + +#orderScreen { +} + +#order_content { + flex-direction: column; +} + +#order_backButton { + padding-left: 0; + margin-bottom: 30px; +} + +#order_error { + color: #ec6471; +} + + +#order_actionsTitle { + margin-top: 30px; +} + +#order_approveNote { + color: #696969; + text-align: center; +} + +/* loading */ + +#loadingScreen { + align-items: center; + justify-content: center; + padding: 20px; + height: 80%; +} + +@-webkit-keyframes rotating /* Safari and Chrome */ +{ + from { + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes rotating { + from { + -ms-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.loading { + margin-top: 20px; + width: 48px; + height: 48px; + border-radius: 50%; + border: 5px solid #1d98dc; + border-left: 5px solid transparent; + + -webkit-animation: rotating 1s linear infinite; + -moz-animation: rotating 1s linear infinite; + -ms-animation: rotating 1s linear infinite; + -o-animation: rotating 1s linear infinite; + animation: rotating 1s linear infinite; +} + +/* NEW MULTISIG */ + +.address-input { + display: flex; + flex-direction: row; + align-items: baseline; + width: 100%; +} + +.address-input-num { + flex-shrink: 0; + margin-right: 8px; +} + +.address-input input { + flex-grow: 1; +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..9f707f0 --- /dev/null +++ b/docs/index.html @@ -0,0 +1 @@ +