From d59c1b6f6360ce5a66f460fc61c875bd3c4b84fd Mon Sep 17 00:00:00 2001
From: Calvin Kei <calvin.conceptz@gmail.com>
Date: Wed, 15 Dec 2021 23:46:01 +0800
Subject: [PATCH] airdrop flow

---
 ...mation.svg => icon_danger_exclamation.svg} |  2 +-
 assets/images/icons/icon_tick.svg             |  4 +-
 assets/images/icons/icon_warning.svg          | 17 +++++
 components/Banner/index.tsx                   |  9 ++-
 components/ConnectChainDialog/index.tsx       |  8 ++-
 .../DsmAirdrop/AirdropEligibilityDetails.tsx  | 63 ++++++++++++++++++-
 components/DsmAirdrop/CheckClaimable.tsx      | 23 ++++++-
 components/DsmAirdrop/ClaimableAmount.tsx     | 48 ++++++++++++--
 components/DsmAirdrop/index.tsx               | 15 +++++
 components/DsmAirdrop/styles.ts               |  2 +-
 locales/en/common.json                        |  8 ++-
 misc/utils.ts                                 |  3 -
 12 files changed, 178 insertions(+), 24 deletions(-)
 rename assets/images/icons/{icon_Danger exclamation.svg => icon_danger_exclamation.svg} (97%)
 create mode 100644 assets/images/icons/icon_warning.svg

