Skip to content

Commit 5e826af

Browse files
B0Y3R-AVAB0Y3R-AVA
committed
wrapped up design
1 parent 514e07c commit 5e826af

File tree

6 files changed

+164
-115
lines changed

6 files changed

+164
-115
lines changed

‎packages/core-mobile/app/assets/lotties/connect-waves.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.7.5","fr":100,"ip":0,"op":300,"w":180,"h":180,"nm":"Comp 1","ddd":0,"metadata":{"backgroundColor":{"r":255,"g":255,"b":255}},"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Bluetooth-logo.svg 1","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"hd":true,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","nm":"SVG","it":[{"ty":"gr","nm":"Path","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"c":true,"v":[[14.144503,18.121092],[18.520503,13.745092],[14.140603,9.367192],[14.144503,18.121092],[14.144503,18.121092]],"i":[[0,0],[-1.458666666666666,1.4586666666666677],[1.4599666666666682,1.4593000000000007],[-0.001300000000000523,-2.9179666666666666],[0,0]],"o":[[1.458666666666666,-1.458666666666666],[-1.4599666666666664,-1.4593000000000007],[0.001300000000000523,2.9179666666666666],[0,0],[0,0]]}}},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Path","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"c":true,"v":[[14.140603,36.172892],[18.520503,31.793992],[14.144503,27.417992],[14.140603,36.172892],[14.140603,36.172892]],"i":[[0,0],[-1.4599666666666664,1.4596333333333327],[1.458666666666666,1.458666666666666],[0.001300000000000523,-2.918300000000002],[0,0]],"o":[[1.4599666666666682,-1.4596333333333362],[-1.458666666666666,-1.458666666666666],[-0.001300000000000523,2.9182999999999986],[0,0],[0,0]]}}},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Path","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"c":true,"v":[[23.999003000000002,13.713892],[14.943403,22.769492],[23.999003000000002,31.826192000000002],[10.286103,45.539092],[10.286103,27.460892],[2.743163,35.003892],[0,32.260791999999995],[9.465823,22.769492],[0,13.278291999999999],[2.743163,10.535191999999999],[10.286103,18.079092],[10.286103,0],[23.999003000000002,13.713892],[23.999003000000002,13.713892]],"i":[[0,0],[3.018533333333334,-3.018533333333334],[-3.018533333333334,-3.018900000000002],[4.570966666666667,-4.5709666666666635],[0,6.026066666666665],[2.5143133333333347,-2.514333333333333],[0.9143876666666669,0.9143666666666661],[-3.1552743333333337,3.1637666666666675],[3.1552743333333333,3.163733333333335],[-0.9143876666666668,0.9143666666666661],[-2.514313333333334,-2.514633333333334],[0,6.026364],[-4.570966666666667,-4.571297333333334],[0,0]],"o":[[-3.018533333333334,3.0185333333333357],[3.018533333333334,3.018900000000002],[-4.570966666666667,4.57096666666666],[0,-6.026066666666665],[-2.514313333333334,2.514333333333333],[-0.9143876666666668,-0.9143666666666661],[3.1552743333333333,-3.163766666666664],[-3.155274333333333,-3.163733333333333],[0.9143876666666665,-0.9143666666666661],[2.514313333333333,2.5146333333333324],[0,-6.026364000000001],[4.570966666666667,4.571297333333333],[0,0],[0,0]]}}},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"fl","c":{"a":0,"k":[0.1568627450980392,0.1568627450980392,0.1803921568627451],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"tr","p":{"a":0,"k":[12.403797149658203,23.570756912231445],"ix":2},"a":{"a":0,"k":[11.99950122833252,22.769546508789062],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[12.403796672821045,23.57075595855713],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":3,"nm":"","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Wave-1 1:0-stroke-mask","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"td":1,"ao":0,"parent":2,"shapes":[{"ty":"gr","nm":"Wave-1 1","it":[{"ty":"el","d":1,"s":{"a":0,"k":[70,70],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Wave-1 1:0","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"tt":1,"ao":0,"parent":2,"shapes":[{"ty":"gr","nm":"Wave-1 1","it":[{"ty":"el","d":1,"s":{"a":0,"k":[70,70],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.1568627450980392,0.1568627450980392,0.1803921568627451],"ix":2},"o":{"a":0,"k":0,"ix":2},"w":{"a":0,"k":4,"ix":2},"lc":1,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":3,"nm":"","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Wave-1 4:0-stroke-mask","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"td":1,"ao":0,"parent":5,"shapes":[{"ty":"gr","nm":"Wave-1 4","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":85,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":175,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"tr","p":{"a":0,"k":[88,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Wave-1 4:0","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"tt":1,"ao":0,"parent":5,"shapes":[{"ty":"gr","nm":"Wave-1 4","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":85,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":175,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.1568627450980392,0.1568627450980392,0.1803921568627451],"ix":2},"o":{"a":1,"k":[{"t":85,"s":[0],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":100,"s":[20],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":175,"s":[0],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"w":{"a":0,"k":4,"ix":2},"lc":1,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[88,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":3,"nm":"","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Wave-1 3:0-stroke-mask","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"td":1,"ao":0,"parent":8,"shapes":[{"ty":"gr","nm":"Wave-1 3","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":60,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":150,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Wave-1 3:0","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"tt":1,"ao":0,"parent":8,"shapes":[{"ty":"gr","nm":"Wave-1 3","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":60,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":150,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.1568627450980392,0.1568627450980392,0.1803921568627451],"ix":2},"o":{"a":1,"k":[{"t":60,"s":[0],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":75,"s":[20],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":150,"s":[0],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"w":{"a":0,"k":4,"ix":2},"lc":1,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":3,"nm":"","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Wave-1 2:0-stroke-mask","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"td":1,"ao":0,"parent":11,"shapes":[{"ty":"gr","nm":"Wave-1 2","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":35,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":125,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Wave-1 2:0","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"tt":1,"ao":0,"parent":11,"shapes":[{"ty":"gr","nm":"Wave-1 2","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":35,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":125,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.1568627450980392,0.1568627450980392,0.1803921568627451],"ix":2},"o":{"a":1,"k":[{"t":35,"s":[0],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":50,"s":[20],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":125,"s":[0],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"w":{"a":0,"k":4,"ix":2},"lc":1,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":3,"nm":"","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Wave-1:0-stroke-mask","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"td":1,"ao":0,"parent":14,"shapes":[{"ty":"gr","nm":"Wave-1","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":10,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":100,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Wave-1:0","sr":1,"ks":{"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"tt":1,"ao":0,"parent":14,"shapes":[{"ty":"gr","nm":"Wave-1","it":[{"ty":"el","d":1,"s":{"a":1,"k":[{"t":10,"s":[70,70],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":100,"s":[175,175],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.1568627450980392,0.1568627450980392,0.1803921568627451],"ix":2},"o":{"a":1,"k":[{"t":10,"s":[0],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":25,"s":[20],"o":{"x":[0],"y":[0]},"i":{"x":[0.58],"y":[1]}},{"t":100,"s":[0],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"w":{"a":0,"k":4,"ix":2},"lc":1,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[90,90],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":301,"st":0,"bm":0}],"markers":[]}

‎packages/core-mobile/app/new/features/ledger/components/AnimatedIconWithText.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React from 'react'
2+
import { View } from 'react-native'
3+
import LottieView from 'lottie-react-native'
4+
import { Text, useTheme } from '@avalabs/k2-alpine'
5+
6+
interface AnimatedIconWithTextProps {
7+
/** The icon component to display */
8+
icon: React.ReactNode
9+
/** The main title text */
10+
title: string
11+
/** The subtitle/description text */
12+
subtitle: string
13+
/** Whether to show the animation behind the icon */
14+
showAnimation?: boolean
15+
/** Custom animation source (defaults to connect-waves.json) */
16+
animationSource?: any
17+
/** Custom animation size (defaults to 220x220) */
18+
animationSize?: { width: number; height: number }
19+
/** Custom icon positioning offset for animation centering */
20+
animationOffset?: { top: number; left: number }
21+
}
22+
23+
export const AnimatedIconWithText: React.FC<AnimatedIconWithTextProps> = ({
24+
icon,
25+
title,
26+
subtitle,
27+
showAnimation = false,
28+
animationSource = require('assets/lotties/connect-waves.json'),
29+
animationSize = { width: 220, height: 220 }
30+
}) => {
31+
const {
32+
theme: { colors }
33+
} = useTheme()
34+
35+
// Calculate dynamic positioning based on animation size
36+
const iconContainerHeight = 44 // Assuming standard icon size
37+
const animationRadius = animationSize.width / 2
38+
const iconRadius = iconContainerHeight / 2
39+
40+
// Calculate animation offset to center it around the icon
41+
const dynamicAnimationOffset = {
42+
top: -(animationRadius - iconRadius),
43+
left: -(animationRadius - iconRadius)
44+
}
45+
46+
// Calculate consistent text position regardless of animation state
47+
const baseTopPosition = 160 // Base centering position
48+
const textOverlapPosition = baseTopPosition + iconContainerHeight + 16 // Keep text close to icon for both states
49+
50+
return (
51+
<View
52+
style={{
53+
flex: 1,
54+
alignItems: 'center',
55+
paddingHorizontal: 32
56+
}}>
57+
<View
58+
style={{
59+
marginTop: baseTopPosition,
60+
marginBottom: 0,
61+
alignItems: 'center',
62+
justifyContent: 'center'
63+
}}>
64+
{showAnimation && (
65+
<LottieView
66+
source={animationSource}
67+
autoPlay
68+
loop
69+
style={{
70+
position: 'absolute',
71+
width: animationSize.width,
72+
height: animationSize.height,
73+
top: dynamicAnimationOffset.top,
74+
left: dynamicAnimationOffset.left
75+
}}
76+
/>
77+
)}
78+
{icon}
79+
</View>
80+
<View
81+
style={{
82+
position: 'absolute',
83+
top: textOverlapPosition,
84+
left: 0,
85+
right: 0,
86+
alignItems: 'center',
87+
paddingHorizontal: 32
88+
}}>
89+
<Text
90+
variant="heading6"
91+
style={{
92+
textAlign: 'center',
93+
marginBottom: 4
94+
}}>
95+
{title}
96+
</Text>
97+
<Text
98+
variant="body1"
99+
style={{
100+
textAlign: 'center',
101+
color: colors.$textSecondary,
102+
maxWidth: 280
103+
}}>
104+
{subtitle}
105+
</Text>
106+
</View>
107+
</View>
108+
)
109+
}

‎packages/core-mobile/app/new/features/ledger/components/DerivationPathSelector.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ const derivationPathOptions: DerivationPathOption[] = [
2323
{
2424
type: LedgerDerivationPathType.BIP44,
2525
title: 'BIP44',
26-
subtitle: 'Standard approach for most users',
26+
subtitle: 'Recommended for most users',
2727
benefits: [
28-
'Faster setup (~15 seconds)',
28+
'Faster setup, about 15 seconds',
2929
'Create new accounts without device',
3030
'Industry standard approach',
3131
'Better for multiple accounts'
@@ -135,7 +135,7 @@ export const DerivationPathSelector: React.FC<DerivationPathSelectorProps> = ({
135135
gap: 16,
136136
paddingBottom: 100
137137
}}>
138-
<View style={{ marginTop: 16 }} />
138+
<View style={{ marginTop: 8 }} />
139139

140140
{derivationPathOptions.map(option => (
141141
<OptionCard

0 commit comments

Comments
 (0)