diff --git a/apps/solana/solarscored/global.R b/apps/solana/solarscored/global.R index 02ca85b..50c25c9 100644 --- a/apps/solana/solarscored/global.R +++ b/apps/solana/solarscored/global.R @@ -19,13 +19,13 @@ svgdata <- readLines("wheel.svg") user <- Sys.info()[['user']] isRstudio <- user == 'rstudio-connect' -baseDir <- ifelse(isRstudio, '/rstudio-data/solarscored_data.RData', './') -file.location <- paste0(baseDir, 'solarscored_data.RData') +file.location <- ifelse( + isRstudio + , '/rstudio-data/solarscored_data.RData' + , '~/user_metrics/apps/solana/solarscored/solarscored_data.RData' +) + load(file.location) -# print(exists("score.criteria")) -score_criteria <- read.csv( - paste0(baseDir, 'score_criteria.csv') - ) %>% as.data.table() bar.plot.colors <- c("#14F195", "#B2FBDC") diff --git a/apps/solana/solarscored/server.R b/apps/solana/solarscored/server.R index 1ca1639..a9b4e83 100644 --- a/apps/solana/solarscored/server.R +++ b/apps/solana/solarscored/server.R @@ -4,10 +4,10 @@ function(input, output, session) { #observeEvent("sol_address") - # output$useraddy <- renderUI({ - # textInput("addy", "SOURCE ADDRESS:", value = connected.addy$addy) - # }) - + output$useraddy <- renderUI({ + textInput("addy", label = "SOURCE ADDRESS", value = connected.addy$addy, width = "400px") + }) + userRecord <- reactive({ if(!is.null(input$addy)) { @@ -30,13 +30,10 @@ function(input, output, session) { connected.addy$addy <- input$sol_address - # updateActionButton(session = session, inputId = "connect", - # label = paste0("connected as ", substr(input$sol_address, 1, 7), "..."), - # icon = character(0)) - # tmp <- data.table(address = input$sol_address, - # time = Sys.time(), - # score = userScore()) - # write.csv(tmp, file = paste0("/rstudio-data/optimistic-data/", input$eth_address, "_", Sys.time(), ".csv"), row.names = FALSE) + tmp <- data.table(address = input$sol_address, + time = Sys.time(), + score = userRecord()$total_score) + write.csv(tmp, file = paste0("/rstudio-data/solarscored-data/", input$sol_address, "_", Sys.time(), ".csv"), row.names = FALSE) } else { diff --git a/apps/solana/solarscored/ui.R b/apps/solana/solarscored/ui.R index 8a1c148..df6deee 100644 --- a/apps/solana/solarscored/ui.R +++ b/apps/solana/solarscored/ui.R @@ -9,6 +9,7 @@ fluidPage( tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "shiny.css"), + tags$link(rel = "stylesheet", type = "text/css", href = "wallet.css"), tags$link(rel = "stylesheet", href = "https://fonts.googleapis.com/css?family=Orbitron"), tags$link(rel = "stylesheet", href = "https://fonts.googleapis.com/css?family=Exo+2"), #tags$link(rel = "stylesheet", href = "https://fonts.googleapis.com/css?family=Roboto+Mono"), @@ -20,32 +21,36 @@ fluidPage( chooseSliderSkin("Round"), fluidRow(class = "titlerow", - column(9, class = "title", img(src = "solarscored-logo.svg", width = '480px')), - column(3, + column(8, class = "title", img(src = "solarscored-logo.svg", width = '480px')), + column(4, div(id = "icons", div(class = "aboutlinks", a(id = 'fork', href = "https://github.com/FlipsideCrypto/user_metrics/tree/main/apps/solana/solarscored", - img(src = "github.svg", width = "30px"), + img(src = "github.svg", width = "35px"), + onclick = "rudderstack.track('solarscored-click-github')", target = "_blank")), bsTooltip(id = "fork", title = "Fork this App", placement = "bottom", trigger = "hover"), div(class = "aboutlinks", a(id = "flippy", - href = "https://next.flipsidecrypto.xyz/", - img(src = "flipside.svg", width = "30px"), + href = "https://flipsidecrypto.xyz/", + img(src = "flipside.svg", width = "35px"), + onclick = "rudderstack.track('solarscored-click-flipside')", target = "_blank")), bsTooltip(id = "flippy", title = "Get the Data", placement = "bottom", trigger = "hover"), div(class = "aboutlinks", a(id = "solana", href = "https://solana.com", - img(src = "solana.svg", width = "30px"), + img(src = "solana.svg", width = "35px"), + onclick = "rudderstack.track('solarscored-click-solana')", target = "_blank")), bsTooltip(id = "solana", title = "Solana", - placement = "bottom", trigger = "hover") + placement = "bottom", trigger = "hover"), + SolWalletHandler("sol_address") ))), @@ -53,13 +58,12 @@ fluidPage( fluidRow(class = "dashmid", column(7, - div(class = "addybuttons", - #uiOutput("useraddy"), - div(id = "sourceaddress", "SOURCE ADDRESS:"), - SolWalletHandler("sol_address") - ), - #actionButton(inputId = "randomaddy", label = img(src = "random.svg", height = "26")), - + div(class = "addybuttons", + uiOutput("useraddy"), + actionButton(inputId = "randomaddy", label = img(src = "random.svg", height = "26"))), + bsTooltip(id = "randomaddy", + title = "show a random address", + placement = "bottom", trigger = "hover"), div(id = "wheelpart", uiOutput("svgout") %>% @@ -71,6 +75,7 @@ fluidPage( options = list(bgcolor = "#FFF"), #scale = 2, img(src = "camera.svg", height = "20"), + onclick = "rudderstack.track('solarscored-camera')", title = "Download the Circle")), bsTooltip(id = "pic", title = "Download the Wheel", @@ -150,7 +155,8 @@ fluidPage( div(id = "sliderbox", plotlyOutput("scorehist", height = "100px"), uiOutput("outputslider"), - uiOutput("bdnldscores"))) + a(uiOutput("bdnldscores"), onclick = "rudderstack.track('solarscored-click-solana')") + )) ) #close left column box diff --git a/apps/solana/solarscored/www/shiny.css b/apps/solana/solarscored/www/shiny.css index 07fc5ed..7c56874 100644 --- a/apps/solana/solarscored/www/shiny.css +++ b/apps/solana/solarscored/www/shiny.css @@ -24,6 +24,11 @@ a[title]:hover::after { color: orange; } +#sol_address { + margin-left: 20px; + +} + .container-fluid { width: 80%; max-width: 1200px; @@ -47,76 +52,31 @@ a[title]:hover::after { margin-top: 10px; } -/* centering the address input + buttons +/* centering the address input + buttons */ + .addybuttons { display: flex; margin: auto; align-items: baseline; vertical-align: bottom; - justify-content: center; -} -*/ - -.addybuttons { + justify-content: left; font-family: 'Exo 2'; font-weight: 500; - border: solid #E2E4F7 2px; - border-radius: 8px; - background-color: white; color: #56575E; - margin-top: 10px; + padding-bottom: 10px; + padding-left: 20px; } -#sourceaddress { - font-family: 'Orbitron'; - font-size: 13.6px; - font-weight: 700; - padding-left: 5px; -} -#useraddy label { - font-family: 'Orbitron'; - font-size: 13.6px; -} - -#useraddy { - min-width: 400px; -} #addy { - border: solid #E2E4F7 2px; - border-radius: 8px; - min-width: 400px; -} - -#sol_address { - font-family: 'Orbitron'; - font-size: 13.6px; - color: black; - text-transform: capitalize; - min-width: 400px; -} - -#sol_address:hover { - background-color: #E2E4F7; -} - -.wallet-adapter-button-trigger { - font-family: 'Exo 2'; - font-weight: 500; border: solid #E2E4F7 2px; border-radius: 8px; background-color: white; - color: #56575E; - text-transform: capitalize; - max-height: 42px; - line-height: 14px; - min-width: 400px; + } -.wallet-adapter-button-trigger:hover { - background-color: #E2E4F7; -} + .btn-default, .btn-default:focus { border: solid #E2E4F7 2px; @@ -164,7 +124,7 @@ a[title]:hover::after { background-color: #ffffff99; padding-top: 15px; padding-bottom: 10px; - margin-top: 10px; + margin-top: 28px; } #botrightbox { border: 2px #E2E4F7 solid; @@ -326,12 +286,12 @@ These are the ticks and text of the sliders .boxtitle { text-align: center; - font-size: 1em; font-family: Orbitron; margin-bottom: 10px; } .aboutlinks { + margin-top: 6px; padding-left: 20px; padding-bottom: 15px; } @@ -370,3 +330,13 @@ These are the ticks and text of the sliders .load-container { margin-top: 200px; } + + + + + + + + + + diff --git a/apps/solana/solarscored/www/wallet.css b/apps/solana/solarscored/www/wallet.css new file mode 100644 index 0000000..bbf9965 --- /dev/null +++ b/apps/solana/solarscored/www/wallet.css @@ -0,0 +1,301 @@ + +.wallet-adapter-button { + background-color: transparent; + border: none; + color: black; + cursor: pointer; + display: flex; + align-items: center; + font-family: 'Exo 2'; + font-size: 14px; + font-weight: 500; + height: 36px; + line-height: 14px; + border-radius: 8px; + padding: 22px; +} + +.wallet-adapter-button:hover { + +} + +.wallet-adapter-button-trigger { + background-color: #E2E4F7; +} + +.wallet-adapter-button:not([disabled]):focus-visible { + outline-color: white; +} + +.wallet-adapter-button:not([disabled]):hover { + background-color: #E2E4F7; +} + +.wallet-adapter-button[disabled] { + background: #E2E4F7; + color: black; + cursor: not-allowed; +} + +.wallet-adapter-button-end-icon, +.wallet-adapter-button-start-icon, +.wallet-adapter-button-end-icon img, +.wallet-adapter-button-start-icon img { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; +} + +.wallet-adapter-button-end-icon { + margin-left: 12px; +} + +.wallet-adapter-button-start-icon { + margin-right: 12px; +} + +.wallet-adapter-collapse { + width: 100%; +} + +.wallet-adapter-dropdown { + position: relative; + display: inline-block; +} + +.wallet-adapter-dropdown-list { + position: absolute; + z-index: 99; + display: grid; + grid-template-rows: 1fr; + grid-row-gap: 10px; + padding: 10px; + top: 100%; + right: 0; + margin: 0; + list-style: none; + background: #E2E4F7; + border-radius: 10px; + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); + opacity: 0; + visibility: hidden; + transition: opacity 200ms ease, transform 200ms ease, visibility 200ms; + font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +.wallet-adapter-dropdown-list-active { + opacity: 1; + visibility: visible; + transform: translateY(10px); +} + +.wallet-adapter-dropdown-list-item { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border: none; + outline: none; + cursor: pointer; + white-space: nowrap; + box-sizing: border-box; + padding: 0 20px; + width: 100%; + border-radius: 6px; + font-size: 14px; + font-weight: 600; + height: 37px; + color: black; +} + +.wallet-adapter-dropdown-list-item:not([disabled]):hover { + background-color: #E2E4F7; +} + +.wallet-adapter-modal-collapse-button svg { + align-self: center; + fill: #E2E4F7; +} + +.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg { + transform: rotate(180deg); + transition: transform ease-in 150ms; +} + +.wallet-adapter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + transition: opacity linear 150ms; + background: rgba(0, 0, 0, 0.5); + z-index: 1040; + overflow-y: auto; +} + +.wallet-adapter-modal.wallet-adapter-modal-fade-in { + opacity: 1; +} + +.wallet-adapter-modal-button-close { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 18px; + right: 18px; + padding: 12px; + cursor: pointer; + background: black; + border: none; + border-radius: 50%; +} + +.wallet-adapter-modal-button-close:focus-visible { + outline-color: white; +} + +.wallet-adapter-modal-button-close svg { + fill: #E2E4F7; + transition: fill 200ms ease 0s; +} + +.wallet-adapter-modal-button-close:hover svg { + fill: #fff; +} + +.wallet-adapter-modal-overlay { + background: rgba(0, 0, 0, 0.25);; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.wallet-adapter-modal-container { + display: flex; + margin: 3rem; + min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */ + align-items: center; + justify-content: center; +} + +@media (max-width: 480px) { + .wallet-adapter-modal-container { + margin: 1rem; + min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */ + } +} + +.wallet-adapter-modal-wrapper { + box-sizing: border-box; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + z-index: 1050; + max-width: 400px; + border-radius: 10px; + background: #E2E4F7; + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); + font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + flex: 1; +} + +.wallet-adapter-modal-wrapper .wallet-adapter-button { + width: 100%; +} + + + + +.wallet-adapter-modal-title { + font-weight: 500; + font-size: 24px; + line-height: 36px; + margin: 0; + padding: 64px 48px 48px 48px; + text-align: center; + color: black; +} + +@media (max-width: 374px) { + .wallet-adapter-modal-title { + font-size: 18px; + } +} + +.wallet-adapter-modal-list { + margin: 0 0 12px 0; + padding: 0; + width: 100%; + list-style: none; +} + +.wallet-adapter-modal-list .wallet-adapter-button { + font-weight: 400; + border-radius: 0; + font-size: 18px; +} + +.wallet-adapter-modal-list .wallet-adapter-button-end-icon, +.wallet-adapter-modal-list .wallet-adapter-button-start-icon, +.wallet-adapter-modal-list .wallet-adapter-button-end-icon img, +.wallet-adapter-modal-list .wallet-adapter-button-start-icon img { + width: 28px; + height: 28px; +} + +.wallet-adapter-modal-list .wallet-adapter-button span { + margin-left: auto; + font-size: 14px; + opacity: .6; +} + +.wallet-adapter-modal-list-more { + cursor: pointer; + border: none; + padding: 12px 24px 24px 12px; + align-self: flex-end; + display: flex; + align-items: center; + background-color: transparent; + color: black; +} + +.wallet-adapter-modal-list-more svg { + transition: all 0.1s ease; + fill: #E2E4F7; + margin-left: 0.5rem; +} + +.wallet-adapter-modal-list-more-icon-rotate { + transform: rotate(180deg); +} + +.wallet-adapter-modal-middle { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 0 24px 24px 24px; + box-sizing: border-box; +} + +.wallet-adapter-modal-middle-button { + display: block; + cursor: pointer; + margin-top: 48px; + width: 100%; + background-color: #E2E4F7; + padding: 12px; + font-size: 18px; + border: none; + border-radius: 8px; + color: black +}