diff --git a/assets/images/icons/icon_Danger exclamation.svg b/assets/images/icons/icon_danger_exclamation.svg
similarity index 97%
rename from assets/images/icons/icon_Danger exclamation.svg
rename to assets/images/icons/icon_danger_exclamation.svg
index 06938d89..383eb4ef 100644
--- a/assets/images/icons/icon_Danger exclamation.svg	
+++ b/assets/images/icons/icon_danger_exclamation.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 	 viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;}
diff --git a/assets/images/icons/icon_tick.svg b/assets/images/icons/icon_tick.svg
index 9512cb36..6a09eff8 100644
--- a/assets/images/icons/icon_tick.svg
+++ b/assets/images/icons/icon_tick.svg
@@ -1,7 +1,7 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4940_283173)">
-<path d="M14.6959 11.3057C14.7065 12.2818 14.2771 12.7946 13.4903 12.9156C13.1098 12.9739 12.7248 13.0152 12.3406 13.0365C12.0522 13.0528 11.8773 13.1807 11.7688 13.4397C11.6196 13.7957 11.4767 14.1556 11.2974 14.496C10.8617 15.3204 10.1577 15.548 9.32324 15.1336C8.97843 14.9624 8.65244 14.7518 8.32394 14.5493C8.10515 14.4145 7.90203 14.4082 7.68073 14.5443C7.35223 14.7468 7.02436 14.9536 6.67768 15.126C5.82132 15.5555 5.13172 15.3348 4.68787 14.4891C4.5092 14.1481 4.36187 13.7895 4.21706 13.4328C4.10735 13.1638 3.913 13.0566 3.63654 13.0409C3.29294 13.0256 2.95051 12.9907 2.61091 12.9363C1.51319 12.735 1.0963 12.0981 1.32637 11.0003C1.38217 10.7358 1.43859 10.4694 1.51946 10.2117C1.62415 9.87819 1.53764 9.63056 1.2687 9.41427C0.996495 9.20261 0.738488 8.97328 0.496342 8.72779C-0.169437 8.03819 -0.16693 7.28591 0.506998 6.60132C0.784719 6.31921 1.1151 6.08851 1.38467 5.80013C1.50016 5.66412 1.55976 5.48937 1.55143 5.31113C1.52134 4.98201 1.4204 4.65978 1.35082 4.33379C1.10005 3.16022 1.60158 2.47875 2.80211 2.36277C3.06166 2.3377 3.32183 2.30008 3.582 2.30008C3.92053 2.30008 4.12364 2.14587 4.24464 1.8368C4.37062 1.50518 4.51396 1.1804 4.67407 0.863838C5.12105 0.00622475 5.82884 -0.221963 6.6877 0.21374C6.99431 0.370731 7.29137 0.545728 7.57729 0.737828C7.86316 0.925901 8.1227 0.940328 8.41296 0.745359C8.69888 0.553055 8.99593 0.377833 9.30255 0.220627C10.1658 -0.21821 10.8698 0.00309145 11.3156 0.865093C11.4762 1.18109 11.6194 1.50569 11.7444 1.83743C11.8654 2.15089 12.0735 2.29005 12.4083 2.30071C12.7418 2.31091 13.0741 2.3457 13.4025 2.40479C14.4683 2.60101 14.8814 3.23795 14.6564 4.30307C14.6104 4.55972 14.551 4.81375 14.4783 5.06414C14.3567 5.44028 14.4482 5.72428 14.7673 5.96501C15.0345 6.166 15.2847 6.38867 15.5152 6.63078C16.1572 7.30659 16.1559 8.03631 15.5152 8.71149C15.2929 8.9471 15.0499 9.16236 14.7893 9.3547C14.447 9.60547 14.3542 9.89323 14.4758 10.3013C14.5968 10.6894 14.652 11.0944 14.6959 11.3057ZM5.95108 14.1004L7.04442 13.4472C7.687 13.0641 8.32771 13.071 8.96715 13.4541C9.21792 13.6052 9.46868 13.76 9.71945 13.908C10.0787 14.1186 10.1037 14.1104 10.2674 13.7406C10.4109 13.4165 10.5413 13.0861 10.6937 12.7664C10.9551 12.2178 11.3833 11.8855 11.9964 11.8134C12.3794 11.7683 12.7631 11.732 13.1468 11.6937C13.3875 11.6705 13.5135 11.5865 13.422 11.31C13.3398 11.0637 13.3016 10.8035 13.2339 10.5521C13.0057 9.69763 13.2038 8.98797 13.9235 8.43943C14.1392 8.27455 14.3316 8.08083 14.541 7.90843C14.7504 7.73603 14.7291 7.59497 14.5335 7.42696C14.2468 7.18371 13.9655 6.93442 13.6897 6.67906C13.212 6.23458 13.0628 5.68478 13.1982 5.05348C13.2772 4.68674 13.3568 4.32 13.4414 3.95451C13.4884 3.75327 13.4126 3.65798 13.2107 3.64105C12.9505 3.62225 12.691 3.58714 12.4308 3.57836C11.5394 3.5489 10.8962 3.17024 10.5727 2.30887C10.463 2.0161 10.3219 1.73399 10.1965 1.44812C10.1213 1.27823 10.016 1.245 9.85172 1.34907C9.54391 1.54592 9.23046 1.73337 8.91136 1.91705C8.30952 2.26624 7.70267 2.27126 7.09959 1.92144C6.81058 1.75406 6.5291 1.57349 6.2401 1.40611C5.9141 1.21804 5.88212 1.22869 5.73229 1.56409C5.57494 1.91641 5.43451 2.2769 5.26336 2.62232C5.00382 3.14642 4.57377 3.44922 3.99011 3.51944C3.62776 3.56332 3.26478 3.59779 2.9018 3.6354C2.515 3.67553 2.50183 3.69121 2.58834 4.08303C2.641 4.31707 2.69847 4.54965 2.76074 4.78077C2.99082 5.63337 2.80086 6.34804 2.08117 6.89471C1.92319 7.01445 1.77524 7.14548 1.62666 7.27901C1.18782 7.66519 1.19284 7.67208 1.61788 8.05198C1.89059 8.29523 2.17082 8.53157 2.42409 8.793C2.80024 9.18105 2.90995 9.66064 2.81278 10.1841C2.75385 10.5013 2.66795 10.811 2.59711 11.1282C2.48176 11.6423 2.48302 11.6423 2.99082 11.7113C3.09405 11.7324 3.19893 11.7446 3.30427 11.7476C4.47346 11.7044 5.22951 12.2347 5.56992 13.3582C5.62019 13.5068 5.68311 13.6509 5.758 13.7888C5.80564 13.8904 5.8746 13.9832 5.95108 14.1004Z" fill="#007FFF"/>
-<path d="M5.95119 14.1004C5.87471 13.9807 5.807 13.8904 5.75685 13.7914C5.68196 13.6534 5.61904 13.5094 5.56878 13.3607C5.22836 12.2373 4.47231 11.7069 3.30312 11.7501C3.19778 11.7471 3.0929 11.735 2.98967 11.7138C2.48187 11.6448 2.48062 11.6448 2.59597 11.1308C2.66681 10.8173 2.7527 10.5038 2.81163 10.1866C2.9088 9.66315 2.79909 9.18357 2.42295 8.79551C2.17218 8.53409 1.88945 8.29774 1.61674 8.0545C1.1917 7.67459 1.18981 7.66771 1.62551 7.28153C1.77409 7.14988 1.92204 7.01697 2.08002 6.89723C2.79971 6.34931 2.98967 5.63589 2.7596 4.78329C2.69774 4.55217 2.64027 4.31959 2.5872 4.08554C2.49817 3.69373 2.51134 3.67804 2.90065 3.63792C3.26363 3.60031 3.62661 3.56582 3.98897 3.52194C4.57262 3.45172 5.00268 3.1458 5.26222 2.62484C5.43336 2.27941 5.57568 1.91893 5.73115 1.56661C5.88098 1.23121 5.91295 1.21993 6.23895 1.40863C6.52795 1.57601 6.80943 1.75656 7.09844 1.92394C7.70153 2.27376 8.30838 2.26876 8.91021 1.91957C9.22367 1.73588 9.53712 1.54843 9.85058 1.35158C10.0148 1.24752 10.1201 1.28075 10.1954 1.45064C10.3208 1.73651 10.4593 2.01862 10.5715 2.31139C10.895 3.17276 11.5382 3.55141 12.4297 3.58088C12.6899 3.58966 12.9494 3.62476 13.2096 3.64357C13.4114 3.65799 13.4873 3.75328 13.4403 3.95703C13.3556 4.32251 13.276 4.68926 13.197 5.056C13.0622 5.6873 13.2108 6.2371 13.6885 6.68157C13.9635 6.93735 14.2448 7.18665 14.5323 7.42947C14.7267 7.59435 14.7455 7.74292 14.5399 7.91094C14.3342 8.07895 14.138 8.27707 13.9224 8.44194C13.2052 8.99049 13.0071 9.70015 13.2328 10.5546C13.3005 10.8054 13.3387 11.0662 13.4208 11.3126C13.5124 11.589 13.3863 11.673 13.1456 11.6962C12.7619 11.7345 12.3783 11.7708 11.9952 11.816C11.3834 11.8881 10.9539 12.2203 10.6925 12.7689C10.5402 13.0886 10.4098 13.419 10.2662 13.7431C10.1026 14.113 10.0781 14.1192 9.7183 13.9105C9.46753 13.7625 9.21677 13.6077 8.96601 13.4566C8.32656 13.071 7.68585 13.0667 7.04327 13.4497L5.95119 14.1004ZM7.06772 8.83751C6.63578 8.39867 6.24584 7.99369 5.84525 7.59999C5.54057 7.30158 5.16505 7.29155 4.9005 7.55548C4.63594 7.81941 4.64409 8.1918 4.94689 8.49961C5.49564 9.05756 6.04899 9.61133 6.60694 10.1609C6.96554 10.5139 7.33541 10.502 7.65639 10.1196C8.7656 8.80179 9.87064 7.48067 10.9715 6.15622C11.2624 5.80703 11.2429 5.43903 10.9376 5.1889C10.653 4.95569 10.285 5.0071 10.0029 5.33372C9.70262 5.68103 9.41174 6.03649 9.11647 6.38881L7.06772 8.83751Z" fill="#007FFF"/>
+<path d="M14.6959 11.3057C14.7065 12.2818 14.2771 12.7946 13.4903 12.9156C13.1098 12.9739 12.7248 13.0152 12.3406 13.0365C12.0522 13.0528 11.8773 13.1807 11.7688 13.4397C11.6196 13.7957 11.4767 14.1556 11.2974 14.496C10.8617 15.3204 10.1577 15.548 9.32324 15.1336C8.97843 14.9624 8.65244 14.7518 8.32394 14.5493C8.10515 14.4145 7.90203 14.4082 7.68073 14.5443C7.35223 14.7468 7.02436 14.9536 6.67768 15.126C5.82132 15.5555 5.13172 15.3348 4.68787 14.4891C4.5092 14.1481 4.36187 13.7895 4.21706 13.4328C4.10735 13.1638 3.913 13.0566 3.63654 13.0409C3.29294 13.0256 2.95051 12.9907 2.61091 12.9363C1.51319 12.735 1.0963 12.0981 1.32637 11.0003C1.38217 10.7358 1.43859 10.4694 1.51946 10.2117C1.62415 9.87819 1.53764 9.63056 1.2687 9.41427C0.996495 9.20261 0.738488 8.97328 0.496342 8.72779C-0.169437 8.03819 -0.16693 7.28591 0.506998 6.60132C0.784719 6.31921 1.1151 6.08851 1.38467 5.80013C1.50016 5.66412 1.55976 5.48937 1.55143 5.31113C1.52134 4.98201 1.4204 4.65978 1.35082 4.33379C1.10005 3.16022 1.60158 2.47875 2.80211 2.36277C3.06166 2.3377 3.32183 2.30008 3.582 2.30008C3.92053 2.30008 4.12364 2.14587 4.24464 1.8368C4.37062 1.50518 4.51396 1.1804 4.67407 0.863838C5.12105 0.00622475 5.82884 -0.221963 6.6877 0.21374C6.99431 0.370731 7.29137 0.545728 7.57729 0.737828C7.86316 0.925901 8.1227 0.940328 8.41296 0.745359C8.69888 0.553055 8.99593 0.377833 9.30255 0.220627C10.1658 -0.21821 10.8698 0.00309145 11.3156 0.865093C11.4762 1.18109 11.6194 1.50569 11.7444 1.83743C11.8654 2.15089 12.0735 2.29005 12.4083 2.30071C12.7418 2.31091 13.0741 2.3457 13.4025 2.40479C14.4683 2.60101 14.8814 3.23795 14.6564 4.30307C14.6104 4.55972 14.551 4.81375 14.4783 5.06414C14.3567 5.44028 14.4482 5.72428 14.7673 5.96501C15.0345 6.166 15.2847 6.38867 15.5152 6.63078C16.1572 7.30659 16.1559 8.03631 15.5152 8.71149C15.2929 8.9471 15.0499 9.16236 14.7893 9.3547C14.447 9.60547 14.3542 9.89323 14.4758 10.3013C14.5968 10.6894 14.652 11.0944 14.6959 11.3057ZM5.95108 14.1004L7.04442 13.4472C7.687 13.0641 8.32771 13.071 8.96715 13.4541C9.21792 13.6052 9.46868 13.76 9.71945 13.908C10.0787 14.1186 10.1037 14.1104 10.2674 13.7406C10.4109 13.4165 10.5413 13.0861 10.6937 12.7664C10.9551 12.2178 11.3833 11.8855 11.9964 11.8134C12.3794 11.7683 12.7631 11.732 13.1468 11.6937C13.3875 11.6705 13.5135 11.5865 13.422 11.31C13.3398 11.0637 13.3016 10.8035 13.2339 10.5521C13.0057 9.69763 13.2038 8.98797 13.9235 8.43943C14.1392 8.27455 14.3316 8.08083 14.541 7.90843C14.7504 7.73603 14.7291 7.59497 14.5335 7.42696C14.2468 7.18371 13.9655 6.93442 13.6897 6.67906C13.212 6.23458 13.0628 5.68478 13.1982 5.05348C13.2772 4.68674 13.3568 4.32 13.4414 3.95451C13.4884 3.75327 13.4126 3.65798 13.2107 3.64105C12.9505 3.62225 12.691 3.58714 12.4308 3.57836C11.5394 3.5489 10.8962 3.17024 10.5727 2.30887C10.463 2.0161 10.3219 1.73399 10.1965 1.44812C10.1213 1.27823 10.016 1.245 9.85172 1.34907C9.54391 1.54592 9.23046 1.73337 8.91136 1.91705C8.30952 2.26624 7.70267 2.27126 7.09959 1.92144C6.81058 1.75406 6.5291 1.57349 6.2401 1.40611C5.9141 1.21804 5.88212 1.22869 5.73229 1.56409C5.57494 1.91641 5.43451 2.2769 5.26336 2.62232C5.00382 3.14642 4.57377 3.44922 3.99011 3.51944C3.62776 3.56332 3.26478 3.59779 2.9018 3.6354C2.515 3.67553 2.50183 3.69121 2.58834 4.08303C2.641 4.31707 2.69847 4.54965 2.76074 4.78077C2.99082 5.63337 2.80086 6.34804 2.08117 6.89471C1.92319 7.01445 1.77524 7.14548 1.62666 7.27901C1.18782 7.66519 1.19284 7.67208 1.61788 8.05198C1.89059 8.29523 2.17082 8.53157 2.42409 8.793C2.80024 9.18105 2.90995 9.66064 2.81278 10.1841C2.75385 10.5013 2.66795 10.811 2.59711 11.1282C2.48176 11.6423 2.48302 11.6423 2.99082 11.7113C3.09405 11.7324 3.19893 11.7446 3.30427 11.7476C4.47346 11.7044 5.22951 12.2347 5.56992 13.3582C5.62019 13.5068 5.68311 13.6509 5.758 13.7888C5.80564 13.8904 5.8746 13.9832 5.95108 14.1004Z"/>
+<path d="M5.95119 14.1004C5.87471 13.9807 5.807 13.8904 5.75685 13.7914C5.68196 13.6534 5.61904 13.5094 5.56878 13.3607C5.22836 12.2373 4.47231 11.7069 3.30312 11.7501C3.19778 11.7471 3.0929 11.735 2.98967 11.7138C2.48187 11.6448 2.48062 11.6448 2.59597 11.1308C2.66681 10.8173 2.7527 10.5038 2.81163 10.1866C2.9088 9.66315 2.79909 9.18357 2.42295 8.79551C2.17218 8.53409 1.88945 8.29774 1.61674 8.0545C1.1917 7.67459 1.18981 7.66771 1.62551 7.28153C1.77409 7.14988 1.92204 7.01697 2.08002 6.89723C2.79971 6.34931 2.98967 5.63589 2.7596 4.78329C2.69774 4.55217 2.64027 4.31959 2.5872 4.08554C2.49817 3.69373 2.51134 3.67804 2.90065 3.63792C3.26363 3.60031 3.62661 3.56582 3.98897 3.52194C4.57262 3.45172 5.00268 3.1458 5.26222 2.62484C5.43336 2.27941 5.57568 1.91893 5.73115 1.56661C5.88098 1.23121 5.91295 1.21993 6.23895 1.40863C6.52795 1.57601 6.80943 1.75656 7.09844 1.92394C7.70153 2.27376 8.30838 2.26876 8.91021 1.91957C9.22367 1.73588 9.53712 1.54843 9.85058 1.35158C10.0148 1.24752 10.1201 1.28075 10.1954 1.45064C10.3208 1.73651 10.4593 2.01862 10.5715 2.31139C10.895 3.17276 11.5382 3.55141 12.4297 3.58088C12.6899 3.58966 12.9494 3.62476 13.2096 3.64357C13.4114 3.65799 13.4873 3.75328 13.4403 3.95703C13.3556 4.32251 13.276 4.68926 13.197 5.056C13.0622 5.6873 13.2108 6.2371 13.6885 6.68157C13.9635 6.93735 14.2448 7.18665 14.5323 7.42947C14.7267 7.59435 14.7455 7.74292 14.5399 7.91094C14.3342 8.07895 14.138 8.27707 13.9224 8.44194C13.2052 8.99049 13.0071 9.70015 13.2328 10.5546C13.3005 10.8054 13.3387 11.0662 13.4208 11.3126C13.5124 11.589 13.3863 11.673 13.1456 11.6962C12.7619 11.7345 12.3783 11.7708 11.9952 11.816C11.3834 11.8881 10.9539 12.2203 10.6925 12.7689C10.5402 13.0886 10.4098 13.419 10.2662 13.7431C10.1026 14.113 10.0781 14.1192 9.7183 13.9105C9.46753 13.7625 9.21677 13.6077 8.96601 13.4566C8.32656 13.071 7.68585 13.0667 7.04327 13.4497L5.95119 14.1004ZM7.06772 8.83751C6.63578 8.39867 6.24584 7.99369 5.84525 7.59999C5.54057 7.30158 5.16505 7.29155 4.9005 7.55548C4.63594 7.81941 4.64409 8.1918 4.94689 8.49961C5.49564 9.05756 6.04899 9.61133 6.60694 10.1609C6.96554 10.5139 7.33541 10.502 7.65639 10.1196C8.7656 8.80179 9.87064 7.48067 10.9715 6.15622C11.2624 5.80703 11.2429 5.43903 10.9376 5.1889C10.653 4.95569 10.285 5.0071 10.0029 5.33372C9.70262 5.68103 9.41174 6.03649 9.11647 6.38881L7.06772 8.83751Z"/>
 <path d="M7.06749 8.83768L9.11624 6.38898C9.41151 6.03665 9.70239 5.68119 10.0027 5.33388C10.2848 5.00726 10.6528 4.95773 10.9374 5.18906C11.2427 5.43983 11.2621 5.80719 10.9713 6.15638C9.86915 7.48 8.76412 8.80112 7.65616 10.1197C7.33518 10.5021 6.96656 10.514 6.60671 10.1611C6.04876 9.61192 5.49541 9.05815 4.94666 8.49978C4.64386 8.19197 4.6332 7.82271 4.90027 7.55565C5.16733 7.28859 5.54034 7.30488 5.84502 7.60016C6.24436 7.99386 6.63555 8.39947 7.06749 8.83768Z" fill="white"/>
 </g>
 <defs>
