PageSourceSearch

https://matveyan.com/crocowallet.html

html matveyan.com collected 2026-10-06 13:13:40 UTC 32,048 bytes, 422 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>CrocoWallet — Telegram Mini App Case Study | Matveyan</title>
7    <meta name="description" content="Case study of CrocoWallet, a Telegram mini app that connects a crypto wallet with a bank card and converts crypto to fiat automatically at checkout." />
8    <link rel="canonical" href="https://matveyan.com/crocowallet.html" />
9    <link rel="icon" href="/favicon.ico?v=2" sizes="any" />
10    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2" />
11    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" />
12    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2" />
13    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png?v=2" />
14
15    <meta property="og:title" content="CrocoWallet — Telegram Mini App Case Study | Matveyan" />
16    <meta property="og:description" content="Case study of CrocoWallet, a Telegram mini app that connects a crypto wallet with a bank card and converts crypto to fiat automatically at checkout." />
17    <meta property="og:url" content="https://matveyan.com/crocowallet.html" />
18
19    <meta name="twitter:title" content="CrocoWallet — Telegram Mini App Case Study | Matveyan" />
20    <meta name="twitter:description" content="Case study of CrocoWallet, a Telegram mini app that connects a crypto wallet with a bank card and converts crypto to fiat automatically at checkout." />
21    
22    
22<script>document.documentElement.classList.add('boot-loading');</script>
22
23    <style>
24      html, body { margin: 0; background: #0f0f0f; }
25      .loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: transparent; overflow: hidden; }
26      .boot-loading .loader { background: #0f0f0f; }
27      .loaderContent { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 20px; transform: translate(-50%, -50%); }
28      .loaderContent svg { display: block; width: 30px; height: auto; }
29      .loadline { position: relative; width: 200px; height: 1px; overflow: hidden; background: rgb(255 255 255 / 10%); }
30      .loading-bar { position: absolute; inset: 0 auto 0 0; width: 0%; height: 1px; background: #fff; }
31      .loadpercent { font-family: monospace; font-size: 12px; letter-spacing: 1px; color: #fff; }
32      .boot-loading body > :not(.loader) { opacity: 0 !important; visibility: hidden !important; }
33      .boot-loading #wave { opacity: 0 !important; visibility: hidden !important; }
34    </style>
35    <!-- Yandex.Metrika counter -->
36<script type="text/javascript">
37    (function(m,e,t,r,i,k,a){
38        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
39        m[i].l=1*new Date();
40        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
41        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
42    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=109113160', 'ym');
43
44    ym(109113160, 'init', {ssr:true, clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
45</script>
45
46<!-- /Yandex.Metrika counter -->
47    
47<script type="module" crossorigin src="/assets/style-BKWkXVu2.js"></script>
47
48    <link rel="preload" crossorigin href="/assets/style-9zQ37i4M.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" crossorigin href="/assets/style-9zQ37i4M.css"></noscript>
49  </head>
50  <body class="inner">
51    <noscript><div><img src="https://mc.yandex.ru/watch/109113160" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
52    <div class="loader" aria-hidden="true">
53      <div class="loading-screen loading-screen--top"></div>
54      <div class="loading-screen loading-screen--bottom"></div>
55      <div class="loaderContent" id="loadingContent">
56        <svg width="49" height="35" viewBox="0 0 49 35" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
57          <path d="M14 7V35L0 28V0L14 7ZM31.5 7V35L17.5 28V0L31.5 7ZM49 7V35L35 28V0L49 7Z" fill="white"/>
58        </svg>
59        <div class="loadline">
60          <div class="loading-bar"></div>
61        </div>
62        <span class="loadpercent">0%</span>
63      </div>
64    </div>
65    <div class="coursor"></div>
66    <div class="frameScreen">
67      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
68        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
69      </svg>      
70      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
71        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
72      </svg>    
73      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
74        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
75      </svg>    
76      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
77        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
78      </svg>        
79      <div class="header">
80        <div class="logoBlock">
81          <a href="/">
82          <svg width="94" height="14" viewBox="0 0 94 14" fill="none" xmlns="http://www.w3.org/2000/svg">
83            <path d="M93.0507 2.59961C93.1067 2.59961 93.1507 2.61561 93.1827 2.64761C93.2147 2.67961 93.2307 2.72361 93.2307 2.77961V10.8196C93.2307 10.8756 93.2147 10.9196 93.1827 10.9516C93.1507 10.9836 93.1067 10.9996 93.0507 10.9996H91.6827C91.5747 10.9996 91.5027 10.9596 91.4667 10.8796L88.7967 5.10161V10.8196C88.7967 10.8756 88.7787 10.9196 88.7427 10.9516C88.7107 10.9836 88.6687 10.9996 88.6167 10.9996H87.5667C87.5107 10.9996 87.4667 10.9836 87.4347 10.9516C87.4027 10.9196 87.3867 10.8756 87.3867 10.8196V2.77961C87.3867 2.72361 87.4027 2.67961 87.4347 2.64761C87.4667 2.61561 87.5107 2.59961 87.5667 2.59961H88.9347C89.0427 2.59961 89.1147 2.63961 89.1507 2.71961L91.8207 8.49761V2.77961C91.8207 2.72361 91.8367 2.67961 91.8687 2.64761C91.9047 2.61561 91.9487 2.59961 92.0007 2.59961H93.0507Z" fill="white"/>
84            <path d="M86.2371 10.7956C86.2731 10.9316 86.2251 10.9996 86.0931 10.9996H84.8691C84.7531 10.9996 84.6851 10.9516 84.6651 10.8556L84.3291 9.48761H81.5211L81.1851 10.8556C81.1651 10.9516 81.0971 10.9996 80.9811 10.9996H79.7631C79.6271 10.9996 79.5791 10.9316 79.6191 10.7956L81.7431 2.74361C81.7751 2.64761 81.8451 2.59961 81.9531 2.59961H83.8971C84.0051 2.59961 84.0751 2.64761 84.1071 2.74361L86.2371 10.7956ZM81.8511 8.14361H83.9991L83.0331 4.21961H82.8171L81.8511 8.14361Z" fill="white"/>
85            <path d="M71.3431 2.59961C71.4151 2.59961 71.4611 2.61961 71.4811 2.65961C71.5051 2.69961 71.4991 2.75161 71.4631 2.81561L68.9431 7.65161V10.8196C68.9431 10.8756 68.9271 10.9196 68.8951 10.9516C68.8631 10.9836 68.8191 10.9996 68.7631 10.9996H67.5511C67.4951 10.9996 67.4511 10.9836 67.4191 10.9516C67.3871 10.9196 67.3711 10.8756 67.3711 10.8196V7.62761L64.8511 2.81561C64.8151 2.75161 64.8071 2.69961 64.8271 2.65961C64.8511 2.61961 64.8991 2.59961 64.9711 2.59961H66.2431C66.3511 2.59961 66.4231 2.63961 66.4591 2.71961L68.1571 6.16961L69.8551 2.71961C69.8911 2.63961 69.9631 2.59961 70.0711 2.59961H71.3431Z" fill="white"/>
86            <path d="M63.4093 9.60761C63.4653 9.60761 63.5093 9.62361 63.5413 9.65561C63.5733 9.68761 63.5893 9.73161 63.5893 9.78761V10.8196C63.5893 10.8756 63.5733 10.9196 63.5413 10.9516C63.5093 10.9836 63.4653 10.9996 63.4093 10.9996H58.2073C58.1553 10.9996 58.1113 10.9836 58.0753 10.9516C58.0433 10.9196 58.0273 10.8756 58.0273 10.8196V2.77961C58.0273 2.72361 58.0433 2.67961 58.0753 2.64761C58.1113 2.61561 58.1553 2.59961 58.2073 2.59961H63.3973C63.4533 2.59961 63.4973 2.61561 63.5293 2.64761C63.5613 2.67961 63.5773 2.72361 63.5773 2.77961V3.81161C63.5773 3.86761 63.5613 3.91161 63.5293 3.94361C63.4973 3.97561 63.4533 3.99161 63.3973 3.99161H59.5933V6.00161H63.0913C63.1433 6.00161 63.1853 6.01961 63.2173 6.05561C63.2533 6.08761 63.2713 6.12961 63.2713 6.18161V7.21961C63.2713 7.27561 63.2533 7.31961 63.2173 7.35161C63.1853 7.38361 63.1433 7.39961 63.0913 7.39961H59.5933V9.60761H63.4093Z" fill="white"/>
87            <path d="M55.1339 2.74361C55.1539 2.64761 55.2219 2.59961 55.3379 2.59961H56.5619C56.6939 2.59961 56.7419 2.66761 56.7059 2.80361L54.5759 10.8556C54.5439 10.9516 54.4739 10.9996 54.3659 10.9996H52.4219C52.3139 10.9996 52.2439 10.9516 52.2119 10.8556L50.0879 2.80361C50.0479 2.66761 50.0959 2.59961 50.2319 2.59961H51.4499C51.5659 2.59961 51.6339 2.64761 51.6539 2.74361L53.2859 9.37361H53.5019L55.1339 2.74361Z" fill="white"/>
88            <path d="M48.9219 2.59961C48.9779 2.59961 49.0219 2.61561 49.0539 2.64761C49.0859 2.67961 49.1019 2.72361 49.1019 2.77961V3.81161C49.1019 3.86761 49.0859 3.91161 49.0539 3.94361C49.0219 3.97561 48.9779 3.99161 48.9219 3.99161H46.7979V10.8196C46.7979 10.8756 46.7819 10.9196 46.7499 10.9516C46.7179 10.9836 46.6739 10.9996 46.6179 10.9996H45.4059C45.3499 10.9996 45.3059 10.9836 45.2739 10.9516C45.2419 10.9196 45.2259 10.8756 45.2259 10.8196V3.99161H43.1019C43.0459 3.99161 43.0019 3.97561 42.9699 3.94361C42.9379 3.91161 42.9219 3.86761 42.9219 3.81161V2.77961C42.9219 2.72361 42.9379 2.67961 42.9699 2.64761C43.0019 2.61561 43.0459 2.59961 43.1019 2.59961H48.9219Z" fill="white"/>
89            <path d="M41.9402 10.7956C41.9762 10.9316 41.9282 10.9996 41.7962 10.9996H40.5722C40.4562 10.9996 40.3882 10.9516 40.3682 10.8556L40.0322 9.48761H37.2242L36.8882 10.8556C36.8682 10.9516 36.8002 10.9996 36.6842 10.9996H35.4662C35.3302 10.9996 35.2822 10.9316 35.3222 10.7956L37.4462 2.74361C37.4782 2.64761 37.5482 2.59961 37.6562 2.59961H39.6002C39.7082 2.59961 39.7782 2.64761 39.8102 2.74361L41.9402 10.7956ZM37.5542 8.14361H39.7022L38.7362 4.21961H38.5202L37.5542 8.14361Z" fill="white"/>
90            <path d="M28.473 10.9996C28.421 10.9996 28.377 10.9836 28.341 10.9516C28.309 10.9196 28.293 10.8756 28.293 10.8196V2.77961C28.293 2.72361 28.309 2.67961 28.341 2.64761C28.377 2.61561 28.421 2.59961 28.473 2.59961H29.721C29.849 2.59961 29.921 2.63961 29.937 2.71961L31.203 9.25961H31.287L32.553 2.71961C32.569 2.63961 32.641 2.59961 32.769 2.59961H34.017C34.069 2.59961 34.111 2.61561 34.143 2.64761C34.179 2.67961 34.197 2.72361 34.197 2.77961V10.8196C34.197 10.8756 34.179 10.9196 34.143 10.9516C34.111 10.9836 34.069 10.9996 34.017 10.9996H33.087C33.031 10.9996 32.987 10.9836 32.955 10.9516C32.923 10.9196 32.907 10.8756 32.907 10.8196V5.78561H32.823L31.803 10.8556C31.787 10.9516 31.717 10.9996 31.593 10.9996H30.897C30.773 10.9996 30.703 10.9516 30.687 10.8556L29.667 5.78561H29.583V10.8196C29.583 10.8756 29.567 10.9196 29.535 10.9516C29.503 10.9836 29.459 10.9996 29.403 10.9996H28.473Z" fill="white"/>
91            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.59961 2.7998V14L0 11.2002V0L5.59961 2.7998ZM12.5996 2.7998V14L7 11.2002V0L12.5996 2.7998ZM19.5996 2.7998V14L14 11.2002V0L19.5996 2.7998Z" fill="white"/>
92            </svg>
93          </a>
94          <svg id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05" data-cursor-text="Enable sound">
95            <title>Audio Wave</title>
96            <path id="Line_1" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
97            <path id="Line_2" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
98            <path id="Line_3" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
99            <path id="Line_4" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
100            <path id="Line_5" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
101            <path id="Line_6" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
102            <path id="Line_7" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
103            <path id="Line_8" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
104            <path id="Line_9" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
105          </svg>
106        </div>
107        <ul class="mainMenu">
108          <li><a href="cv.pdf" class="link" target="_blank" rel="noopener noreferrer">cv <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
109            <path d="M4 0H0L4 4V0Z" fill="white"/>
110            </svg>
111            </a></li>
112          <li><a href="https://www.behance.net/matart" class="link" target="_blank" rel="noopener noreferrer">behance <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
113            <path d="M4 0H0L4 4V0Z" fill="white"/>
114            </svg>
115            </a></li>
116          <li><a href="https://dribbble.com/MatveyAnanev" class="link" target="_blank" rel="noopener noreferrer">dribbble <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
117            <path d="M4 0H0L4 4V0Z" fill="white"/>
118            </svg>
119            </a></li>
120          <li><a href="https://www.linkedin.com/in/matveyan/" class="link" target="_blank" rel="noopener noreferrer">linkedin <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
121            <path d="M4 0H0L4 4V0Z" fill="white"/>
122            </svg>
123            </a></li>
124            <li><a href="mailto:[email protected]" class="link" target="_blank" rel="noopener noreferrer">Mail <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
125              <path d="M4 0H0L4 4V0Z" fill="white"/>
126              </svg>
127              </a></li>
128        </ul>          
129        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
130          <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
131        </svg>    
132        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
133          <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
134        </svg>        
135      </div>
136      </div>
137
138    <div class="bgCase caseCw"></div>
139    <div class="edge-blur" aria-hidden="true">
140      <div class="edge-blur__top"></div>
141      <div class="edge-blur__bottom"></div>
142    </div>
143    
144    
145      <div class="noise"></div>
146
147
148      <div class="section headcase">
149        <div class="container caseheader">
150          <ul class="breadcrumbs">
151            <li><a href="/">Home</a></li>
152            <li>Croco wallet</li>
153          </ul>
154          <h1>Croco wallet Telegram mini-app</h1>
155          <p>CrocoWallet is a Telegram mini app that helps people pay for real goods and services with crypto. The product connects a crypto wallet to a bank card and automatically converts selected assets into fiat at the moment of payment.
156          </p>
157        </div>
158      </div>
159
160      <div class="section">
161        <div class="container casecontainer" data-motion-text>
162          <div class="casedescription">
163            <h2>Problem</h2>
164            <p>Crypto is easy to hold and transfer, but still hard to use in everyday payment scenarios. Users often need to manually exchange assets, move money between services, and think about balances, networks, fees, and fiat availability before making a simple purchase.</p>
165          </div>
166        </div>
167      </div>
168
169      <div class="section">
170        <div class="container casecontainer" data-motion-text>
171          <div class="casedescription">
172            <h2>Solution</h2>
173            <p>We designed a bank card connected directly to a crypto wallet. Users choose which cryptocurrency should fund the card, and CrocoWallet handles conversion to fiat automatically during payment. The experience keeps crypto visible as the funding source while making the actual purchase feel familiar and card-native.</p>
174          </div>
175        </div>
176      </div>
177
178      <div class="section">
179        <div class="container casecontainer" data-motion-text>
180          <div class="casedescription">
181            <h2>My role</h2>
182            <p>I designed the product interface, core user journeys, and visual system for the Telegram mini app: wallet overview, card management, asset details, card issuance, rewards, and referral mechanics. The main challenge was to make a complex crypto-financial product feel simple enough for everyday payments.</p>
183          </div>
184        </div>
185      </div>
186
187      <div class="section">
188        <div class="container casecontainer" data-motion-text>
189          <div class="casedescription">
190            <h2>Design approach</h2>
191            <p>The interface is built around a clear relationship between assets and cards. Users can see their total balance, understand which asset is linked to a card, review transactions, and manage payment flows without leaving Telegram. I kept the experience compact, direct, and optimized for quick mobile decisions.</p>
192          </div>
193        </div>
194      </div>
195
196
197      <div class="section">
198        <div class="container casecontainer" data-motion-text>
199          <div class="casedescription">
200            <h2>Wallet</h2>
201            <p>The wallet gives users a clear overview of their total balance and connected cryptocurrencies, including 24-hour changes. This view acts as the starting point for both asset management and card funding decisions.</p>
202          </div>
203          <div class="images">
204            <img src="/assets/1-BDerb1Aw.jpg" alt="CrocoWallet wallet screen" title="CrocoWallet wallet screen">
205            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
206        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
207      </svg>      
208      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
209        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
210      </svg>    
211      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
212        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
213      </svg>    
214      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
215        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
216      </svg>        
217          </div>
218        </div>
219      </div>
220      <div class="section">
221        <div class="container casecontainer" data-motion-text>
222          <div class="casedescription">
223            <h2>Cards</h2>
224            <p>Users can issue multiple cards and link each card to a specific cryptocurrency in their wallet. This makes the payment model transparent: before paying, users understand exactly which asset will be converted into fiat.</p>
225          </div>
226          <div class="images">
227            <img src="/assets/2-C2JC4rft.jpg" alt="CrocoWallet cards screen" title="CrocoWallet cards screen">
228            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
229        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
230      </svg>      
231      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
232        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
233      </svg>    
234      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
235        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
236      </svg>    
237      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
238        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
239      </svg>        
240          </div>
241        </div>
242      </div>
243      <div class="section">
244        <div class="container casecontainer" data-motion-text>
245          <div class="casedescription">
246            <h2>Tasks</h2>
247            <p>Tasks introduce a lightweight engagement layer inside the wallet. Users can complete product actions, earn Croco bonuses, and unlock benefits that support activation, retention, and repeated card usage.</p>
248          </div>
249          <div class="images">
250            <img src="/assets/3-CfH61Gn0.jpg" alt="CrocoWallet tasks screen" title="CrocoWallet tasks screen">
251            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
252        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
253      </svg>      
254      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
255        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
256      </svg>    
257      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
258        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
259      </svg>    
260      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
261        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
262      </svg>        
263          </div>
264        </div>
265      </div>
266      <div class="section">
267        <div class="container casecontainer" data-motion-text>
268          <div class="casedescription">
269            <h2>Referral program</h2>
270            <p>The referral flow gives users a simple way to invite friends and receive rewards or discounts. It supports organic growth while staying connected to the product’s core value: using crypto more easily in everyday payments.</p>
271          </div>
272          <div class="images">
273            <img src="/assets/4-LgX35xtm.jpg" alt="CrocoWallet referral program screen" title="CrocoWallet referral program screen">
274            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
275        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
276      </svg>      
277      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
278        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
279      </svg>    
280      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
281        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
282      </svg>    
283      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
284        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
285      </svg>        
286          </div>
287        </div>
288      </div>
289      <div class="section">
290        <div class="container casecontainer" data-motion-text>
291          <div class="casedescription">
292            <h2>Asset</h2>
293            <p>The asset screen brings together price information, wallet actions, and transaction history. It helps users understand the asset they are holding and quickly decide whether to use it, transfer it, or connect it to a card.</p>
294          </div>
295          <div class="images">
296            <img src="/assets/5-DU4JaeMN.jpg" alt="CrocoWallet asset details screen" title="CrocoWallet asset details screen">
297            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
298        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
299      </svg>      
300      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
301        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
302      </svg>    
303      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
304        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
305      </svg>    
306      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
307        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
308      </svg>        
309          </div>
310        </div>
311      </div>
312
313      <div class="section">
314        <div class="container casecontainer" data-motion-text>
315          <div class="casedescription">
316            <h2>Open card</h2>
317            <p>The card detail view shows the linked cryptocurrency, available balance, and payment history. This creates a direct bridge between crypto funds and familiar card transactions, reducing ambiguity after each purchase.</p>
318          </div>
319          <div class="images">
320            <img src="/assets/6-D_eJNHxM.jpg" alt="CrocoWallet open card screen" title="CrocoWallet open card screen">
321            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
322        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
323      </svg>      
324      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
325        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
326      </svg>    
327      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
328        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
329      </svg>    
330      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
331        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
332      </svg>        
333          </div>
334        </div>
335      </div>
336
337      <div class="section">
338        <div class="container casecontainer" data-motion-text>
339          <div class="casedescription">
340            <h2>Card issuance flow</h2>
341            <p>The card issuance flow covers key scenarios such as ordering, pre-ordering, authorization, and card setup. The flow is designed to make a regulated financial action feel structured, predictable, and easy to complete inside a Telegram mini app.</p>
342          </div>
343          <div class="images">
344            <img src="/assets/7-BydcFaB9.jpg" alt="CrocoWallet card issuance flow screen" title="CrocoWallet card issuance flow screen">
345            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
346        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
347      </svg>      
348      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
349        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
350      </svg>    
351      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
352        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
353      </svg>    
354      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
355        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
356      </svg>        
357          </div>
358        </div>
359      </div>
360
361      <div class="section">
362        <div class="container casecontainer" data-motion-text>
363          <div class="casedescription">
364            <h2>Result</h2>
365            <p>The final concept turns a crypto wallet into a practical payment product. Users can manage assets, connect a card, choose the funding cryptocurrency, and pay in fiat without manually converting funds before every purchase.</p>
366          </div>
367        </div>
368      </div>
369
370
371      <div class="section lalalast">
372        <div class="container last" data-motion-text>
373          <h2>Available for full-time product design roles</h2>
374          <p>If you’re hiring a senior designer for fintech, trading, or complex digital products, let’s talk.</p>
375          <ul class="mainMenu" >
376            <li><a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/matveyan/" class="link">Linkedin<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
377              <path d="M4 0H0L4 4V0Z" fill="white"/>
378              </svg>
379              </a></li>
380            <li><a target="_blank" rel="noopener noreferrer" href="https://www.behance.net/matart" class="link">Behance<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
381              <path d="M4 0H0L4 4V0Z" fill="white"/>
382              </svg>
383              </a></li>
384            <li><a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/MatveyAnanev" class="link">Dribbble<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
385              <path d="M4 0H0L4 4V0Z" fill="white"/>
386              </svg>
387              </a></li>
388            <li><a target="_blank" rel="noopener noreferrer" href="mailto:[email protected]" class="link">Mail<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
389              <path d="M4 0H0L4 4V0Z" fill="white"/>
390              </svg>
391              </a></li>
392            <li><a target="_blank" rel="noopener noreferrer" href="https://t.me/MatveyAnanev" class="link">Telegram<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
393              <path d="M4 0H0L4 4V0Z" fill="white"/>
394              </svg>
395              </a></li>
396            <li><a target="_blank" rel="noopener noreferrer" href="https://t.me/fintechuien" class="link">Telegram channel<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
397              <path d="M4 0H0L4 4V0Z" fill="white"/>
398              </svg>
399              </a></li>
400            <li><a target="_blank" rel="noopener noreferrer" href="https://x.com/MAnanev38201" class="link">X<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
401              <path d="M4 0H0L4 4V0Z" fill="white"/>
402              </svg>
403              </a></li>
404          </ul>   
405              <img src="/assets/avatar-BLowVkpa.png" alt="Portrait of Matvey Ananev, fintech designer" title="Portrait of Matvey Ananev, fintech designer">
406          </div>
407          <div class="container vse" data-motion-text>
408            <svg viewBox="0 0 190 22" fill="none" xmlns="http://www.w3.org/2000/svg">
409              <path d="M189.675 0V21.8182H184.732L176.848 10.3551H176.72V21.8182H170.797V0H175.825L183.581 11.4205H183.751V0H189.675Z" fill="white"/>
410              <path d="M150.587 21.8182H144.195L151.397 0H159.494L166.695 21.8182H160.303L155.531 6.00852H155.36L150.587 21.8182ZM149.394 13.2102H161.411V17.642H149.394V13.2102Z" fill="white"/>
411              <path d="M121.312 0H127.918L132.179 8.86364H132.349L136.611 0H143.216L135.205 14.9574V21.8182H129.324V14.9574L121.312 0Z" fill="white"/>
412              <path d="M101.543 21.8182V0H117.267V4.77273H107.466V8.52273H116.458V13.2955H107.466V17.0455H117.225V21.8182H101.543Z" fill="white"/>
413              <path d="M81.6357 0L86.1101 15.3835H86.2805L90.755 0H97.4453L90.2436 21.8182H82.147L74.9453 0H81.6357Z" fill="white"/>
414              <path d="M52.4766 4.77273V0H71.4396V4.77273H64.8771V21.8182H59.0391V4.77273H52.4766Z" fill="white"/>
415              <path d="M35.6186 21.8182H29.2266L36.4283 0H44.5249L51.7266 21.8182H45.3345L40.5618 6.00852H40.3913L35.6186 21.8182ZM34.4254 13.2102H46.4425V17.642H34.4254V13.2102Z" fill="white"/>
416              <path d="M0 0H7.37216L12.4432 12.358H12.6989L17.7699 0H25.142V21.8182H19.3466V9.20455H19.1761L14.3182 21.6477H10.8239L5.96591 9.11932H5.79545V21.8182H0V0Z" fill="white"/>
417              </svg>          
418          </div>
419      </div>  
420  
421  </body>
422</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.