diff --git a/eoa/server.R b/eoa/server.R index b353af2..43d06cc 100644 --- a/eoa/server.R +++ b/eoa/server.R @@ -8,7 +8,11 @@ shinyServer(function(input, output, session) { onclick(id = "go-button", expr = { if(nchar(input$address) != 42 | !grepl("^0x", input$address)){ - showNotification("Addresses must be 42 chars long and start with 0x") + #showNotification("Addresses must be 42 chars long and start with 0x. Like this: 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045") + showModal(modalDialog( + title = "on no! error!", + HTML("Addresses must be 42 chars long and start with 0x
Like this: 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045") + )) warning("Double check address is a valid ETH address (not ENS)") } else { diff --git a/eoa/ui.R b/eoa/ui.R index 9eb3160..17c098f 100644 --- a/eoa/ui.R +++ b/eoa/ui.R @@ -3,9 +3,8 @@ library(shinyscreenshot) source("global.R") # Define UI ------- - shinyUI(fluidPage( - title = 'Ethereum Activity', + title = 'Eth Timecard', useShinyjs(), tags$head( @@ -24,16 +23,14 @@ shinyUI(fluidPage( header(class='top-banner', section( a(class='fs-logo', href='https://www.flipsidecrypto.com', - 'Powered by Flipside Crypto', onclick = 'rudderstack.track("ntr-click-flipside-icon")'), + 'Flipside Crypto', onclick = 'rudderstack.track("ntr-click-flipside-icon")'), section(class='socials', a(class='twitter', href='https://twitter.com/flipsidecrypto', 'Twitter', onclick = 'rudderstack.track("ntr-click-twitter-icon")'), - a(class='linkedin', href='https://www.linkedin.com/company/flipside-crypto', - 'LinkedIn', onclick = 'rudderstack.track("ntr-click-linkedin-icon")'), a(class='discord', href='https://flipsidecrypto.com/discord', 'Discord', onclick = 'rudderstack.track("ntr-click-discord-icon")'), a(href='https://app.flipsidecrypto.com/auth/signup/', # redirects to xyz signup - 'Sign Up', onclick = 'rudderstack.track("ntr-click-signup-icon")') + 'Join Us', onclick = 'rudderstack.track("ntr-click-signup-icon")') ) ) ) @@ -41,12 +38,14 @@ shinyUI(fluidPage( div(class = "timecard-holder", id = 'tch', fluidRow(class='solid', - div(class='title', 'Ethereum Activity'), - div(class = "subtitle", 'Your Onchain Timecard'), + column(1, ""), + column(10, div(class='title', 'Ethereum Activity'), + div(class = "subtitle", 'Your Onchain Timecard')), + column(1, screenshotButton(label = NULL, selector = '#smallshot', filename = 'mytimecard', scale = 3)) ), br(), fluidRow(class = "address-row", - column(9, class = 'light-left', + column(9, class = 'light', style = "border-width: 1px 1px 1px 0;", div(style = "height: 60px", # sorry for the inline styling, it's just easier this way :crying: "Address", textInput(inputId = "address", @@ -54,48 +53,54 @@ shinyUI(fluidPage( placeholder = "enter a full address (non-ens)", width = '400px')) ), - column(3, class = 'light-right', id = "go-button", - div(style = "height: 60px; width: 100%", - "Fill Out", - div(id = "click", HTML("PUNCH"))) + column(3, class = 'light', id = "go-button", + style = "border-width: 1px 0 1px 0;", + div(style = "height: 49px; width: 100%", + div(id = "click", "FILL OUT")) ) # close column 3 ), # close row - - fluidRow( - column(4, class = 'light-left', - div(style = "height: 60px; width: 100%", - "# Txn.", div(class = "show-result", textOutput("ntxn")))), - column(4, class = 'light-left', - div(style = "height: 60px; width: 100%", - "Days Active", div(class = "show-result", textOutput("days")))), - column(4, class = 'light-left', - div(style = "height: 60px; width: 100%", - "Fees Ξ", div(class = "show-result", textOutput("fees")))) - ), - - fluidRow( - column(12,class = "light-left", - div(style = "width: 100%", - div("Daily Punchcard"), br(), - plotlyOutput('heatmap', width = "100%", height = "300px") - ), br(), - ) - ), + div(id = "smallshot", style = "background-color: #CECBF5;", + fluidRow( + column(4, class = 'light', + style = "border-width: 0 1px 1px 0;", + div(style = "height: 60px; width: 100%", + "# Txn.", div(class = "show-result", textOutput("ntxn")))), + column(4, class = 'light', + style = "border-width: 0 1px 1px 0;", + div(style = "height: 60px; width: 100%", + "Days Active", div(class = "show-result", textOutput("days")))), + column(4, class = 'light', + style = "border-width: 0 0 1px 0;", + div(style = "height: 60px; width: 100%", + "Fees Ξ", div(class = "show-result", textOutput("fees")))) + ), + + fluidRow( + column(12,class = "light", + style = "border-width: 0 0 1px 0;", + div(style = "width: 100%", + div("Daily Punchcard"), br(), + plotlyOutput('heatmap', width = "100%", height = "300px") + ), br(), + ) + )), fluidRow(class='solid', div(class = "subtitle", 'You vs. Everyone Else'), ), fluidRow( - column(6, class = 'light-left', - div(style = "height: 60px; width: 100%", + column(6, class = 'light', style = "border-width: 0 1px 1px 0;", + div(style = "height: 60px;", "Favorite Day", div(class = "show-result", textOutput("favorite_days")))), - column(6, class = 'light-left', + column(6, class = 'light', + style = "border-width: 0 0 1px 0;", div(style = "height: 60px; width: 100%", - "More Active than", div(class = "show-result", textOutput("percentile")))) + "More Active Than", div(class = "show-result", textOutput("percentile")))) ), fluidRow( - column(12,class = "light-left", + column(12, class = "light", + style = "border-width: 0;", div(style = "width: 100%", div("Active Days"), plotlyOutput('main_plot', width = "100%", height = "300px") @@ -108,33 +113,33 @@ shinyUI(fluidPage( div(class = "subtitle", 'About this Timecard'), ), fluidRow( - column(6, class = 'light-left foot', + column(6, class = 'light foot', style = "border-width: 0 1px 1px 0;", div(style = "height: 60px; width: 100%", HTML( paste0( "Built w/ ❤️ by the team at Flipside Crypto. Powered by ", - "ShroomDK" + "ShroomDK" )) - )), - column(6, class = 'light-right foot', + )), + column(6, class = 'light foot', style = "border-width: 0 0 1px 0;", div(style = "height: 60px; width: 100%", p("Part 1 of our mission to clock you onchain. What do you want to know about yourself?"), - )) + )) ), fluidRow( - column(12, class = 'light-left foot', + column(12, class = 'light foot', style = "border-width: 0 0 1px 0;", div(style = "height: 60px; width: 100%, text-align: center", HTML( paste0("Join us in ", - "Discord", - br(),"Code is open source on ", - "Github") + "Discord", + br(),"Get the code on ", + "Github") ) )) ), fluidRow( div(class = 'about', - screenshotButton(label = "Print your card!", selector = '#tch', filename = 'mytimecard') + screenshotButton(label = "Print Your Card", selector = '#tch', filename = 'mytimecard') ) ) diff --git a/eoa/www/styles.css b/eoa/www/styles.css index 879949b..a588bf2 100644 --- a/eoa/www/styles.css +++ b/eoa/www/styles.css @@ -10,24 +10,20 @@ background-color: #CECBF5; margin-top: 30px; width: 100%; -} -.solid { - background-color: #423E75; - color: #CECBF5; -} - -.light-left { - color: #423E75; border-style: solid; border-color: #423E75; border-width: 1px 1px 1px 1px; } -.light-right { +.solid { + background-color: #423E75; + color: #CECBF5; +} + +.light { color: #423E75; border-style: solid; border-color: #423E75; - border-width: 1px 1px 1px 0; } .title { @@ -44,15 +40,56 @@ #address::placeholder { color: #62616D; + text-decoration: underline; } #go-button { cursor: pointer; + padding-top: 11px; } #click { text-align: center; - padding-top: 4px; + border-style: solid; + border-color: #514D83; + background-color: #514D83; + color: #CECBF5; + border-width: 1px; + border-radius: 2px; + padding: 8px; } +.btn, .btn:active, .btn:focus { + text-align: center; + border-style: solid; + border-color: #423E75; + background-color: #423E75; + color: #CECBF5; + border-width: 1px; + border-radius: 2px; + padding: 8px; +} + + +#click:hover { + text-align: center; + border-style: solid; + border-color: #423E75; + color: #423E75; + background-color: #BEBBE6; + border-width: 1px; + border-radius: 2px; + padding: 8px; +} + +.btn:hover { + text-align: center; + border-style: solid; + border-color: #423E75; + color: #423E75; + background-color: #BEBBE6; + border-width: 1px; + border-radius: 2px; + padding: 8px; +} .show-result { text-align: center; @@ -66,7 +103,7 @@ } .about { - margin: auto; + margin: 10px auto 10px auto; width: 300px; text-align: center; } @@ -112,7 +149,12 @@ body { a { background: transparent; - color: #FFFFFF; + color: #706D9F; + text-decoration: underline; +} +a:hover { + color: #423E75; + text-decoration: underline; } hr { @@ -138,13 +180,14 @@ hr { .form-control { - background: transparent; + background: transparent !important; border: 0; box-shadow: inset 0 0 0 rgb(0 0 0 / 0%); color: black; } .form-group { + background: transparent !important; margin: 0; } input::-webkit-box-shadow { @@ -228,10 +271,13 @@ input[type=number] { justify-content: space-between; margin: 0 auto; padding: 0 15px; - max-width: 1000px; + max-width: 900px; } .top-banner a { background-color: transparent; + text-decoration: none; + color: #FFF; + font-family: Inter; } .top-banner a:hover, .top-banner a:active { color: #FFF; @@ -252,6 +298,8 @@ input[type=number] { text-indent: -9999px; white-space: nowrap; width: 24px; + text-decoration: none; + color: #FFF; } .socials a:last-child { margin-right: 0;