diff --git a/assets/images/icons/icon_warning.svg b/assets/images/icons/icon_warning.svg
new file mode 100644
index 00000000..ce10d1c0
--- /dev/null
+++ b/assets/images/icons/icon_warning.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="122.000000pt" height="110.000000pt" viewBox="0 0 122.000000 110.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,110.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M576 1075 c-21 -7 -46 -21 -57 -31 -18 -16 -173 -277 -403 -680 -78
+-136 -86 -156 -86 -203 0 -46 4 -56 39 -94 l39 -42 509 3 508 4 34 33 c25 25
+36 45 42 84 l8 51 -196 337 c-250 433 -288 495 -312 517 -29 27 -82 35 -125
+21z m91 -252 c7 -29 -14 -324 -26 -371 -10 -36 -48 -43 -55 -10 -8 39 -26 263
+-26 325 0 69 10 83 62 83 33 0 39 -4 45 -27z m-13 -522 c25 -27 17 -72 -15
+-90 -24 -13 -29 -13 -53 2 -17 12 -26 26 -26 44 0 55 59 83 94 44z"/>
+</g>
+</svg>
diff --git a/components/Banner/index.tsx b/components/Banner/index.tsx
index 30b050c9..bade50ef 100644
--- a/components/Banner/index.tsx
+++ b/components/Banner/index.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { Card, CardMedia, alpha, useTheme } from '@material-ui/core'
+import { Box, Card, CardMedia, alpha, useTheme } from '@material-ui/core'
 import Carousel from 'react-material-ui-carousel'
 import useStyles from './style'
 
