Show fly tiers in staking modal

cmd/connector-common-user-actions-timescale/main.go

@@ -2,8 +2,8 @@ package main
 
 import (
 	database "github.com/fluidity-money/fluidity-app/lib/databases/timescale/user-actions"
-	queue "github.com/fluidity-money/fluidity-app/lib/queues/user-actions"
 	"github.com/fluidity-money/fluidity-app/lib/log"
+	queue "github.com/fluidity-money/fluidity-app/lib/queues/user-actions"
 )
 
 func main() {

cmd/connector-sui-amqp/main.go

@@ -12,17 +12,17 @@ import (
 
 	"github.com/fluidity-money/sui-go-sdk/models"
 
-	"github.com/fluidity-money/sui-go-sdk/sui"
 	"github.com/fluidity-money/fluidity-app/lib/log"
 	"github.com/fluidity-money/fluidity-app/lib/queue"
 	sui_queue "github.com/fluidity-money/fluidity-app/lib/queues/sui"
 	"github.com/fluidity-money/fluidity-app/lib/types/misc"
 	sui_types "github.com/fluidity-money/fluidity-app/lib/types/sui"
 	"github.com/fluidity-money/fluidity-app/lib/util"
+	"github.com/fluidity-money/sui-go-sdk/sui"
 )
 
 const (
-	RedisLastCheckpoint  = `sui.last-checkpoint`
+	RedisLastCheckpoint = `sui.last-checkpoint`
 
 	// RedisBufferSize is the length of the buffer for previously seen blocks
 	RedisBufferSize = 100

cmd/microservice-sui-user-actions/main.go

@@ -8,13 +8,13 @@ import (
 	"math/big"
 	"strconv"
 
-	"github.com/fluidity-money/sui-go-sdk/sui"
 	"github.com/fluidity-money/fluidity-app/common/sui/applications"
 	"github.com/fluidity-money/fluidity-app/lib/databases/timescale/spooler"
 	"github.com/fluidity-money/fluidity-app/lib/log"
 	"github.com/fluidity-money/fluidity-app/lib/queue"
 	sui_queue "github.com/fluidity-money/fluidity-app/lib/queues/sui"
 	user_actions "github.com/fluidity-money/fluidity-app/lib/queues/user-actions"
+	"github.com/fluidity-money/sui-go-sdk/sui"
 
 	"github.com/fluidity-money/fluidity-app/lib/databases/timescale/winners"
 	winnerTypes "github.com/fluidity-money/fluidity-app/lib/queues/winners"

cmd/microservice-sui-user-actions/util.go

@@ -4,9 +4,9 @@ import (
 	"fmt"
 	"math/big"
 
+	"github.com/fluidity-money/fluidity-app/lib/log"
 	"github.com/fluidity-money/sui-go-sdk/models"
 	"github.com/fluidity-money/sui-go-sdk/sui"
-	"github.com/fluidity-money/fluidity-app/lib/log"
 )
 
 const (

cmd/microservice-sui-worker/spooler.go

@@ -1,8 +1,6 @@
 package main
 
 import (
-	"github.com/fluidity-money/sui-go-sdk/signer"
-	suiSdk "github.com/fluidity-money/sui-go-sdk/sui"
 	commonSpooler "github.com/fluidity-money/fluidity-app/common/ethereum/spooler"
 	"github.com/fluidity-money/fluidity-app/lib/databases/postgres/worker"
 	"github.com/fluidity-money/fluidity-app/lib/databases/timescale/spooler"
@@ -12,6 +10,8 @@ import (
 	"github.com/fluidity-money/fluidity-app/lib/types/network"
 	"github.com/fluidity-money/fluidity-app/lib/types/sui"
 	token_details "github.com/fluidity-money/fluidity-app/lib/types/token-details"
+	"github.com/fluidity-money/sui-go-sdk/signer"
+	suiSdk "github.com/fluidity-money/sui-go-sdk/sui"
 )
 
 func payoutSpooledWinnings(client suiSdk.ISuiAPI, signer signer.Signer, fluidToken, baseToken sui.SuiToken, workerAddress string, payoutArgs payoutArgs, pendingWinners []spooler.PendingWinner) {

cmd/microservice-sui-worker/transaction.go

@@ -5,12 +5,12 @@ import (
 	"fmt"
 	"math/big"
 
-	"github.com/fluidity-money/sui-go-sdk/models"
-	"github.com/fluidity-money/sui-go-sdk/signer"
-	suiSdk "github.com/fluidity-money/sui-go-sdk/sui"
 	"github.com/fluidity-money/fluidity-app/lib/log"
 	"github.com/fluidity-money/fluidity-app/lib/types/sui"
 	worker_types "github.com/fluidity-money/fluidity-app/lib/types/worker"
+	"github.com/fluidity-money/sui-go-sdk/models"
+	"github.com/fluidity-money/sui-go-sdk/signer"
+	suiSdk "github.com/fluidity-money/sui-go-sdk/sui"
 )
 
 // TODO utility in EthereumSpooledRewards has to be the address of the utility token

common/sui/applications/transfers.go

@@ -3,9 +3,9 @@ package applications
 import (
 	"fmt"
 
-	"github.com/fluidity-money/sui-go-sdk/models"
 	"github.com/fluidity-money/fluidity-app/lib/queues/sui"
 	"github.com/fluidity-money/fluidity-app/lib/types/applications"
+	"github.com/fluidity-money/sui-go-sdk/models"
 )
 
 // ClassifyApplicationTransfer to determine the application used in a transfer based on the event type

lib/types/sui/sui.go

@@ -7,9 +7,9 @@ import (
 	"strconv"
 	"time"
 
-	"github.com/fluidity-money/sui-go-sdk/models"
 	"github.com/fluidity-money/fluidity-app/lib/types/misc"
 	user_actions "github.com/fluidity-money/fluidity-app/lib/types/user-actions"
+	"github.com/fluidity-money/sui-go-sdk/models"
 )
 
 type WrapEvent struct {

lib/types/worker/sui.go

@@ -3,10 +3,10 @@ package worker
 import (
 	"math/big"
 
-	"github.com/fluidity-money/sui-go-sdk/models"
 	user_actions "github.com/fluidity-money/fluidity-app/lib/databases/timescale/user-actions"
 	"github.com/fluidity-money/fluidity-app/lib/types/applications"
 	"github.com/fluidity-money/fluidity-app/lib/types/misc"
+	"github.com/fluidity-money/sui-go-sdk/models"
 )
 
 func NewSuiEmission() *Emission {

web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx

@@ -361,6 +361,72 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp
                         </div>
                         <div style={{ gap: '0.5em', flexDirection: "column" }} className="fly-staking-stats-modal-row">
                         <div className="fly-staking-grid-container">
+                            <Card className="fly-staking-grid-item-long" fill>
+                              <div className="centre">
+                                <Hoverable
+                                  tooltipStyle={"solid"}
+                                  tooltipContent={
+                                    <div className="fly-staking-popup-container-outer">
+                                      <div className="fly-staking-popup-container">
+                                        <Text className="staking-stats-info-text">
+                                          😔 No Tier
+                                        </Text>
+                                        <Text className="fly-staking-popup-icon-text">
+                                          {"5000 > No Tier"}
+                                        </Text>
+                                      </div>
+                                      <div className="fly-staking-popup-container">
+                                        <Text className="staking-stats-info-text">
+                                          🦐 Shrimp
+                                        </Text>
+                                        <Text className="fly-staking-popup-icon-text">
+                                          {"30,000 > Shrimp"}
+                                        </Text>
+                                      </div>
+                                      <div className="fly-staking-popup-container">
+                                        <Text className="staking-stats-info-text">
+                                          🐬 Dolphin
+                                        </Text>
+                                        <Text className="fly-staking-popup-icon-text">
+                                          {"80,000 > Dolphin"}
+                                        </Text>
+                                      </div>
+                                      <div className="fly-staking-popup-container">
+                                        <Text className="staking-stats-info-text">
+                                          🏄‍♂️ Surfer
+                                        </Text>
+                                        <Text className="fly-staking-popup-icon-text">
+                                          {"250,000 > Surfer"}
+                                        </Text>
+                                      </div>
+                                      <div className="fly-staking-popup-container">
+                                        <Text className="staking-stats-info-text">
+                                          🗿 Tiki Warrior
+                                        </Text>
+                                        <Text className="fly-staking-popup-icon-text">
+                                          {"1,000,000 > Tiki"}
+                                        </Text>
+                                      </div>
+                                      <div className="fly-staking-popup-container">
+                                        <Text className="staking-stats-info-text nowrap">
+                                          🌌 Super Surfer
+                                        </Text>
+                                        <Text className="fly-staking-popup-icon-text">
+                                          {"∞ > Super Surfer"}
+                                        </Text>
+                                      </div>
+                                    </div>
+                                  }
+                                >
+                                  <div className="flex-column">
+                                    <div className="text-with-info-popup">
+                                      <Text size="lg">{tierText(flyStaked)}</Text>
+                                      <InfoCircle className="info-circle-grey" />
+                                    </div>
+                                  </div>
+                                </Hoverable>
+                              </div>
+                            </Card>
                             <Card fill>
                               <Hoverable
                                 tooltipStyle={"solid"}
@@ -421,7 +487,12 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp
                                 }
                               >
                                 <div className="flex-column">
-                                  <Text size="lg" prominent>{getValueFromFlyAmount(flyUnstaking)?.toString()}</Text>
+                                  <Text size="lg" prominent>{
+                                    (() => {
+                                      const s = getValueFromFlyAmount(new BN(flyStaked.toString()))?.toString();
+                                      if (!s) return flyStaked.toString();
+                                      return s;
+                                    })() }</Text>
                                   <div className="text-with-info-popup">
                                     <Text size="lg">Unstaking</Text>
                                     <InfoCircle className="info-circle-grey" />
@@ -652,6 +723,23 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp
   return modal;
 }
 
+const tierText = (flyStaked: BigNumber): JSX.Element => {
+  switch (true) {
+    case (flyStaked.lt(BigNumber.from(5000))):
+    return <>😔 No Tier</>;
+    case (flyStaked.lt(BigNumber.from(30000))):
+    return <>🦐 Shrimp Tier</>;
+    case (flyStaked.lt(BigNumber.from(80000))):
+    return <>🐬 Dolphin Tier</>;
+    case (flyStaked.lt(BigNumber.from(250000))):
+    return <>🏄‍♂️ Surfer Tier</>;
+    case (flyStaked.lt(BigNumber.from(1000000))):
+    return <>🗿 Tiki Warrior Tier</>;
+    default:
+    return <>🌌 Super Surfer Tier</>;
+  } 
+}
+
 const StakingWarning = ({ header, body }: { header: ReactNode, body: ReactNode }) => {
   return <Card className="staking-card" >
     <div className="staking-card-container">

web/app.fluidity.money/app/styles/dashboard/airdrop.scss

@@ -1435,6 +1435,26 @@ $holo: linear-gradient(
   grid-column: 1 / -1;
 }
 
+.fly-staking-popup-icon-text {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.fly-staking-popup-container-outer {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+.fly-staking-popup-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.centre {
+  align-self: center;
+}
+
 .underline {
   text-decoration: underline;
 }
@@ -1653,6 +1673,10 @@ claim-error-message-none {
 .staking-stats-info-text {
   min-width: 100px;
   max-width: 140px;
+
+  .nowrap {
+    white-space: nowrap;
+  }
 }
 
 .airdrop-image-banner {