@@ -23,14 +23,17 @@ const Banner: React.FC = () => {
         }}
         activeIndicatorIconButtonProps={{
           style: {
-            color: theme.palette.primary.main,
+            backgroundColor: theme.palette.primary.main,
+            margin: theme.spacing(0.5, 0.5, 0),
           },
         }}
         indicatorIconButtonProps={{
           style: {
-            color: alpha(theme.palette.primary.main, 0.6),
+            backgroundColor: alpha(theme.palette.primary.main, 0.6),
+            margin: theme.spacing(0.5, 0.5, 0),
           },
         }}
+        IndicatorIcon={<Box p={0.5} borderRadius="50%" />}
       >
         {banners.map((banner) => (
           <Link href="/dsm-airdrop" key={banner}>
diff --git a/components/ConnectChainDialog/index.tsx b/components/ConnectChainDialog/index.tsx
index 3809be76..90e8cc0e 100644
--- a/components/ConnectChainDialog/index.tsx
+++ b/components/ConnectChainDialog/index.tsx
@@ -38,6 +38,7 @@ interface ConnectChainDialogProps {
   onClose(event?: unknown, reason?: string): void
   connections: ChainConnection[]
   account: Account
+  shouldConnect?: boolean
 }
 
 interface Content {
@@ -51,6 +52,7 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
   onClose,
   connections,
   account,
+  shouldConnect,
 }) => {
   const { t } = useTranslation('common')
   const classes = useStyles()
@@ -59,7 +61,7 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
   const sendTransaction = useSendTransaction()
   const { password } = useWalletsContext()
   const [stage, setStage, toPrevStage, isPrevStageAvailable] = useStateHistory<Stage>(
-    Stage.StartStage
+    shouldConnect ? Stage.SelectChainStage : Stage.StartStage
   )
 
   const [mnemonic, setMnemonic] = React.useState('')
@@ -80,9 +82,9 @@ const ConnectChainDialog: React.FC<ConnectChainDialogProps> = ({
       setChain('')
       setLedgerApp('')
       setError('')
-      setStage(Stage.StartStage, true)
+      setStage(shouldConnect ? Stage.SelectChainStage : Stage.StartStage, true)
     }
-  }, [open])
+  }, [open, shouldConnect])
 
   React.useEffect(() => {
     setError('')
diff --git a/components/DsmAirdrop/AirdropEligibilityDetails.tsx b/components/DsmAirdrop/AirdropEligibilityDetails.tsx
index c90e8eab..48b63900 100644
--- a/components/DsmAirdrop/AirdropEligibilityDetails.tsx
+++ b/components/DsmAirdrop/AirdropEligibilityDetails.tsx
@@ -1,20 +1,39 @@
 import React from 'react'
-import { Box, Typography, useTheme, Button, TextField, CircularProgress } from '@material-ui/core'
+import {
+  Box,
+  Typography,
+  useTheme,
+  Button,
+  TextField,
+  CircularProgress,
+  alpha,
+} from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import TickIcon from '../../assets/images/icons/icon_tick.svg'
+import WarningIcon from '../../assets/images/icons/icon_warning.svg'
 import { formatCrypto } from '../../misc/utils'
+import useIconProps from '../../misc/useIconProps'
 
 interface AirdropEligibilityDetailsProps {
   dataStakingInfo: any
   lpInfos: any
+  nonEligibleAddresses?: ChainConnection[]
+  greyTick?: boolean
 }
 
 const AirdropEligibilityDetails: React.FC<AirdropEligibilityDetailsProps> = ({
   dataStakingInfo,
   lpInfos,
+  nonEligibleAddresses,
+  greyTick,
 }) => {
   const { t, lang } = useTranslation('common')
   const theme = useTheme()
+  const iconProps = useIconProps(
+    undefined,
+    greyTick ? theme.palette.grey[300] : theme.palette.primary.main
+  )
+  const errorIconProps = useIconProps(undefined, theme.palette.error.main)
 
   return (
     <>
@@ -34,7 +53,7 @@ const AirdropEligibilityDetails: React.FC<AirdropEligibilityDetailsProps> = ({
                   mb={0.5}
                 >
                   <Box pr={theme.spacing(0.2)} display="flex" alignItems="center">
-                    <TickIcon />
+                    <TickIcon {...iconProps} />
                   </Box>
                   <Typography
                     style={{
@@ -74,6 +93,7 @@ const AirdropEligibilityDetails: React.FC<AirdropEligibilityDetailsProps> = ({
                   bgcolor={theme.palette.grey[100]}
                   display="inline-block"
                   px={2}
+                  ml={3}
                   borderRadius={theme.spacing(2)}
                 >
                   <Typography color="textSecondary">{item.address}</Typography>
@@ -99,7 +119,7 @@ const AirdropEligibilityDetails: React.FC<AirdropEligibilityDetailsProps> = ({
                   mb={0.5}
                 >
                   <Box pr={theme.spacing(0.2)} display="flex" alignItems="center">
-                    <TickIcon />
+                    <TickIcon {...iconProps} />
                   </Box>
                   <Typography
                     style={{
@@ -135,6 +155,7 @@ const AirdropEligibilityDetails: React.FC<AirdropEligibilityDetailsProps> = ({
                   bgcolor={theme.palette.grey[100]}
                   display="inline-block"
                   px={2}
+                  ml={3}
                   borderRadius={theme.spacing(2)}
                 >
                   <Typography color="textSecondary">{item.address}</Typography>
@@ -144,6 +165,42 @@ const AirdropEligibilityDetails: React.FC<AirdropEligibilityDetailsProps> = ({
           })}
         </Box>
       ) : null}
+      {nonEligibleAddresses
+        ? nonEligibleAddresses.map((a) => (
+            // eslint-disable-next-line react/jsx-indent
+            <Box key={a.externalAddress + a.chainName}>
+              <Box
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                pt={theme.spacing(0.2)}
+                mb={0.5}
+              >
+                <Box pr={1} display="flex" alignItems="center">
+                  <WarningIcon {...errorIconProps} />
+                </Box>
+                <Box
+                  bgcolor={alpha(theme.palette.error.main, 0.15)}
+                  display="inline-block"
+                  px={2}
+                  borderRadius={theme.spacing(2)}
+                >
+                  <Typography color="error">{a.externalAddress}</Typography>
+                </Box>
+              </Box>
+              <Typography
+                style={{
+                  color: theme.palette.error.main,
+                  padding: 0,
+                  display: 'flex',
+                  flexDirection: 'row',
+                }}
+              >
+                {t('not eligible for airdrop')}
+              </Typography>
+            </Box>
+          ))
+        : null}
     </>
   )
 }
diff --git a/components/DsmAirdrop/CheckClaimable.tsx b/components/DsmAirdrop/CheckClaimable.tsx
index fe9d03ec..102e5a9c 100644
--- a/components/DsmAirdrop/CheckClaimable.tsx
+++ b/components/DsmAirdrop/CheckClaimable.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable camelcase */
 import {
   Button,
@@ -182,7 +183,17 @@ const CheckClaimable: React.FC<CheckClaimableProps> = ({
                 <Typography>{t('airdrop eligibility rule two')}</Typography>
               </Box>
             </Box>
-            <Typography>{t('airdrop eligibility description')}</Typography>
+            <Typography>
+              {t(
+                shouldGetGrant
+                  ? 'get a grant description'
+                  : !profile.dtag
+                  ? 'create profile description'
+                  : chainConnections.length === 0
+                  ? 'connect account description'
+                  : 'airdrop eligibility description'
+              )}
+            </Typography>
 
             <Box flex={1} display="flex" flexDirection="column" mb={3} mt={5.5}>
               <Button
@@ -197,7 +208,15 @@ const CheckClaimable: React.FC<CheckClaimableProps> = ({
                   (isGranting && !isGrantActive)
                 }
               >
-                {t(shouldGetGrant ? 'get a grant' : 'get started button')}
+                {t(
+                  shouldGetGrant
+                    ? 'get a grant'
+                    : !profile.dtag
+                    ? 'create profile'
+                    : chainConnections.length === 0
+                    ? 'connect account'
+                    : 'get started button'
+                )}
               </Button>
               <Box mt={1}>
                 <Typography variant="body2" color="error">
diff --git a/components/DsmAirdrop/ClaimableAmount.tsx b/components/DsmAirdrop/ClaimableAmount.tsx
index 44fbf82f..efda3c28 100644
--- a/components/DsmAirdrop/ClaimableAmount.tsx
+++ b/components/DsmAirdrop/ClaimableAmount.tsx
@@ -15,6 +15,8 @@ interface ClaimableAmountProps {
   loading: boolean
   setIsConnectChainDialogOpen(open: boolean): void
   externalAddress: string
+  connectedChainsStakingInfo: any
+  connectedChainsLpInfo: any
 }
 
 const ClaimableAmount: React.FC<ClaimableAmountProps> = ({
@@ -24,6 +26,8 @@ const ClaimableAmount: React.FC<ClaimableAmountProps> = ({
   loading,
   setIsConnectChainDialogOpen,
   externalAddress,
+  connectedChainsStakingInfo,
+  connectedChainsLpInfo,
 }) => {
   const classes = useStyles()
   const { t, lang } = useTranslation('common')
@@ -42,17 +46,38 @@ const ClaimableAmount: React.FC<ClaimableAmountProps> = ({
       ).then((r) => r.json())
       // eslint-disable-next-line camelcase
       const { staking_infos, dsm_allotted, lp_infos } = data
-      setDataStakingInfo(staking_infos)
-      setLpInfos(lp_infos)
+      setDataStakingInfo(
+        staking_infos.filter((s) => !chainConnections.find((c) => c.externalAddress === s.address))
+      )
+      setLpInfos(
+        lp_infos.filter((s) => !chainConnections.find((c) => c.externalAddress === s.address))
+      )
     } catch (err) {
       console.log(err)
     }
-  }, [externalAddress])
+  }, [externalAddress, chainConnections])
 
   React.useEffect(() => {
     verify()
   }, [])
 
+  const nonEligibleAddresses = React.useMemo(() => {
+    const eligibleAddresses = [...connectedChainsStakingInfo, ...connectedChainsLpInfo]
+    const nonEligible = []
+    chainConnections.forEach((c) => {
+      if (
+        !eligibleAddresses.find(
+          (a) =>
+            a.address === c.externalAddress &&
+            (c.chainName === 'likecoin' ? a.chain_name === 'Likecoin' : true)
+        )
+      ) {
+        nonEligible.push(c)
+      }
+    })
+    return nonEligible
+  }, [chainConnections, connectedChainsStakingInfo, connectedChainsLpInfo])
+
   return (
     <form
       onSubmit={async (event) => {
@@ -67,8 +92,21 @@ const ClaimableAmount: React.FC<ClaimableAmountProps> = ({
           <Typography align="center" variant="h1" className={classes.claimableAmount}>
             {loading ? <CircularProgress /> : formatCrypto(amount, 'DSM', lang)}
           </Typography>
-          <Box mb={8}>
-            <AirdropEligibilityDetails lpInfos={lpInfos} dataStakingInfo={dataStakingInfo} />
+          <Box mb={2}>
+            <Typography>{t('connected accounts')}</Typography>
+            <AirdropEligibilityDetails
+              lpInfos={connectedChainsLpInfo}
+              dataStakingInfo={connectedChainsStakingInfo}
+              nonEligibleAddresses={nonEligibleAddresses}
+            />
+          </Box>
+          <Box mb={2}>
+            <Typography>{t('claim more description')}</Typography>
+            <AirdropEligibilityDetails
+              greyTick
+              lpInfos={lpInfos}
+              dataStakingInfo={dataStakingInfo}
+            />
           </Box>
           <Button
             fullWidth
diff --git a/components/DsmAirdrop/index.tsx b/components/DsmAirdrop/index.tsx
index b75baadc..7a4ad599 100644
--- a/components/DsmAirdrop/index.tsx
+++ b/components/DsmAirdrop/index.tsx
@@ -4,6 +4,7 @@ import useTranslation from 'next-translate/useTranslation'
 import { useSubscription, gql } from '@apollo/client'
 import axios from 'axios'
 import get from 'lodash/get'
+import { uniqBy } from 'lodash'
 import useStateHistory from '../../misc/useStateHistory'
 import { useStyles } from './styles'
 import CheckClaimable from './CheckClaimable'
@@ -75,6 +76,8 @@ const DsmAirdrop: React.FC = () => {
   const [totalDsmAllocated, setTotalDsmAllocated] = useState(0)
   const [totalDsmAllocatedLoading, setTotalDsmAllocatedLoading] = useState(false)
   const [airdropResponse, setAirdropResponse] = useState('')
+  const [connectedChainsStakingInfo, setConnectedChainStakingInfo] = useState([])
+  const [connectedChainsLpInfo, setConnectedChainLpInfo] = useState([])
 
   const [claimSuccess, setClaimSuccess] = useState(false)
   const [airdropConfig, setAirdropConfig] = useState({ airdrop_enabled: false })
@@ -111,6 +114,15 @@ const DsmAirdrop: React.FC = () => {
         .then(
           axios.spread((...responses) => {
             responses.forEach((res, i) => {
+              setConnectedChainStakingInfo((a) =>
+                uniqBy(
+                  [...a, ...(res.data.staking_infos ?? [])],
+                  (b: any) => b.address + b.chain_name
+                )
+              )
+              setConnectedChainLpInfo((a) =>
+                uniqBy([...a, ...(res.data.lp_infos ?? [])], (b: any) => b.address + b.chain_name)
+              )
               const chainClaimableAmount = [
                 ...(res.data.staking_infos ?? []),
                 ...(res.data.lp_infos ?? []),
@@ -169,6 +181,8 @@ const DsmAirdrop: React.FC = () => {
               }}
               amount={totalDsmAllocated}
               chainConnections={chainConnections}
+              connectedChainsStakingInfo={connectedChainsStakingInfo}
+              connectedChainsLpInfo={connectedChainsLpInfo}
               loading={totalDsmAllocatedLoading}
               setIsConnectChainDialogOpen={setIsConnectChainDialogOpen}
               externalAddress={externalAddress}
@@ -236,6 +250,7 @@ const DsmAirdrop: React.FC = () => {
         account={account}
         connections={chainConnections}
         open={isConnectChainDialogOpen}
+        shouldConnect
         onClose={() => {
           setIsConnectChainDialogOpen(false)
         }}
diff --git a/components/DsmAirdrop/styles.ts b/components/DsmAirdrop/styles.ts
index ffced09f..fb766342 100644
--- a/components/DsmAirdrop/styles.ts
+++ b/components/DsmAirdrop/styles.ts
@@ -16,7 +16,7 @@ export const useStyles = makeStyles(
       overflowY: 'initial',
     },
     stageContent: {
-      maxWidth: theme.spacing(58),
+      maxWidth: theme.spacing(64),
       padding: theme.spacing(2),
     },
     stepsCard: {
diff --git a/locales/en/common.json b/locales/en/common.json
index d83b474a..61d3d20d 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -486,5 +486,11 @@
   "connect more accounts": "Connect more Accounts",
   "show address on ledger": "Show address on ledger",
   "connect with keplr": "Connect with Keplr",
-  "connect with terra station": "Connect with Terra Station"
+  "connect with terra station": "Connect with Terra Station",
+  "get a grant description": "Get a grant to create a Desmos Profile for free",
+  "create profile description": "The first thing is that you need to create a Desmos profile",
+  "connect account description": "Please make sure you have connected the correct eligible account",
+  "connected accounts": "Connected accounts",
+  "claim more description": "If you want to claim more, please connect the following accounts",
+  "not eligible for airdrop": "This account is not eligible to receive the airdrop"
 }
diff --git a/misc/utils.ts b/misc/utils.ts
index 7118e3dd..0befd376 100644
--- a/misc/utils.ts
+++ b/misc/utils.ts
@@ -168,7 +168,6 @@ export const getWalletsBalancesFromAccountsBalances = (
 
 export const transformGqlAcountBalance = (data: any, timestamp: number): AccountBalance => {
   const denoms = get(data, 'account[0].available[0].tokens_prices', [])
-  console.log(data)
   const balance = {
     available: getTokenAmountFromDenoms(get(data, 'account[0].available[0].coins', []), denoms),
     delegated: getTokenAmountFromDenoms(
@@ -843,10 +842,8 @@ export const isValidMnemonic = (input) => {
   try {
     // eslint-disable-next-line no-new
     new EnglishMnemonic(input)
-    // console.log('valid mnemonic')
     return true
   } catch (err) {
-    // console.log('invalid mnemonic')
     return false
   }
 }